Mit diesem praktischen Projekt lernst du HTML, CSS und JavaScript direkt am echten Beispiel: Du baust eine interaktive Valentinstagskarte, bei der ein verschwindender Nein-Button dein Date zum Lachen bringt. So verstehst du live, wie Struktur, Design und Logik zusammenarbeiten.
Was du in diesem Projekt lernst
Mit HTML, CSS und JavaScript baust du eine kleine Webseite, die eine Date-Anfrage stellt. Der Ja-Button führt zu einer Erfolgsseite, der Nein-Button springt bei jedem Hover-Versuch weg. So kommt dein Date gar nicht erst in Versuchung, abzulehnen. Gleichzeitig lernst du dabei die drei Grundpfeiler der Webentwicklung kennen: Struktur, Aussehen und Logik.
Das brauchst du zum Starten
Eigentlich fast nichts. Lade dir Visual Studio Code herunter, das ist ein kostenloser Code-Editor, der auf Mac und Windows läuft. Dann erstellst du einen neuen Ordner, öffnest ihn in VS Code und legst eine Datei namens index.html an.
Tipp: Wenn du in VS Code einfach ! eingibst und Tab drückst, generiert dir der Editor automatisch das HTML-Grundgerüst. Das spart dir das Eintippen von Doctype, Head und Body von Hand.
Die HTML-Struktur der Karte
Das HTML ist überschaubar. Du brauchst:
- Ein äußeres
<div id="card">als Container für die gesamte Karte - Ein
<div id="frage">mit einer<h1>, in der deine Frage steht - Zwei Buttons mit den IDs
yesundno - Ein zweites
<div id="erfolg">, das zunächst unsichtbar ist und nach dem Klick auf Ja erscheint
Den Erfolgs-Div blendest du direkt im HTML-Attribut aus: style="display: none". Das ist hier pragmatisch, weil JavaScript diesen Wert später sowieso überschreibt.
Mit CSS kommt das Aussehen rein
Im <style>-Tag im Head steht das gesamte Styling. Wichtige Stellen:
Body: Hintergrundfarbe setzen, display: flex, align-items: center, justify-content: center und height: 100vh. Damit landet die Karte exakt in der Bildschirmmitte.
Card: Weißer Hintergrund, padding: 30px, border-radius: 20px, feste Breite und Höhe (z.B. 300 x 350 Pixel). Außerdem position: relative — das ist wichtig, damit der Nein-Button sich später relativ zu dieser Card bewegen kann.
Buttons: Einheitliche Basisstyles für beide (Größe, border: none, border-radius, font-weight: bold, cursor: pointer), dann getrennte Hintergrundfarben für #yes und #no.
Nein-Button zusätzlich: position: absolute und transition: 0.2s. Die Transition sorgt dafür, dass der Button sanft durch die Gegend gleitet, statt abrupt zu springen.
JavaScript: Logik für beide Buttons
Am Ende des Body kommt ein <script>-Tag mit zwei Funktionen.
Funktion sieg() für den Ja-Button: Holt per document.getElementById('frage') das Frage-Div und setzt style.display = 'none'. Dann holt sie document.getElementById('erfolg') und setzt style.display = 'block'. Das wars.