od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
W tej lekcji opowiem o kompilacji z CSS a przy pomocy Marcela.
Na początku prawie sobie literówki kompilację i przejdziemy do omawiania.
Faktycznie parasol parasol
generalnie różni się tym od innych leków że chwali się że jest
z reguły z konfiguracje to znaczy nie musimy skonfigurować go jawnie nie musimy
robić takich powtarzalnych czynności ręcznie aby osiągnąć podstawowe efekty czy
podstawowe funkcjonalności na których nam zależy takie jak np.
często potrzebna jest właśnie CSS czy
kompilacja naszych a setów likwidowanie obrazków.
Celowanie JavaScript czyli tak jakby
filmowanie ich do nowszych wersji języka i to wszystko Barthel dla nas robi.
Jest on zupełnie innym narzędziem od
Gallupa ponieważ cel sam w sobie przyjmuję jako.
Plik wejściowy plik HTML i plik HTML.
Może już sobie zawierać np.
pliki z CSS bezpośrednio.
Tutaj warto zauważyć że
należy rozróżnić taki plik HTML plik źródłowy od pliku docelowego ponieważ
w pliku docelowym pliki CSS nie mogą zadziałać więc jeżeli taki plik uruchomić
w przeglądarce to te style się nie załamują bo
przeglądarka nie będzie wiedziała co zrobić z plikiem CSS
aby użyć Pascala tak samo jak w golfie musimy najpierw zainstalować
paczkę która pozwoli nam operować Marcelem z poziomu poleceń.
No i możemy to zrobić za pomocą n.p.m. gdzie Marcel Chandler
ja już to zrobiłem więc ja mam dostępną paczkę faksem.
No i składnia jest taka że albo możemy
podać plik wyjściowy czyli w moim przypadku indeks HTML Albo możemy jeszcze
go poprzedzić słowem kluczowym build i wtedy będziemy mieli nie serwer
deweloperski tylko faktycznie budowanie statycznych plików które Barthel
przejęli protestuje i stworzy z tego prawdziwe pliki HTML CSS.
Możemy to zrobić dla testów.
I tu mam napisane że faktycznie on buduje z CSS.
Już widzimy że to zajęło o wiele dłużej
niż przykładowe budowanie tego przez Gallupa gal.
Zajęło budowanie samego CSS a 27 milisekund.
Tutaj mamy 4 sekundy natomiast nie jest to porównanie uczciwe ponieważ tak naprawdę
parasol robi tutaj o wiele więcej rzeczy jak np.
zamienia te placki i generuje faktycznie pliki HTML gdzie w Galerie tylko
zmienialiśmy pliki CSS do plików CSS i tutaj zobaczymy w liście to
faktycznie po uproszczeniu tego pliku tutaj możemy zrobić Shift Command p na
Maku bądź po prostu odtworzyć komendę w kodzie innym skrótem klawiszem
odpowiednim dla waszej Platformy i wpisać BirdLife fail.
Wydaje mi się że to jest wbudowane w dwie a jeżeli nie.
Na pewno są paczki w Chinach.
Możecie wyszukać pobity i będą
takie opcje żeby zmienić po prostu zainfekowane pliki na pliki
ładnie wycięte.
Widzimy że na końcu nasze pliki i kropka z CSS nie są już RCS em
ponieważ to nam handlował do aktywnego języka przeglądarek czyli CSS.
Dlatego warto rozróżnić edytować plików źródłowych od plików docelowych no i
możemy też odpalić po prostu serwer deweloperski Pascala.
Pod komendą Barthel indeks HTML.
No i on tutaj nam stworzył serwer sam z siebie.
Na porcie 1234 i faktycznie widzimy że to
działa jeżeli zmienimy coś w tym pliku czyli plik Index CSS.
CSS CSS indeks zmienimy tutaj np.
ten kolor na jakiś inny
albo w sumie możemy zmienić kolor.
Na faktycznie użycie Properties czyli War ustawiamy tutaj portfel.
Piszemy.
No to widzimy że to nam się automatycznie budowało więc parasol robi nam tutaj hot
Landing czyli automatyczne budowanie tego co znajduje się w przeglądarce na
podstawie tego co znajduje się w systemie u nas.
Więc parasol jest na pewno o wiele wygodniejszy narzędziem niż kult.
Natomiast nie znaczy to że gorszy gad po prostu jest przeznaczony do robienia
innych rzeczy do odpalania pasków które mogą być zautomatyzowane ale niekoniecznie
do takiego flow deweloperskiego z klasycznym.
Przygotowywaniem przeglądarki czy setów.
Jeśli będziecie mieli problemy z używaniem parasola no to koniecznie odpalić m n.p.m.
Instal w tej lekcji i w lekcji numer 27 według gałęzi getta bądź po prostu odwecie
dokumentację piksela on line żeby dowiedzieć się jak te problemy rozwiązać.
To tyle jeżeli chodzi o parasola.
W kolejnej lekcji mówimy pokrótce chłopaka.