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.
Część w tej lekcji opowiem ci pokrótce o
CSS gra idzie pokrótce ponieważ mamy też osobny kurs.
O tym więc ja tutaj tak naprawdę podkreśla najważniejsze cechy gry.
że kiedyś warto z niego korzystać.
Jakie są jego wady i zalety no i takie generalne podstawy jak korzystać z gry
więc tutaj wiedza z Flex Box bardzo się przydaje jeżeli pracujemy z gradem.
Ponieważ GRID działa na tej samej relacji
rodzic dziecko co Flex Box czyli my strzelając elementy gry Eda.
Musimy stylowe tak naprawdę kontenery a
nie same elementy chyba że pozycja i indywidualny element na gry.
Natomiast żeby w ogóle zacząć pracę z gry no to musimy mu ustawić tryb wyświetlania
poprzez display na Grid i domyślnie jak ustaliliśmy Display Flex na kontenerze.
To tutaj nam się podgląd.
Wszystkie elementy do jednego wiersza włączyły natomiast w gry.
Nie jest to
po prostu nie dzieje ponieważ GRID działa na innej zasadzie
GRID jak sama nazwa wskazuje jest siatką czyli my pracujemy na wierszach i
kolumnach które jawnie deklarujemy i jawnie deklarowane wiersze i kolumny.
My określamy czy nie ma czegoś takiego że
treść dyktuje nam to jak nasz kontent będzie się układał.
To my musimy jawnie napisać na przykład GRID komplet kolumn
i zdefiniować że chcemy użyć czterech kolumn powiedzmy po 50.
Zobaczymy czy to jest 50 gramów to bardzo dużo.
To może teraz zmniejszymy
tak musimy to troszkę zmniejszyć zmniejszymy to może do 10 rozmów.
No i jeszcze możemy na pojedynczym
elemencie CSS zmniejszyć tą szerokość za zapisaną na sztywno.
Tak i w tym momencie widzimy że faktycznie
nasz kontent ułożył się w trzy kolumny bo tak zadeklarowali poprzez SMS
że to będą trzy nasze kolumny do tego
oczywiście dochodzą różne fajne funkcjonalności które
nam tutaj udostępnia czy nie musimy pisać trzykrotnie 10 REM jeżeli to jest taka
sama wartość równa możemy wpisać po prostu PIT.
Ilość razy czyli ilość powtórzeń i wartość którą chcemy powtórzyć.
Funkcja Rapid jest bardzo przydatna bo tak naprawdę redukuje nam bardzo dużą ilość
kodu zwłaszcza w bardzo skomplikowanych autach.
Oprócz GRID Temple Columbus możemy też zdefiniować GRID LED Rocks.
No i działa to generalnie na takiej samej zasadzie podajemy rozmiar
nie kolumny czyli nie szerokości w tym momencie tylko wiersza czyli wysokości.
Tutaj w quizie nie ma takiego pojęcia osi jak we Flex boksie ponieważ nie ma czegoś
takiego jak GRID Rivers czy coś w tym stylu.
Natomiast GRID daje nam możliwości
układania elementów na siatce w sposób bardzo wygodny
poprzez jawne deklarować w którym miejscu na tej siatce dany element ma się pojawić
czyli jeśli tutaj piszemy sobie GRID Temple Cross powiedzmy na.
30 rozmów.
No to widzimy że w tym przypadku tylko
jeden element nam się rozszerzył bo tak naprawdę zadeklarowali mamy tylko jedną.
Jeden wiersz który ma się tutaj ustawić jeżeli
zmienimy za pomocą funkcji Rapid np.
na dwa elementy no to oczywiście oba
elementy będą miały tą wysokość 30 frejmów.
Jeżeli chcemy zadeklarować elementy automatycznie czyli wysokość elementów.
Automatycznie nie podając jawnie wysokości to możemy użyć do tego GRID
auto Rolex czy GRID a auto Columbus jeżeli chcemy uzyskać taką samą funkcjonalność w
osi poziomej i możemy tutaj po prostu podać tą.
Szerokość czy wysokość w zależności od
tego do której właściwości CSS to przypisuje.
No i wtedy faktycznie ta linka jest np.
już nam niepotrzebna ponieważ wszystkie
rowy są automatycznie ustawione na 10 kremów no i warto tutaj zauważyć że CSS
GRID domyślnie jeżeli element nie ma jakiejś tutaj
zapisanych na sztywno wysokości czy szerokości on je rozciąga tak samo jak
GRID rozciągał w Cross Access poprzez Elaine Stream.
Więc to jest taki podstawowy z żeby faktycznie wyświetlać elementy w
siatce natomiast tak jak wspominałem już poprzedniej lekcji warto ostrożnie.
Pracował z gradem ponieważ nie powinniśmy go używać na przykład do opisywania
trybu wyświetlania tabeli ponieważ niesie to za sobą antyczne problemy
i tak naprawdę problemy z dostępnością w kolejnych lekcjach opowiem troszkę
więcej o właściwościach specyficznych dla Grada.
Natomiast będzie to naprawdę kurs przyspieszony CSS grilla jeżeli będziesz
chciał na spokojnie przetestować różne możliwości gry.
Oczywiście do tego zachęcam i jeżeli ten
dział nie będzie dla ciebie wystarczający aby dostatecznie zrozumieć grilla no to
odsyłam Cię serdecznie do kursu CSS GRID zaawansowane buty na platformie
ePUAP dzięki do zobaczenia w kolejnej lekcji.