Laboration: Flexbox i praktiken

Lådor i lådor

Du har skissat layouter och du har koll på boxmodellen. Nu ska vi göra layouten flytande. Flexbox är branschens verktyg för att arrangera innehåll i rader eller kolumner, en smart föräldralåda som styr hur de mindre barnlådorna inuti fördelar utrymmet.

I det här momentet väljer du själv hur du vill lära dig. Du arbetar igenom guider, dokumenterar din resa och avslutar med ett skarpt praktiskt prov.

Din verktygslåda: Välj din tutorial

Välj minst två källor, gärna ett spel och en interaktiv guide, och arbeta igenom dem.

Spel och gamification

• Flexbox Froggy (Svenska): Klassikern. Rädda grodorna på 30 minuter.
• Flexbox Defense: Tower defense med CSS-positionering.
• Flexbox Zombies: Story-driven träning (kräver gratis konto).

Interaktiva guider och referenser

• Josh W. Comeau: Interactive Guide to Flexbox: Världens bästa visuella förklaring av Flexbox-axlarna.
• CSS-Tricks: A Complete Guide to Flexbox: Branschens fusklapp. Ha den öppen i ett sidfönster när du kodar.
• Kevin Powell (YouTube): Tydliga videogenomgångar av flexbox och CSS. Guld när något inte vill sätta sig.

Pröva i DevTools: Syna dina media queries

Öppna DevTools (F12) och klicka på mobil-ikonen (Toggle device toolbar).

1. Dra i sidans kant för att göra skärmen smalare och bredare.
2. Titta i fliken Styles till höger. När skärmen passerar din brytpunkt (t.ex. 48rem) ser du hur din @media-regel tänds och dina vanliga CSS-regler stryks över.
3. Webbläsaren visar exakt när villkoret uppfylls, ingen gissning.

Uppdraget: Skapa ditt övningsrepo

1. Skapa ett nytt, publikt repo på GitHub och klona ner det lokalt.
2. Gör commits ofta. Vi vill se en commit för varje steg i dina tutorials (t.ex. feat: klar med bana 1-10 i Froggy).
3. Skapa en fil tutorials.md i ditt repo. Skriv en kort, ärlig recension av varje guide du använde:
   • Vad var bra och vad var mindre bra?
   • Vad var din största aha-upplevelse?
   • Vilket betyg (1-5) ger du guiden och varför?