Zaawansowane layouty
3 godz. 3 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerW początkowych lekcjach Kursu omówimy podstawową składnię CSS Grid, tak, by zbudować solidny fundament pod poznawanie kolejnych, bardziej rozbudowanych zagadnień. Na praktycznych przykładach poznasz i zrozumiesz różnice, jakie są pomiędzy CSS Grid a CSS Flexbox.
Po poznaniu niezbędnych, podstawowych zagadnień związanych ze składnią CSS Grid przejdziemy do tematu wykorzystania siatek. Wykorzystamy je do stworzenia responsywnych layoutów bez użycia media queries.
W kolejnych, bardziej rozbudowanych lekcjach kursu poznasz implikacje dotyczące dostępności. W obszernym rozdziale omówimy również szerzej najczęstsze błędy i nieporozumienia związane z CSS Grid.
Tak jak każda technologia, Grid ma swoje wady i zalety. Omówimy zarówno pierwsze, jak i drugie, tak, by wykorzystać pełen potencjał CSS Grid i nie dać się zniechęcić przez pewne jego wady. Dowiesz się również nieco na temat nadchodzących elementów w specyfikacji CSS Grid module level 2.
Aby być na bieżąco - warto uważnie śledzić najważniejsze i najbardziej aktualne źródła związane z CSS Grid. W końcowych rozdziałach pokażemy Ci naszym zdaniem najciekawsze źródła oraz osoby związane z Gridem, które warto znać oraz obserwować.
Jeśli chcesz poznać najbardziej aktualną i świetnie wspieraną metodę pozycjonowania elementów jaką jest CSS Grid, ten kurs jest właśnie dla Ciebie! Aby efektywnie korzystać z tego kursu potrzebujesz jedynie podstawowej wiedzy z zakresu HTML i CSS - a jeśli znasz Flexboxa, na pewno będzie Ci łatwiej zrozumieć niektóre koncepty.
W pierwszej lekcji z kursu css grid zaawansowane layouty omówimy
narzędzia z jakich korzystać będziemy przez cały kurs i przede wszystkim z
jakiej przeglądarki będziemy korzystać będzie to mozilla
firefox nightly wybrałem firefoxa dlatego ponieważ
w chwili obecnej posiada on najlepsze wsparcie dla css grid zarówno w
kontekście bugów czy narzędzi deweloperskich więc
zobaczmy jak wyglądają devtools firefox nightly
narzędzia deweloperskie możemy otworzyć za pomocą skrótu klawiszowego option command
i jeśli korzystacie z mac os albo f12
jeżeli korzystacie z windowsa bądź linuxa w sekcji układ
tutaj w prawym dolnym rogu możecie znaleźć elementy na
stronie które są faktycznie rozpoznawane jako css grid container jeżeli
zaznaczymy sobie tego checkboxa to firefox
nightly podświetli nam wszystkie prowadnice numery linii numery wierszy które
przydadzą się bardzo mocno podczas deweloperki oraz faktycznej
nauki grida możemy również zmienić kolor konkretnych prowadnic
tutaj na czarnym tle najlepiej wyglądają białe prowadnice
dlatego zostaniemy z białymi możecie włączać nazwy obszarów do
obszarów dojdziemy w kolejnych lekcjach natomiast numery wierszy czy
nieskończące się prowadnice które wychodzą poza element który jest grid
containerem możemy ustawić z poziomu narzędzi deweloperskich google
chrome oczywiście też posiada wsparcie dla css grid i podświetla
w narzędziach deweloperskich konkretne elementy grida natomiast
nie mamy tam możliwości podejrzenia początku i końca
linii ich numeracji czy nazw tak więc
do końca tego kursu będziemy korzystali z firefox nightly i
ciebie też gorąco zachęcam abyś korzystał z tej przeglądarki przejdźmy
więc do faktycznej nauki css grid