Miniuppgift: responsiv startsida

Mål

Du ska visa att du kan...

• planera tydliga sektioner
• använda Flexbox och Grid
• bygga mobile first
• testa och förbättra flera bredder

Uppgift

Välj ett ämne

Bygg en startsida om exempelvis:

• en hobby
• en kurs eller förening
• ett spel
• ett eget projekt

Ämnet är valfritt. Kraven på struktur och responsivitet är inte valfria.

Krav 1

Semantisk HTML

<header>...</header>
<nav>...</nav>
<main>
  <section>...</section>
</main>
<footer>...</footer>

Sidans stora delar ska vara tydliga även utan CSS.

Krav 2

CSS i en extern fil

<link rel="stylesheet" href="style.css">

Krav 3

Navigation i smal och bred layout

nav { flex-direction: column; }
@media (min-width: 44rem) {
  nav { flex-direction: row; }
}

Länkarna ska fortfarande vara läsbara och möjliga att använda.

Krav 4

Använd Flexbox

Flexbox passar exempelvis för:

• navigationen
• en rad med knappar
• innehåll som byter mellan kolumn och rad

Krav 5

Använd Grid

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

Ett kortgalleri är ett tydligt användningsområde.

Krav 6

Responsiva bilder

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

Varje innehållsbärande bild ska också ha en relevant alt-text.

Krav 7

Minst en media query

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

Brytpunkten ska lösa ett problem i innehållet.

Arbetsordning 1

Skissa sektionerna

Arbetsordning 2

Skriv HTML utan CSS

1. Skapa alla semantiska delar.
2. Lägg in rubriker och riktig text.
3. Lägg in länkar och bilder.
4. Kontrollera att ordningen är logisk.

Arbetsordning 3

Lägg till grundstilen

• Font och läsbara textfärger
• Bakgrundsfärger
• Radlängd och line-height
• Avstånd med rem

Gör inte layouten avancerad ännu.

Arbetsordning 4

Bygg mobilversionen först

• En kolumn är grundläget.
• Menyn kan ligga i kolumn.
• Bilder får inte bli bredare än sidan.
• Ingen horisontell scroll ska behövas.

Arbetsordning 5

Lägg till layouttekniker

Arbetsordning 6

Lägg till större layout

@media (min-width: 44rem) {
  header { display: flex; }
  nav { flex-direction: row; }
  .hero { grid-template-columns: 1fr 1fr; }
}

Ändra bara det som behöver en annan form.

Simulerat exempel

Startsidan i olika bredder

Viewport: 480pxBrytpunkt: 704px

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.

Vad exemplet visar

Koppla krav till lösning

Testa tre bredder

Smalt, mellanbrett och brett

Självkontroll

Innan du lämnar in

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

Vanliga problem

Om något går sönder

• Leta efter fasta bredder i px.
• Kontrollera bilders max-width.
• Tillåt Grid- eller Flex-items att brytas.
• Flytta brytpunkten dit innehållet faktiskt behöver den.

Starta nu

Första konkreta steget

1. Skapa en ny projektmapp.
2. Öppna bara den mappen i VS Code.
3. Skapa index.html och style.css.
4. Välj ämne och skriv sidans fem huvuddelar.

Sammanfattning

Uppgiften kombinerar Modul 1–4

• Semantisk HTML ger struktur.
• Extern CSS ger utseende.
• Flexbox och Grid skapar layout.
• Responsiva bilder skyddar sidan.
• Media queries ändrar layout när innehållet behöver det.