kodowanie

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 klocka
  • padding = 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.

Zapisz się na mój newsletter

Pobierz darmowy
„Przewodnik programowania dla mam

Blogująca mama dwóch chłopców. Ciągle ucząca się i poszukująca pomysłu na siebie. Obecnie pogłębiająca tajniki programowania.

Leave a comment

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *