Prov: Flexbox-layout

Uppdraget

Du får två bilder av en och samma webbplats, en i desktop-format (16:9) och en i mobilformat (9:16), samt en färdig HTML-struktur. Din uppgift är att skriva CSS:en som återskapar layouten exakt utifrån bilderna. Det här är först och främst ett CSS- och flexboxprov: du får ändra i HTML:en om du vill, men det krävs inte.

Layouten innehåller: en navigering, en stor välkomstsektion högst upp (en så kallad hero, som du layoutar med flexbox och centrerad text), tre kort sida vid sida och en footer.

Under provet gäller:

• Du får använda allt övningsmaterial: kursens delar, Receptsamlingen, dina egna anteckningar och tutorials.md från laborationen.
• Ingen AI: inga chattbottar och ingen AI-autocomplete. Provet mäter vad du kan, inte vad du kan fråga fram.
• Inga ramverk eller bibliotek: ren HTML och CSS.

Tekniska krav

• Struktur: startfilens landmärken (<header>, <nav>, <main>, <footer>) ska finnas kvar på rätt ställen, även om du ändrar annat.
• Flexbox: Navigering, hero och kortrad ska layoutas med Flexbox.
• Responsivitet: Sidan ska se korrekt ut i både desktop- och mobilvy (DevTools).
• Enheter: Använd rem för typografi och spacing, inte px.
• Typsnitt: Byt ut webbläsarens standardtypsnitt mot ett systemtypsnitt som passar layouten.

Kvalitetssäkring

Genomför dessa steg innan du lämnar in:

1. W3C Validator: validator.nu, inga röda fel.
2. WAVE: Kör WAVE-tillägget, inga röda “Errors”. Kontrollera att dina landmärken syns i panelen.