0:00 / 0:00

CSS Grid: Wprowadzenie

Zaawansowane layouty

3 godz. 3 min · HTML i CSS · Full-stack i Programowanie

Wojciech PołowniakSr. Fullstack Engineer

Czego się nauczysz

Poznanie podstawowej składni CSS Grid
Zrozumienie różnic między CSS Grid a CSS Flexbox
Wykorzystanie siatek do tworzenia responsywnych layoutów bez użycia media queries
Implikacje dotyczące dostępności
Najczęstsze błędy i nieporozumienia
Wady i zalety grida
Nadchodzące elementy w specyfikacji CSS Grid module level 2
Osoby i źródła które warto znać i obserwować

Poznaj podstawy CSS Grid

W 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.

Siatki i responsywne layouty

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.

Unikaj najczęstszych błędów

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.

Wady i zalety Grida

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.

Ciekawe źródła i materiały

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ć.

Dla kogo jest ten kurs?

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.

0:00Cześć z

0:04tej strony Wojciech Połowniak jestem front-end deweloperem z wieloletnim doświadczeniem możesz

0:08mnie kojarzyć z kanału koduje na youtubie organizacji warszawskich meet.js czy

0:12jako spikera pod banderą mozilli w tym kursie przedstawię ci najważniejsze koncepty

0:16technologii renderowania elementów w siatce czyli css grid css

0:20grid to najnowsza metoda pozycjonowanie elementów natywna dla css niektórzy

0:25twierdzą że jest to następca css flexbox i być może mają rację

0:29ponieważ w porównaniu do flexboxa grid ma o wiele większe możliwości i spójniejszą

0:33składnię dodatkowo idealnie wpasowuje w ideę progressive enhancement czyli

0:37stopniowego dostarczania coraz to lepszych doświadczeń użytkownikom w zależności od

0:41używanego przez nich urządzenia css grid to potężne narzędzie które pozwoli

0:46ci stworzyć responsywne layouty nawet bez użycia media queries w

0:50pierwszym rozdziale opowiem bardzo krótko o narzędziach deweloperskich firefoxa które są

0:54idealne do pracy z gridem oraz przypomnę kluczową relację rodzić dziecko po tej krótkiej rozgrzewce

1:01w drugim rozdziale dogłębnie poznasz mechanikę grida poznasz ograniczenia i możliwości tej

1:05metody pozycjonowania oraz zastrzeżenia które budzi w kontekście dostępności w

1:10trzecim rozdziale porównam grida do flexboxa pokazując ich cechy wspólne jak i

1:14różnice dowiesz się kiedy warto skorzystać z grida a kiedy flexbox będzie

1:18wydawał się lepszym wyborem następnie w krótkim podsumowaniu przypomnę

1:22wszystkie nowo poznane właściwości i słowa kluczowe w kontekście grida kolejny

1:26rozdział to zbiór ciekawostek i projektów opartych na gridzie pokażę jak w najprostszy

1:30sposób stworzyć własny substytut bootstrapa w oparciu o grida poznasz podstawowe koncepcje

1:35technologii takich jest css custom properties oraz poznasz ograniczenia

1:39i możliwości grida poznasz też wiele ciekawych projektów innych

1:43programistów z branży specjalizujących się w css grid na końcu przekieruję

1:47cię na dodatkowe źrodła do nauki na własną rękę aby

1:51efektywnie korzystać z tego kursu potrzebujesz jedynie podstawowej wiedzy z zakresu html i css

1:55mimo to jeśli znasz flexboxa na pewno będzie ci łatwiej zrozumieć

1:59niektóre koncepty jeśli chcesz poznać najbardziej aktualną i świetnie wspieraną metodę

2:04pozycjonowanie elementów jaką jest css grid to ten kurs jest właśnie dla

2:08ciebie tak więc nie przedłużając już dłużej zapraszam cię serdecznie do

2:12pierwszej lekcji do zobaczenia