Nivå 1: Enkel ( ca 5-7 år)
Här fokuserar vi på något väldigt grundläggande där barnen kan ändra textfärger och storlekar. Det är lätt att förstå, och de kan snabbt se hur ändringarna påverkar sidan.
Steg 1. Klistra in HTML koden i HTML rutan i CodePen
<html lang=“sv”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Min färgglada webbsida. Här kan du välja att ändra text.</title>
<link rel=“stylesheet” href=“style.css”>
</head> <body>
<h1>Hej, kul att du hittat hit!</h1>
<p>Ändra färgerna (eller kanske texten här?) och se vad som händer!</p>
</body> </html>
Steg 2. Gör detsamma med CSS koden nedan
body {
background-color: lightblue; /* Ändra bakgrundsfärgen */
text-align: center; /* Centrera all text på sidan */
}
/* Stilar för rubriker */
h1 {
color: red; /* Ändra rubrikfärgen */
font-size: 40px; /* Ändra storlek på rubriktexten */
}
/* Stilar för stycken (p) */
p {
color: green; /* Ändra färg på texten */
font-size: 20px; /* Ändra textstorlek */
}
Vad barnen kan göra:
Ändra färger på bakgrund och text genom att byta namn på färgerna (t.ex. från “red” till “blue”). Här är några färgförslag som du kan testa:
- Lightpink – Ljusrosa
- Lightgreen – Ljusgrön
- Yellow – Gul
- Lightyellow – Ljusgul
- Orange – Orange
- Justera textstorlekar (font-size) för att göra texten större eller mindre.
Lycka till!