Kompletna ścieżka nauki CSS od podstaw do projektów.

Dostępne teraz

Lekcja 01: Wprowadzenie do CSS

Poznasz podstawy języka stylów, historię CSS, składnię oraz pierwszy praktyczny przykład.

Przejdź do lekcji

Dostępne teraz

Lekcja 02: Selektory i dziedziczenie

Zrozumiesz, jak precyzyjnie wybierać elementy HTML oraz jak działają dziedziczenie i podstawy kaskady.

Przejdź do lekcji

Dostępne teraz

Lekcja 03: Box model, odstępy i rozmiary elementów

Poznasz pudełkowy model elementu, różnice między margin i padding oraz podstawy kontrolowania rozmiarów komponentów.

Przejdź do lekcji

Dostępne teraz

Lekcja 04: Display i przepływ dokumentu

Zrozumiesz, czym różnią się elementy blokowe, liniowe i inline-block oraz jak domyślny przepływ układa treść na stronie.

Przejdź do lekcji

Dostępne teraz

Lekcja 05: Kolory, tło i podstawy wizualnego stylu

Poznasz formaty kolorów, tła elementów, podstawy kontrastu i proste decyzje wizualne, które poprawiają czytelność interfejsu.

Przejdź do lekcji

Dostępne teraz

Lekcja 06: Typografia, tekst i czytelność

Nauczysz się kontrolować font, rozmiar, grubość, wysokość linii i wyrównanie tekstu tak, aby treść była wygodna do czytania.

Przejdź do lekcji

Dostępne teraz

Lekcja 07: Flexbox: oś główna, oś poprzeczna i kontener

Poznasz kontener flex, oś główną i poprzeczną oraz podstawy wyrównywania elementów przez justify-content , align-items i gap .

Przejdź do lekcji

Dostępne teraz

Lekcja 08: Flexbox w praktyce: nawigacja, karty i układy sekcji

Nauczysz się używać flex-wrap , skrótu flex oraz układów kart, nawigacji i media object w praktycznych komponentach UI.

Przejdź do lekcji

Dostępne teraz

Lekcja 09: CSS Grid: kolumny, wiersze i odstępy

Poznasz display: grid , kolumny, wiersze, gap , jednostkę fr oraz funkcje repeat() i minmax() .

Przejdź do lekcji

Dostępne teraz

Lekcja 10: CSS Grid w praktyce: galerie, dashboardy i układy kart

Nauczysz się budować responsywne galerie i dashboardy z użyciem auto-fit , auto-fill , minmax() oraz rozmieszczania elementów na siatce.

Przejdź do lekcji

Dostępne teraz

Lekcja 11: Pozycjonowanie: relative, absolute, fixed i sticky

Zrozumiesz normalny flow, kontekst pozycjonowania, offsety oraz praktyczne użycie badge’a, elementu fixed i panelu sticky.

Przejdź do lekcji

Dostępne teraz

Lekcja 12: Warstwy i nakładanie: z-index, overlay i kontekst stosu

Nauczysz się kontrolować kolejność warstw, budować overlay i modal oraz diagnozować problemy z kontekstem stosu.

Przejdź do lekcji

Dostępne teraz

Lekcja 13: Responsywność i podejście mobile-first

Nauczysz się projektować od małego ekranu, rozszerzać layout przez min-width i unikać poziomego overflow.

Przejdź do lekcji

Dostępne teraz

Lekcja 14: Media queries i breakpointy

Nauczysz się pisać @media , dobierać breakpointy do treści i ograniczać nadmiar reguł responsywnych.

Przejdź do lekcji

Dostępne teraz

Lekcja 15: Jednostki CSS: px, %, em, rem, vw, vh, svh, ch

Nauczysz się dobierać jednostki do tekstu, odstępów, kontenerów, viewportu i czytelnych bloków treści.

Przejdź do lekcji

Dostępne teraz

Lekcja 16: Obrazy i media responsywne

Nauczysz się zabezpieczać obrazy przed overflow, kontrolować proporcje, kadrowanie i responsywne źródła mediów.

Przejdź do lekcji

Dostępne teraz

Lekcja 17: Fluid typography i funkcje min(), max(), clamp()

Nauczysz się tworzyć płynne rozmiary tekstu i odstępów z bezpiecznymi granicami dla mobile i desktopu.

Przejdź do lekcji

Dostępne teraz

Lekcja 18: Linki, przyciski i stany: hover, focus, active, disabled

Nauczysz się budować dostępne komponenty interaktywne z czytelnymi stanami myszy, klawiatury, kliknięcia i niedostępności.

Przejdź do lekcji

Dostępne teraz

Lekcja 19: Formularze: inputy, labelki, błędy i stany walidacji

Zbudujesz dostępne pola formularza z widocznymi labelkami, opisami, fokusem, komunikatami błędów i stanami niedostępnymi.

Przejdź do lekcji

Dostępne teraz

Lekcja 20: Karty, listy i sekcje treści

Nauczysz się projektować powtarzalne karty, semantyczne listy i responsywne sekcje treści z czytelną hierarchią.

Przejdź do lekcji

Dostępne teraz

Lekcja 21: Nawigacje, breadcrumbsy i paginacja

Zbudujesz semantyczne nawigacje, ścieżki okruszków i paginację z aktywnymi stanami, fokusem oraz responsywnym układem.

