Masz już konto? Zaloguj się

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

CSS Grid to najnowsza metoda pozycjonowania elementów natywna dla CSSa - a niektórzy twierdzą, że jest to następca dla CSS Flexbox. Być może mają racje, ponieważ w porównaniu do Flexboxa, Grid ma o wiele większe możliwości i spójniejszą składnię. Dodatkowo idealnie wpasowuje się w ideę Progressive Enhancement, czyli stopniowego dostarczania coraz to lepszych doświadczeń użytkownikom, w zależności od używanego przez nich urządzenia. CSS grid to potężne narzędzie które pozwoli Ci stworzyć responsywne layouty - nawet bez użycia media queries.

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

    Wprowadzenie

    Podgląd lekcji

    2min

    Narzędzia developerskie

    Podgląd lekcji

    2min

    Model pracy z Gridem

    Podgląd lekcji

    3min

  • Poznajemy składnie CSS Grid

    1h 19min

    Kolumny i wiersze

    Podgląd lekcji

    6min

    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

Bio
Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :) Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer. Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript! Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać! https://koduje.pl
Inne kursy tego autora
Docker Nuxt.js CSS Accessibility CSS Grid

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

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

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