Modul 4

Kap 4.5 - Miniuppgift: responsiv startsida

Du bygger en startsida som fungerar på mobil, surfplatta och dator.

Mål

  • Planera en enkel startsida med tydliga sektioner.
  • Använda flexbox för navigation eller kort.
  • Använda grid för en responsiv kortlayout.
  • Testa sidan i flera bredder och förbättra den.

Uppgift

Bygg en responsiv startsida för ett valfritt ämne: en hobby, en kurs, ett spel, en förening eller ett eget projekt. Sidan ska kännas tydlig även innan den är avancerad.

Krav

  • HTML-filen ska använda semantiska element som header, nav, main, section och footer.
  • CSS ska ligga i en extern fil.
  • Navigationen ska fungera på smal och bred skärm.
  • Minst en sektion ska använda flexbox.
  • Minst en sektion ska använda grid.
  • Bilder ska vara responsiva och ha relevant alt-text.
  • Minst en media query ska användas.

Rekommenderad arbetsordning

  1. Skissa vilka sektioner sidan ska ha.
  2. Skriv HTML utan CSS först.
  3. Lägg till grundstil: färg, font, radlängd och avstånd.
  4. Bygg mobilversionen först.
  5. Lägg till grid eller flexbox där innehållet behöver layout.
  6. Skriv media query för större skärm.
  7. Testa i smal, mellanbred och bred viewport.

Självkontroll

  • Går sidan att läsa utan horisontell scroll?
  • Har texten rimlig radlängd?
  • Fungerar menyn med mus och tangentbord?
  • Behåller bilderna sina proportioner?
  • Ser layouten planerad ut, inte bara ihoptryckt?