Miniuppgift: designa om profilsidan

Mål

Efter uppgiften ska du kunna...

• koppla och använda en extern CSS-fil
• skapa ett enkelt, konsekvent visuellt uttryck
• använda boxmodellen och selektorer kontrollerat
• motivera val av färg, font och avstånd

Uppgift

Förbättra sidan du redan har

Utgå från profilsidan från modul 1.

Bygg inte en ny sida från början.

Målet är bättre läsbarhet och ett mer genomtänkt utseende.

Extern CSS

Struktur och utseende i olika filer

profil-sida/
  index.html
  styles.css
  images/

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

Krav · grundstil

body ska styra helheten

• Font stack
• Rimlig line-height
• Läsbar textfärg
• Bakgrundsfärg med tydlig kontrast
• Borttagen standardmarginal

Krav · innehåll

Kontrollera bredd och luft

• Huvudinnehållet har en maxbredd.
• Innehållet centreras med automatisk sidmarginal.
• Padding skapar luft inuti huvudytan.
• Texten får inte kännas trång eller få för långa rader.

Krav · detaljer

Bilder, klasser och länkar

• Bilder blir aldrig bredare än sin behållare.
• Minst två meningsfulla klasser används.
• Länkar har ett tydligt hover-läge.
• Länkar har en synlig fokusmarkering.
• HTML och CSS valideras.

Startkod · del 1 av 3

Boxmodell och body

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  color: #f3f7f7;
  background: #0f1417;
}

Startkod · del 2 av 3

Huvudinnehållet

main {
  max-width: 70ch;
  margin: 0 auto;
  padding: 2rem;
}

• max-width begränsar radlängden.
• margin: 0 auto centrerar ytan.
• padding skapar inre luft.

Startkod · del 3 av 3

Responsiva bilder

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

Bilden kan skalas ned till behållarens bredd och behåller sina proportioner.

Meningsfulla klasser

Beskriv roll – inte utseende

Namnet ska fortfarande passa om designen ändras.

Hover och focus

Länken ska ge återkoppling

a:hover {
  text-decoration-thickness: 3px;
}

a:focus {
  outline: 3px solid #5eead4;
  outline-offset: 3px;
}

Interaktivt exempel

Jämför före och efter

Vad förändrades?

CSS-valen har ett syfte

• Maxbredd ger kortare textrader.
• Line-height ger luft mellan raderna.
• Kontrast gör text och länkar tydliga.
• Padding skiljer innehållet från kanterna.
• Klasser skapar återanvändbara detaljer.

Kontrollera · läsbarhet

Testa som användare

1. Kan sidan läsas utan att texten känns trång?
2. Syns länkar tydligt?
3. Syns fokus när du använder Tab?
4. Kan du förklara färg- och fontvalen?

Kontrollera · teknik

Testa sidan

1. Gör webbläsarfönstret smalt.
2. Kontrollera att bilden inte spräcker layouten.
3. Kontrollera att klassnamnen är begripliga.
4. Validera HTML.
5. Validera eller kontrollera CSS.

Exit ticket

Vilken regel gjorde störst skillnad?

Välj en CSS-regel som förbättrade sidans läsbarhet.

Skriv vad regeln gör och varför resultatet blev bättre.

Sammanfattning

Klart när designen går att förklara

• CSS ligger i en extern fil.
• Text, färger och avstånd är läsbara.
• Huvudinnehållet har kontrollerad bredd.
• Bilder anpassar sig till behållaren.
• Klasser, hover och focus används meningsfullt.