Kap 4.5 - Miniuppgift: responsiv startsida

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.

Planera sidans delar

Innan du kodar kan du skriva en enkel lista över sidans struktur. Du behöver inte göra en avancerad ritning.

Sidhuvud
  Rubrik eller namn
  Navigation

Huvudinnehåll
  Hero-sektion med introduktion och bild
  Kortsektion med minst tre kort

Sidfot
  Kontakt eller avslutande information

Startförslag

Skapa en egen projektmapp med följande struktur:

responsiv-startsida/
├── index.html
├── styles.css
└── images/

Kontrollera att index.html innehåller viewport-raden och länken till CSS-filen. En enkel CSS-grund kan se ut så här:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

Två sätt att göra korten responsiva

Grid kan anpassa antalet kolumner automatiskt:

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

Du kan också börja med en kolumn och ändra antalet i en media query:

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 44rem) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

Du behöver inte använda media queryn på just korten. Den kan i stället ändra navigationen eller hero-sektionen.

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.

Hundklubben

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?