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

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

Simulerat exempel

Exemplet nedan visar en möjlig startsida om en hundklubb. Ändra den simulerade viewportens bredd och brytpunkten. När viewporten når brytpunkten byter navigationen riktning, hero-sektionen får två kolumner och korten läggs i tre kolumner.

Simulerad viewport: 480px

Brytpunkt: 704px

Mobile first-läget används: innehållet ligger i en kolumn.

Träna tillsammans

Kurser och aktiviteter för hundar och människor.

Valpkurs

En trygg start med enkla övningar.

Agility

Träna samarbete, fart och precision.

Promenader

Gemensamma turer varje helg.

@media (min-width: 44rem) {
    /* större layout */
}

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?