Przejdź do lekcji

Dostępne teraz

Lekcja 22: Tabele i dane w CSS

Nauczysz się prezentować dane w tabelach, kontrolować overflow, stosować sticky header i projektować czytelne warianty mobilne.

Przejdź do lekcji

Dostępne teraz

Lekcja 23: Cienie, obramowania, zaokrąglenia i separacja wizualna

Nauczysz się budować hierarchię powierzchni przez ramki, promienie, cienie i spójne tokeny separacji wizualnej.

Przejdź do lekcji

Dostępne teraz

Lekcja 24: Transformacje 2D

Nauczysz się używać translate() , scale() , rotate() , punktu transformacji i bezpiecznej kolejności funkcji.

Przejdź do lekcji

Dostępne teraz

Lekcja 25: Przejścia CSS: transition

Nauczysz się tworzyć płynne zmiany stanów przez transition , timing function, delay i bezpieczne właściwości animowania.

Przejdź do lekcji

Dostępne teraz

Lekcja 26: Animacje CSS: @keyframes

Nauczysz się definiować sekwencje animacji przez @keyframes oraz kontrolować czas, powtórzenia, kierunek i stan końcowy.

Przejdź do lekcji

Dostępne teraz

Lekcja 27: Dostępne animacje i prefers-reduced-motion

Nauczysz się respektować preferencje użytkownika, ograniczać ruch i zachowywać czytelny feedback bez zbędnych animacji.

Przejdź do lekcji

Dostępne teraz

Lekcja 28: Nazewnictwo klas i BEM-like naming

Nauczysz się projektować nazwy klas dla bloków, elementów, modyfikatorów, stanów i utility w większym projekcie CSS.

Przejdź do lekcji

Dostępne teraz

Lekcja 29: Zmienne CSS i design tokens

Nauczysz się centralizować kolory, odstępy, promienie i cienie przez custom properties oraz semantyczne tokeny UI.

Przejdź do lekcji

Dostępne teraz

Lekcja 30: Kaskada, specyficzność i @layer

Nauczysz się kontrolować pierwszeństwo reguł CSS, unikać walki ze specyficznością i porządkować arkusz przez @layer .

Przejdź do lekcji

Dostępne teraz

Lekcja 31: Reset, normalize i style bazowe

Nauczysz się przygotowywać przewidywalny fundament CSS: reset, box-sizing , bazowe style dokumentu, media, linki i formularze.

Przejdź do lekcji

Dostępne teraz

Lekcja 32: Struktura plików CSS i skalowanie arkusza

Nauczysz się organizować style według warstw, folderów, komponentów i utilities tak, aby projekt CSS był łatwiejszy w utrzymaniu.

Przejdź do lekcji

Dostępne teraz

Lekcja 33: Pseudoklasy i pseudoelementy w praktyce

Nauczysz się używać stanów UI, selektorów :is() , :where() , :not() oraz dekoracji przez ::before i ::after .

Przejdź do lekcji

Dostępne teraz

Lekcja 34: Container queries

Nauczysz się budować komponenty reagujące na rozmiar własnego kontenera przez container-type , @container i jednostki cqi .

Przejdź do lekcji

Dostępne teraz

Lekcja 35: Logical properties

Nauczysz się pisać style oparte o osie inline i block , używać margin-inline , padding-block i projektować komponenty gotowe na różne kierunki tekstu.

Przejdź do lekcji

Dostępne teraz

Lekcja 36: CSS nesting i nowoczesna składnia

Nauczysz się bezpiecznie używać natywnego CSS nesting, selektora & , zagnieżdżonych stanów, at-rules i reguł kontroli specyficzności.

Przejdź do lekcji

Dostępne teraz

Lekcja 37: Tryby kolorów, zmienne motywu i dark mode

Nauczysz się budować jasny i ciemny motyw przez color-scheme , prefers-color-scheme , data-theme i semantyczne tokeny CSS.

Przejdź do lekcji

Projekt końcowy

Lekcja 38: Projekt 1: responsywna karta profilu

Połączysz semantyczny HTML, box model, typografię, kolory, Flexbox, Grid, stany interakcji i responsywność w jeden komponent portfolio.

Przejdź do projektu

Projekt końcowy

Lekcja 39: Projekt 2: landing page sekcji hero + karty

Zbudujesz pierwszą sekcję marketingową z jasnym komunikatem, CTA, panelem wizualnym, kartami wartości i responsywnym layoutem.

Przejdź do projektu

Projekt końcowy

Lekcja 40: Projekt 3: panel dashboardu

Zaprojektujesz responsywny panel z metrykami, trendem, listą zadań i aktywnościami, oparty o CSS Grid i czytelną hierarchię danych.

Przejdź do projektu

Projekt końcowy

Lekcja 41: Projekt 4: formularz rejestracji

Zbudujesz dostępny formularz rejestracji z labelkami, fieldset, komunikatami błędów, stanami walidacji i responsywnym układem.

Przejdź do projektu

Projekt końcowy

Lekcja 42: Projekt 5: mini system komponentów CSS

Domkniesz roadmapę, budując mini UI kit z tokenami, przyciskami, kartami, alertami, polami formularza, stanami i dokumentacją użycia.

Przejdź do projektu