← HTML + CSS

HTML + CSS: Projekt-Ideen

Fünf kleine Projekte zum Selbermachen. Jedes hat ein Ziel, Schritte und eine Erweiterung für später. Such dir eins aus und fang an, ohne perfekt zu sein.

1. 1. Persönliche Visitenkarte

   Eine einseitige Webseite über dich.

   Schritte

   1. Semantisches Grundgerüst mit header, main und footer
   2. Bild, Text und Links einfügen
   3. mit CSS Farben, Abstände und Schrift gestalten

   Erweiterung: Dunkler Modus per prefers-color-scheme

2. 2. Responsive Galerie

   Ein Bildraster, das sich an die Bildschirmbreite anpasst.

   Schritte

   1. Bilder mit figure und figcaption einbinden
   2. Raster mit CSS Grid und auto-fit bauen
   3. Hover-Effekt ergänzen

   Erweiterung: Vollbildansicht nur mit CSS (:target)

3. 3. Navigation mit Menü

   Eine Kopfleiste, die auf dem Handy zum Menü wird.

   Schritte

   1. Liste mit Links in nav setzen
   2. mit Flexbox horizontal anordnen
   3. per Media Query für schmale Bildschirme umbauen

   Erweiterung: Aufklappmenü ohne JavaScript mit Checkbox-Trick

4. 4. Preistabelle

   Drei Tarife nebeneinander mit hervorgehobenem Favoriten.

   Schritte

   1. Drei Karten mit Flexbox anordnen
   2. Preis, Liste und Knopf gestalten
   3. mittlere Karte größer und farbig machen

   Erweiterung: Animierter Übergang beim Überfahren

5. 5. Kontaktformular

   Ein zugängliches Formular mit Prüfung.

   Schritte

   1. Felder mit label und passenden type-Werten anlegen
   2. required und pattern für die Browser-Prüfung nutzen
   3. Fehlerzustände mit :invalid gestalten

   Erweiterung: Fortschritt und Hinweise für Screenreader mit aria