In 20 Minuten baust du mit HTML und CSS deine erste Website – eine animierte Visitenkarte mit Profilfoto, Name und E-Mail-Button. Du brauchst dafür nichts herunterzuladen, sondern öffnest einfach CodePen im Browser und fängst sofort an. So lernst du am schnellsten, wie HTML und CSS wirklich funktionieren.
Was du in 20 Minuten baust
Du erstellst eine Visitenkarte: Ein rundes Profilfoto mit blauem Rahmen, dein Name als Überschrift, zwei kurze Textzeilen und ein Button, über den man dir direkt eine E-Mail schicken kann. Dazu kommen Animationen. Wenn jemand mit der Maus über die Karte fährt, hebt sie sich leicht nach oben und der Schatten wird dunkler. Das sieht deutlich professioneller aus als es klingt.
Das Tool dafür heißt CodePen. Einfach im Browser öffnen, auf “Start coding” klicken und sofort loslegen. Kein Download, keine Registrierung.
HTML: So legst du den Inhalt fest
HTML legt den Inhalt fest. Was soll auf der Seite stehen? Welche Bilder sollen angezeigt werden?
In HTML arbeitest du mit sogenannten Tags. Ein Tag ist in spitze Klammern eingeschlossen. Für eine Überschrift nimmst du <h1>. Für einen Textabsatz <p> (von “Paragraph”). Für einen Link <a> mit dem Attribut href, das die Zieladresse enthält. Für ein Bild <img> mit dem Attribut src für die Bildquelle.
Mit mailto: vor der E-Mail-Adresse im href-Attribut öffnet sich beim Klick direkt das E-Mail-Programm des Nutzers. Kein kompliziertes Kontaktformular nötig.
Alle diese Elemente packst du in ein <div>. Das ist ein Container ohne eigenes Aussehen, der nur dazu dient, die Elemente zu gruppieren. Warum? Damit du im CSS die Karte als Ganzes stylen kannst statt jedes Element einzeln.
Die fertige HTML-Struktur sieht so aus:
<div>(Container)<img>(Profilfoto)<h1>(Name)<p>(erste Textzeile)<p>(zweite Textzeile)<a href="mailto:...">(Kontakt-Button)
Alle HTML-Elemente sind auf MDN Web Docs vollständig dokumentiert, falls du tiefer einsteigen möchtest.
CSS: So gestaltest du das Aussehen
CSS ist für das Aussehen zuständig. Farben, Abstände, Schriftgrößen. Alles, was man sieht ohne zu lesen.
Du wählst zuerst einen Selektor. Das ist das Element, das du ansprechen möchtest. Dann öffnest du geschweifte Klammern und schreibst deine Eigenschaften rein.
Für den body setzt du einen Hintergrund und zentrierst den Inhalt mit Flexbox: display: flex, justify-content: center, align-items: center, height: 100vh. Für die Karte (div) kommen ein weißer Hintergrund, Innenabstand (padding), abgerundete Ecken (border-radius: 20px) und ein Schatten (box-shadow) dazu.
Das Bild bekommt feste Maße von 120x120 Pixel, wird mit border-radius: 50% zum Kreis und erhält einen blauen Rahmen: border: 4px solid #007BFF.
Den Link stylen wir zum Button: blauer Hintergrund, weiße Textfarbe, Padding, abgerundete Ecken. Der Unterstrich verschwindet mit text-decoration: none.
Hover-Effekte: So bekommt die Karte Leben
Mit der CSS-Pseudo-Klasse :hover legst du fest, was passiert, wenn jemand mit der Maus über ein Element fährt.
Für den Button: Hintergrundfarbe leicht abdunkeln. Für die Karte: transform: translateY(-5px) hebt sie 5 Pixel nach oben, der Schatten wird größer und dunkler. Damit der Übergang fließend wirkt und nicht abrupt, reicht eine Zeile: transition: all 0.3s ease. Das sorgt dafür, dass die Veränderung sanft über 0,3 Sekunden abläuft.
Wenn du merkst, dass dir das Thema Spaß macht, schau dir den Frontend Fundamentals Kurs an. Dort lernst du, warum diese Eigenschaften so funktionieren wie sie funktionieren und wie du sie eigenständig auf neue Projekte anwenden kannst.
Häufige Fragen
Brauche ich dafür einen Editor oder spezielle Software?
Nein. Für den Einstieg reicht CodePen vollkommen aus. Du öffnest die Seite im Browser, klickst auf “Start coding” und siehst sofort, was dein Code bewirkt. Kein Download, keine Installation.
Was ist der Unterschied zwischen HTML und CSS?
HTML legt fest, was auf der Seite steht. Texte, Bilder, Links. CSS legt fest, wie es aussieht. Farben, Abstände, Schriftarten, Animationen. Beide Sprachen arbeiten zusammen, haben aber komplett unterschiedliche Aufgaben.
Kann ich damit auch eine echte Website bauen, die online ist?
Mit reinem HTML und CSS kannst du statische Seiten bauen. Für eine vollständige Website brauchst du außerdem Hosting und je nach Anforderung auch JavaScript. Wer das professionell und strukturiert lernen möchte, kann das über einen geförderten Kurs mit Bildungsgutschein tun, der von Jobcenter und Agentur für Arbeit finanziert werden kann.