
Jak uczyć się CSS-a podczas budowania wieży z dziećmi
„Mamo, pomożesz mi zbudować zamek?”
Patrzę na stos klocków Lego, potem na ekran z kodem CSS, który nie chce się ułożyć.
I nagle olśnienie: a co jeśli potraktuję CSS jak klocki? Zatem można wykorzystać zabawę klockami do zrozumienia zasad położenia elementów w layoutcie. Genialne!
Bez względu na to czego chcesz się pouczyć z CSS-a – koniecznie zajrzyj na strionę : CSS-Tricks, krótko mówiąc to skarbnica ciekawej wiedzy dotyczącej właśnie CSS.
Flexbox = układanie klocków w rzędzie
Nawiasem mówiąc o Flexbox przeczytasz w artykule pod tym linkiem.
Tak czy inaczej przechodzimy do sedna:
Z dzieckiem: „Ułóżmy wszystkie czerwone klocki w jednym rzędzie, jeden za drugim.”
W CSS:
.container {
display: flex;
flex-direction: row;
}
Co dziecko widzi: Klocki ustawione w linii
Co ja widzę: Flex items w kontenerze
Position = gdzie postawić wieżę
W rzeczywistości „position” jest proste jak już się go zrozumie. Z pewnością chcesz o nim więcej poczytać, w związku z tym podaję link do opisu tej właściwości – link.
Z dzieckiem: „Gdzie chcesz postawić wieżę? Na środku stołu? W rogu? A może przykleić do ściany?”
W CSS:
position: static
= „postaw gdzie normalnie stoi”position: relative
= „przesuń trochę w bok”position: absolute
= „postaw dokładnie tam, gdzie pokażę”
Grid = plansza do gry
Coś więcej o GRID? Proszę bardzo o tutaj jest link.
I dodatkowo dorzucam girkę, dzięki, której łatwo „załapać” o co chodzi z tym grid-em. Tutaj kliknij.
Z dzieckiem: Biorę kartkę, rysuję kratki: „W każdej kratce postawimy jeden element zamku.”
W CSS:
.castle {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Dziecko: „Aha, jak szachownica!”
Ja: „Dokładnie!”
Margin i padding = miejsce wokół klocka
Wobec tego dodaję też coś o marginach i paddingach.
Z dzieckiem: „Widzisz, ten klocek ma dużo miejsca dookoła, a ten jest ściśnięty z innymi.”
W CSS:
margin
= miejsce na zewnątrz klockapadding
= miejsce wewnątrz klocka
Pokazuję palcem: „To jest brzeg klocka, a to jest jego wnętrze.”
Co się dzieje w praktyce?
15:30 – Dziecko pyta o pomoc z klockami
15:35 – Budujemy razem, a ja tłumaczę CSS
15:50 – Dziecko ma zamek, ja rozumiem flexbox
16:00 – Wracam do kodu z nowymi pomysłami
Nieoczekiwane korzyści:
Dla mnie:
- CSS staje się prostszy (jeśli 4-latek rozumie, to znaczy, że dobrze tłumaczę)
- Przerwa od ekranu
- Czas z dzieckiem bez wyrzutów sumienia
Dla dziecka:
- Mama ma czas
- Nowe słowa (kontener, element, pozycja)
- Logiczne myślenie
Kiedy to NIE działa:
- Gdy dziecko chce tylko budować, a nie słuchać
- Przy skomplikowanych konceptach (animacje, transformacje)
- Gdy jestem pod presją czasu
Inne pomysły na naukę z dziećmi:
JavaScript funkcje = przepisy na ciastka („weź jajko, dodaj mąkę, zwróć ciasto”)
HTML struktura = szkielet lalki („głowa, ręce, nogi – wszystko na swoim miejscu”)
Bazy danych = segregowanie zabawek do pudełek
Prawda:
Nie zawsze się chce. Czasem potrzebuję ciszy. Ale gdy się uda, to magiczne chwile – dziecko się bawi, a ja się uczę.
I wiesz co? Mój CSS od tego czasu jest czytelniejszy. Bo jeśli potrafię wytłumaczyć coś dziecku, znaczy, że naprawdę to rozumiem.
Czas: 15-30 minut
Koszt: 0 złotych (klocki już mamy)
Efekt: Lepsze zrozumienie CSS + szczęśliwe dziecko
Win-win, jak mawiają programiści.