Ucz się CSS — Nauka CSS poprzez ćwiczenia z edytorem HTML i CSS na żywo w telefonie

Za większość problemów początkujących z układami odpowiadają trzy kwestie. Model pudełkowy: padding i obramowania domyślnie zwiększają zadeklarowaną szerokość elementu, więc pudełko staje się szersze niż wpisana przez Ciebie wartość. Specyficzność: bardziej szczegółowa reguła w innym miejscu po cichu nadpisuje Twoją. I niewłaściwe narzędzie układu: próba zbudowania dwuwymiarowej strony za pomocą flexboxa, który został stworzony z myślą o jednym wierszu. Ucz się CSS układa kursy tak, aby te trzy kwestie zostały zrozumiane w tej kolejności, zamiast odkrywania ich metodą prób i błędów.

Trochę — możesz uczyć się go równolegle z lekcjami, zamiast kończyć naukę HTML wcześniej. CSS opisuje sposób prezentacji elementów HTML, więc podstawowa wiedza o tym, że strona składa się z elementów — nagłówków, akapitów, list i obrazów — wystarczy na początek. Edytor na żywo w aplikacji pokazuje jednocześnie HTML i CSS, dzięki czemu od pierwszej lekcji widać zależność między nimi.

Flexbox układa elementy w jednej linii — na przykład wiersz przycisków lub pasek nawigacji — i rozdziela wolne miejsce wzdłuż jednej osi. Grid definiuje jednocześnie wiersze i kolumny, więc umieszczasz elementy w rzeczywistej dwuwymiarowej siatce, zamiast przesuwać je za pomocą marginesów. Układ całej strony zazwyczaj tworzy się za pomocą grida, a pojedynczy wiersz kontrolek wewnątrz niego — za pomocą flexboxa. Kurs uczy obu rozwiązań, zanim pozostawi Ci wybór.

CSS rozstrzyga sprzeczne reguły najpierw na podstawie specyficzności, a dopiero potem kolejności w kodzie. Selektor ID wygrywa z selektorem klasy, a klasa z prostym selektorem elementu — niezależnie od tego, która reguła znajduje się niżej w arkuszu stylów. Dlatego reguła, która wygląda poprawnie, może przegrać z inną, o której istnieniu zapomniałeś(-aś). Kurs Specificity & Cascade w aplikacji powstał właśnie po to, aby ta kolejność była przewidywalna, a nie tajemnicza.

Tak, nadal warto uczyć się go bezpośrednio. Frameworki narzędziowe, takie jak Tailwind, są warstwą opartą na koncepcjach CSS, a nie ich zamiennikiem — gdy klasa narzędziowa nie działa zgodnie z oczekiwaniami, zrozumienie modelu pudełkowego, specyficzności i leżących u podstaw systemów układu pozwala rozwiązać problem. CSS to także jedna z najszybszych umiejętności, w których widać rezultaty, ponieważ każda zmiana od razu pojawia się na stronie.

Najważniejsza jest regularność, a nie łączna liczba godzin. Przy krótkich codziennych lekcjach większość początkujących może w ciągu kilku tygodni pewnie posługiwać się selektorami, odstępami, typografią oraz podstawami układów flexbox lub grid — na długo przed trudniejszymi zagadnieniami, takimi jak nietypowe przypadki specyficzności czy container queries. 20 prowadzonych projektów w aplikacji służy właśnie do ćwiczenia tego etapu — po jednej prawdziwej stronie naraz.

Aplikację można bezpłatnie pobrać z App Store i Google Play. Pierwszy kurs, pierwszy prowadzony projekt, dwie misje wyszukiwania błędów i edytor na żywo są bezpłatne, podobnie jak dzienny limit AI Mentor. Pro odblokowuje wszystkie kursy, wszystkie 20 projektów i 20 misji, egzamin certyfikatowy oraz nielimitowane korzystanie z AI Mentor, a także usuwa reklamy.

Ucz się CSS jest dostępne na iPhone i iPad w App Store oraz na Androidzie w Google Play. Interfejs jest dostępny w 22 językach, a aplikacja ma oznaczenie wiekowe 4+. To rozwiązanie dla zupełnie początkujących, projektantów chcących samodzielnie stylować własne strony oraz osób zmieniających ścieżkę kariery lub studiujących i przygotowujących się do rozmów rekrutacyjnych na stanowiska front-end.

Natychmiastowy podgląd wymaga połączenia, aby wyrenderować HTML i CSS — aplikacja informuje o tym wprost, zamiast po cichu ograniczać działanie. Tekst lekcji i materiały do czytania są przygotowane tak, aby nadal działać przy niestabilnym połączeniu, co sprawdza się podczas większości dojazdów. Edytor nie zapewnia jednak w pełni offline'owej sesji z podglądem na żywo.

Ucz się CSS działa na iOS za pośrednictwem App Store oraz na Androidzie za pośrednictwem Google Play, a aplikacja jest dostępna w 22 językach. Ma oznaczenie 4+. Po zdaniu egzaminu końcowego aplikacja wystawia certyfikat ukończenia — potwierdzenie wykonanej pracy, przydatne w CV obok prowadzonych projektów, o których możesz opowiedzieć, ale niebędące akredytowanym dokumentem kwalifikacyjnym.