Kurs CSS Grid
Dowiedz się jak wykorzystać CSS Grid do tworzenia responsywnych i skalowalnych layoutów stron internetowych oraz jak uniknąć częstych problemów.
31 lekcji
3h 3min
5 (8 oceny)
CSS Grid - Zaawansowane layouty
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.
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ć
Zawartość
CSS Grid
6 rozdziały 31 lekcji 3h 3min
-
Wprowadzenie
8min
-
Poznajemy składnie CSS Grid
1h 19min
Rozmiary torów
8min
Funkcja repeat
4min
Ustalanie rozmiarów elementów
8min
Umieszczanie elementów na siatce
9min
Automatyczne dopasowywanie i wypełnianie
5min
Funkcja minmax
5min
Dopasowywanie do treści
6min
Obszary szablonowe
10min
Pozycjonowanie na krańcach obszarów
8min
Nazywanie linii
8min
Zagęszczanie layoutu
3min
-
Różnice i podobieństwa CSS Grid do CSS Flexbox
24min
Wyrównywanie elementów siatki
7min
Kolejność wyświetlania
4min
Odwracanie kolejności renderowania
6min
Podsumowanie różnic
7min
-
Podsumowanie dostępnych właściwości i słów kluczowych
10min
Słowa kluczowe i funkcje
5min
Wszystkie właściwości i notacje skrócone
5min
-
Ciekawe przypadki i zastosowania
57min
Wady i zalety grida
8min
Zbiór albumów
6min
Tablica Trello na gridzie
9min
Masonry layout
4min
Własny bootstrap bez boostrapa oraz CSS custom properties
8min
Grid Tetris
3min
Responsywny layout witryny
13min
Nadchodzące zmiany
6min
-
Zakończenie
5min
Przydatne blogi i linki
5min
Podziękowania
Autor kursu
Wojciech Połowniak
Sr. Fullstack Engineer
Średnia ocen autora: 5
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Mikołaj Telec
13 marca 2021
Bardzo fajny kurs, wszystko ładnie wytłumaczone (dużo lepszy niż Flexboxa), polecam!
Bartosz Kozień
5 kwietnia 2021
Dobrze przygotowany kurs, jasno i zrozumiale omówione zagadnienia. Polecam.
Piotr Kaniowski
8 czerwca 2021
Dariusz Mazur
12 lipca 2021
Krzysztof Kiersnowski
6 września 2021
Dominik Mendlikowski
3 października 2021
Dzięki za bardzo fajnie przeprowadzony kurs!
Dominik Jandy
25 stycznia 2022
Karol Kotański
17 kwietnia 2022
Kurs CSS Grid
-
31 lekcji wideo
-
3h 3min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
Wiedza ekspertów
Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
Praktyczne przykłady
Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w CSS Grid
-
31 lekcji wideo
-
3h 3min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowoczesny React
Michał Jabłoński
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk