Fast jeder Frontend-Anfänger stößt irgendwann an diese Wand.
Die Tutorials verschwimmen langsam vor den Augen. Du weißt, was ein div ist. Du kannst einen Blick auf das Stylesheet von jemand anderem werfen und halbwegs verstehen, was da vor sich geht. Drei Flexbox-Videos? Angeschaut. Aber sobald du eine leere index.html öffnest und der Cursor dich blinkend anstarrt, ist dein Kopf plötzlich wie leer gefegt.
Noch ein Tutorial ist nicht die Lösung. Ein eigenes Projekt ist es.
Etwas Kleines, das man an einem Wochenende fertigstellen kann, mit einem sichtbaren Ergebnis, das man Freunden zeigen kann. HTML und CSS bleiben erst dann wirklich im Kopf hängen, wenn man sie selbst tippt, Code zerschießt und dann versucht, den Fehler wieder zu beheben.
Die HTML- und CSS-Lernpfade gehören zu den aktivsten auf der Coddy-Plattform. Und diejenigen, die lange genug am Ball bleiben, um sich mit Frontend-Code wirklich sicher zu fühlen, tun Folgendes: Sie schließen regelmäßig kleine Projekte ab. Sie warten nicht, bis sie „genug wissen“. Sie bauen einfach etwas, stoßen an Grenzen, schlagen Dinge nach und machen weiter.
Dieser Leitfaden bietet dir 18 HTML- und CSS-Projekte, sortiert nach Schwierigkeitsgrad – von einer einfachen One-Page-Website bis hin zu einem reinen CSS-Karussell. Du musst nicht alle davon bauen. Such dir für dieses Wochenende einfach eines aus und zieh es durch.
Warum Projekte besser sind als noch mehr Tutorials
Code zu lesen fühlt sich produktiv an. Das Problem ist nur: Es ist es nicht.
Selbst nach einem Monat voller YouTube-Videos kann es sein, dass du keine einfache Landingpage auf die Beine stellen kannst. Denn Zuschauen und Selberschreiben beanspruchen völlig unterschiedliche Muskeln. Besonders CSS muss man selbst tippen, damit es im Gedächtnis bleibt, da es oft aus fummeligen kleinen Anpassungen besteht, die man nur durch Ausprobieren und Fehlerlernen wirklich versteht.
Projekte zwingen dich außerdem dazu, Dinge nachzuschlagen! Frontend-Entwicklung besteht zu etwa 30 % aus dem Schreiben von Code und zu 70 % aus dem Durchsuchen von MDN, dem Lesen von Dokumentationen und dem Rätseln, warum ein Element um zwei Pixel verschoben ist. Tutorials blenden all das aus.
Außerdem hast du durch Projekte am Ende etwas Vorzeigbares. Bei dem Satz „Ich lerne gerade HTML und CSS“ kommt selten echte Begeisterung auf. Aber „Ich habe diese Restaurant-Website gebaut, hier ist der Link“ ist etwas, das du stolz an Freunde schicken kannst. Dieses „Das habe ich selbst erschaffen“-Gefühl ist genau das, was einen durch die zähen Wochen trägt.
Die mundgerechten HTML- und CSS-Lektionen von Coddy laufen direkt in deinem Browser – ganz ohne Einrichtung. So kannst du die Grundlagen in Fünf-Minuten-Einheiten üben, bis du die Syntax im Schlaf beherrschst.
Die richtige Einrichtung (überspringen, falls schon erledigt)
Für HTML und CSS brauchst du kein kompliziertes Setup. Nur diese drei Dinge:
- Ein Texteditor. VS Code ist für die meisten der Standard. Er ist kostenlos, und sobald du ein paar Projekte hinter dir hast, gibt es einige nützliche CSS-Erweiterungen, die du installieren kannst.
- Ein Browser. Nimm einfach den, den du ohnehin nutzt. Mit den Entwicklertools (Rechtsklick ->
Untersuchen) behebst du Layout-Probleme. Gewöhne dir diese Arbeitsweise am besten frühzeitig an. - Ein Ordner für jedes Projekt. Für den Anfang reichen eine
index.htmlund einestyle.cssvöllig aus! Mach dir bei deinem allerersten Projekt keine Gedanken über Build-Tools, Frameworks oder „Best Practices“.
Wenn du die Einrichtung lieber überspringen möchtest: Die HTML-Lektionen und CSS-Lektionen von Coddy laufen direkt im Browser, ganz ohne Installation. Das ist besonders praktisch, wenn du ein bestimmtes Konzept üben willst, ohne extra ein neues Projekt anzulegen. Ansonsten reichen ein Ordner und ein Texteditor völlig aus.
HTML- & CSS-Projekte für Anfänger
Diese fünf Projekte nutzen die absoluten Grundlagen: Überschriften, Absätze, Bilder, Listen, Links sowie eine Prise Farbe und Abstände. Nach nur einer Handvoll HTML- und CSS-Lektionen ist jedes dieser Projekte in wenigen Stunden machbar.
1. Tribute-Seite
Wähle eine Person aus, die du bewunderst (eine Musikerin, einen Autor, eine Sportlerin, einen Wissenschaftler) und erstelle eine einseitige Tribute-Seite. Eine große Überschrift, ein Hero-Bild, eine kurze Biografie, ein Lebenslauf als Zeitleiste und eine Liste mit Links für weitere Infos. Das Ganze nutzt Überschriften, Absätze, Bilder, Listen und grundlegendes CSS für Typografie und Abstände. Es ist aus gutem Grund das klassische erste HTML-Projekt: Nichts daran ist wirklich schwer.
2. Persönliche „Über mich“-Seite
Eine einseitige persönliche Website, auf der du dich vorstellst. Ein Foto, eine kurze Biografie, eine Liste deiner Hobbys und Interessen sowie ein Bereich mit Kontaktmöglichkeiten. Bonuspunkte gibt es, wenn du die Seite online stellst. GitHub Pages ist kostenlos und in wenigen Minuten eingerichtet. Schon hast du einen echten Link, den du teilen kannst.
3. Rezeptkarte
Ein Rezept mit einem ansprechenden Bild des Gerichts, einer Zutatenliste, nummerierten Schritten und der Zubereitungszeit in einer kleinen Infobox. Hier lernst du den Unterschied zwischen geordneten und ungeordneten Listen, die Skalierung von Bildern und wie man eine inhaltsreiche Seite übersichtlich statt überladen gestaltet.
4. Kontaktformular-Seite
Eine Seite mit einem Formular: Name, E-Mail, Nachricht und ein Absende-Button. Das Formular muss die Daten noch nirgendwohin senden – das wäre der JavaScript-Teil. Hier geht es rein um HTML-Formularelemente (input, textarea, label, button) und deren Gestaltung, damit sie nicht wie das standardmäßige, altbackene Browser-Design aussehen. Formulare kommen in fast jedem Frontend-Projekt vor, daher zahlt es sich aus, sich frühzeitig damit vertraut zu machen.
5. Einfache Restaurant-Speisekarte
Eine einseitige Speisekarte für ein fiktives Restaurant. Unterteilt in Kategorien (Vorspeisen, Hauptgerichte, Desserts), wobei jedes Gericht einen Namen und eine kurze Beschreibung hat. Füge oben einen Hero-Banner und unten einen kleinen Footer mit den Öffnungszeiten hinzu. Das schult das Strukturieren von Inhalten in Sektionen, das Wiederholen von Layout-Mustern und die Auswahl eines stimmigen Farbschemas.
Fortgeschrittene Projekte (Flexbox, Grid, Layouts)
Hier geht es darum, Elemente richtig anzuordnen, mehrere Sektionen zu jonglieren und am Ende eine Seite zu erstellen, die wie eine echte Website aussieht. Die meisten dieser Projekte stützen sich auf Flexbox oder CSS Grid – genau die Fähigkeiten, die du jetzt trainieren solltest.
6. Landingpage für ein fiktives Produkt
Wähle ein Produkt (eine App, ein SaaS-Tool, eine Kerzenmanufaktur oder was auch immer) und baue eine typische Landingpage dafür. Ein Hero-Bereich mit einer Überschrift und einem Call-to-Action-Button (CTA). Darunter ein Bereich mit drei Haupt-Features. Kundenbewertungen (Testimonials). Ein Footer mit Links. Das Ganze ist ein hervorragendes Training für Flexbox und Grid sowie eine Lektion in Sachen Abstände und visuelle Hierarchie.
7. Portfolio-Website
Eine mehrteilige Seite, auf der du deine Arbeiten präsentierst – selbst wenn deine „Arbeit“ im Moment nur aus zwei Tribute-Seiten und einer Rezeptkarte besteht. Ein Header mit Navigation, ein Hero-Bereich, ein Projekt-Grid, ein „Über mich“-Bereich und ein Kontaktbereich. Nutze Grid für das Projekt-Layout und Flexbox für die Navigation und den Hero-Bereich.
Dieses Projekt ist auch dann nützlich, wenn du glaubst, noch kein Portfolio zu brauchen. Sobald du dich für Jobs bewirbst oder als Freelancer startest, hast du direkt etwas vorzuweisen.
8. Preistabelle
Drei Preisstufen nebeneinander angeordnet, jeweils in einer eigenen Karte mit Name, Feature-Liste und CTA-Button. Hebe die mittlere Option als „Beliebteste Wahl“ optisch hervor. Preistabellen sehen einfach aus, sind aber überraschend knifflig: Karten mit gleicher Höhe, ausgerichtete Aufzählungspunkte, Hover-Effekte auf Buttons. Ein großartiges Flexbox-Training.
9. Blog-Startseite
Eine Blog-Übersichtsseite: Header mit Navigation und Suche, ein hervorgehobener Artikel ganz oben, darunter ein Grid mit den neuesten Beiträgen, eine Sidebar mit Kategorien und aktuellen Kommentaren sowie ein Footer ganz unten. Hier lernst du, wie man ein Content-Layout mit verschiedenen Bereichen strukturiert – das kommt der echten Frontend-Praxis schon sehr nahe.
In den praxisorientierten CSS-Lektionen von Coddy schreibst du echten Layout-Code. Und Bugsy, dein KI-Assistent, erklärt dir direkt, warum sich dein Element nicht zentrieren lässt, anstatt dich mit dem nächsten Stack-Overflow-Tab allein zu lassen.
10. Login- und Registrierungsseite
Zwei zusammenhängende Seiten – Login auf der einen, Registrierung auf der anderen – mit einem zentrierten Formular, einem gebrandeten Header und Links zum Wechseln zwischen den Seiten. Die Herausforderung besteht darin, das Design professionell und sauber wirken zu lassen, ohne es zu überladen. Die besten Login-Seiten sind perfekt ausgerichtet und wirken dezent elegant. Eine unterschätzte Übung für gutes Designgespür.
11. Dashboard-Mockup
Ein statisches Dashboard-Layout: Eine Sidebar-Navigation links, eine obere Leiste mit Benutzerinfos, ein Hauptbereich mit einigen Statistik-Karten, ein Platzhalter für ein Diagramm und eine Liste der letzten Aktivitäten. Noch ohne Interaktivität – das ist ein reines Layout-Projekt. Grid übernimmt hier die meiste Arbeit. Am Ende wirst du verstehen, warum es CSS Grid gibt und warum Leute, die es noch nie ausprobiert haben, sich ständig über Layouts beschweren.
CSS-Animationen & Effekte
Jetzt kommen wir zum spaßigen Teil. Kleinere Projekte, dafür mit mehr Fokus auf CSS. Perfekt, um Transitions, Keyframes, Transforms und Pseudoklassen wie :hover und :focus zu verinnerlichen.
12. Lade-Spinner
Ein reiner CSS-Lade-Spinner. Probiere verschiedene Varianten aus: einen rotierenden Ring, drei hüpfende Punkte, einen pulsierenden Kreis oder einen Ladebalken, der sich immer wieder füllt. Jede Variante benötigt nur etwa 15 Zeilen CSS und bringt dir @keyframes, animation und transform näher.
13. Bildergalerie mit Hover-Effekten
Ein Grid aus Fotos, bei denen beim Darüberfahren (Hover) eine Bildunterschrift mit einem flüssigen Übergang erscheint. Experimentiere mit verschiedenen Effekten: ein hereinrutschendes Overlay, ein Zoom-Effekt auf das Bild oder ein Farbfilter, der ausblendet. Das ist das Projekt, bei dem es bei den meisten in Sachen transition Klick macht. Zudem lernst du, wie man Elemente mit position: absolute übereinanderlegt.
14. Animierte Navigationsleiste
Eine Navigationsleiste mit einem Logo links und Menüpunkten rechts. Beim Hovern unterstreichen sich die Menüpunkte mit einer gleitenden Animation selbst, und die aktive Seite bleibt unterstrichen. Auf Mobilgeräten klappt das Menü zu einem Hamburger-Icon zusammen, das ein Dropdown-Menü öffnet. Ein Muster, das du immer wieder brauchen wirst: animierte Zustände bei interaktiven Elementen und responsives Verhalten für verschiedene Bildschirmgrößen.
15. CSS-Karten-Flip
Eine Karte, die sich beim Hovern umdreht, um auf der Rückseite etwas zu enthüllen (ein Zitat, eine Definition oder ein zusätzliches Detail). Nutzt transform: rotateY and backface-visibility – zwei CSS-Eigenschaften, die man zwar selten braucht, die sich beim ersten Mal aber wie Magie anfühlen. Ein schnelles Projekt mit großem Aha-Erlebnis.
16. Reiner CSS-Bilderslider
Ein horizontal scrollendes Bilderkarussell mit Vor- und Zurück-Buttons, komplett in CSS gebaut. Ohne JavaScript. Der Trick dabei nutzt unsichtbare Radio-Buttons und den :checked-Selektor, um zu steuern, welches Bild gerade sichtbar ist. Ein cleveres Pattern, das zeigt, wie viel man allein mit CSS erreichen kann, bevor man zu JS greift. Es lohnt sich, das einmal gemacht zu haben, selbst wenn man es normalerweise mit JavaScript bauen würde.
HTML- & CSS-Projekte für Fortgeschrittene
Diese letzten Projekte sind für dich gedacht, wenn die Grundlagen bereits sitzen und du eine echte Herausforderung suchst. Immer noch reines HTML und CSS (kein JavaScript nötig), aber sie werden dein Layout-Verständnis, deine Präzision und deine Geduld auf die Probe stellen.
17. Klonen einer bekannten Homepage
Wähle eine echte Website (die Netflix-Startseite, die Spotify-Landingpage oder die Apple-Produktseite eines bestimmten Geräts) und baue den sichtbaren Teil so detailgetreu wie möglich mit HTML und CSS nach. Es muss nicht funktional sein – konzentriere dich ganz darauf, Layout, Typografie, Abstände und Farben exakt zu treffen.
Du wirst Stunden damit verbringen, dich zu fragen, wie sie dieses exakte Padding hinbekommen haben, lernen, warum Grids so aufgebaut sind, wie sie sind, und plötzlich auf jeder Website, die du besuchst, bewusste Layout-Entscheidungen wahrnehmen. Frontend-Entwickler schwören seit Jahren auf diese Übung.
18. CSS-Kunst
Zeichne etwas, indem du ausschließlich div-Elemente und CSS verwendest. Manche Entwickler haben auf diese Weise erstaunlich detaillierte Illustrationen erschaffen: Cartoon-Figuren, Landschaften, Tiere oder sogar Porträts. Fang mit etwas Einfachem an – einer Kaffeetasse, einem Smiley oder einem einfachen Roboter.
Das klingt albern, bis man es selbst ausprobiert. Dann wird es zu einer intensiven Lektion über position, border-radius, box-shadow, Verläufe (Gradients) und transform. Am Ende wirst du CSS auf einem Niveau verstehen, das die meisten Anfänger nie erreichen – nur weil du versucht hast, einen Kreis in einem Rechteck zu zeichnen.
Wie Coddy dir dabei hilft
Die HTML-Lektionen und CSS-Lektionen von Coddy schließen die Lücke zwischen „Ich möchte das lernen“ und „Ich kann ein eigenes Projekt bauen“. Jede Lektion dauert etwa fünf Minuten. Du schreibst echten Code direkt im Browser, und Bugsy (der KI-Assistent in den Lektionen) hilft dir sofort weiter, wenn du dich fragst, warum margin: auto dein Element nicht vertikal zentriert.
Die gesamte Struktur ist auf tägliche Praxis ausgelegt. Hier fünf Minuten, da fünf Minuten – genau das Prinzip, das Menschen dazu bringt, jeden Morgen ihre Sprachlern-App zu öffnen, nur eben fürs Programmieren. Wenn du schon mal einen Online-Kurs im eigenen Tempo nach etwa 30 % abgebrochen hast, war dieses mundgerechte Format wahrscheinlich genau das, was dir gefehlt hat.
Sowohl HTML als auch CSS sind komplett kostenlos nutzbar – jede einzelne Lektion, ganz ohne Einrichtung. Das überrascht viele. Du wirst also nicht mitten beim Lernen von Flexbox plötzlich vor einer Paywall stehen!
Ein paar hilfreiche Gewohnheiten
Bevor du dir ein Projekt aussuchst, hier noch drei kleine Dinge, die einen erstaunlich großen Unterschied machen:
Nutze die Entwicklertools des Browsers. Mach einen Rechtsklick auf ein beliebiges Element, klicke auf „Untersuchen“ und schau dir den CSS-Bereich an. Du kannst CSS direkt live im Browser bearbeiten, um zu sehen, was passiert. Das ist das beste Debugging-Tool, das du je benutzen wirst – und es ist in jedem Browser bereits kostenlos integriert.
Entwickle Mobile-First. Schreibe dein CSS zuerst für kleine Bildschirme und füge dann Media Queries hinzu, damit es auf größeren Bildschirmen gut aussieht. Umgekehrt ist es deutlich schwieriger. Da fast jeder moderne Frontend-Code diesem Muster folgt, sparst du dir später viel doppelte Arbeit, wenn du es dir jetzt schon angewöhnst.
Bringe zuerst die „hässliche“ Version zum Laufen. Sorge dafür, dass die Seite mit Platzhalter-Inhalten und einem groben Layout funktioniert. Den Feinschliff machst du später. Ein häufiger Fehler von Anfängern ist es, drei Stunden in den perfekten Button zu investieren, nur um dann festzustellen, dass das gesamte Seitenlayout nicht funktioniert und alles noch einmal umgebaut werden muss.
Was du als Nächstes bauen solltest
Wenn du ein Projekt abschließt und das nächste sich fast von selbst anbietet, ist das ein hervorragendes Zeichen. Du bist bereit!
Such dir das nächste Projekt aus dieser Liste aus und leg los. Warte nicht, bis du dich „bereit genug“ fühlst – dieses Gefühl kommt nämlich nie. Stattdessen wirst du eines Tages feststellen, dass du bereits sechs Dinge gebaut hast und das siebte plötzlich machbar erscheint.
Wenn du nicht weißt, was du als Nächstes wählen sollst, nimm das Projekt, das dir ein wenig Respekt einflößt. Die größten Lernfortschritte machst du an der Grenze deiner Komfortzone, nicht mittendrin.
Und wenn du bei den Grundlagen an Grenzen stößt (Selektoren funktionieren nicht, Layouts brechen zusammen, Flexbox tut nicht, was es soll), nimm dir eine kurze Auszeit vom Projekt und fülle die Wissenslücken mit ein paar gezielten Lektionen.
Die HTML- und CSS-Lernpfade von Coddy sind genau dafür da: kurzes, gezieltes Üben des Konzepts, bei dem du gerade feststeckst, und danach direkt zurück zu deinem Projekt.
Coddy macht das Programmieren zu einer täglichen Fünf-Minuten-Gewohnheit – mit XP, Streaks und einem großzügigen kostenlosen Bereich, der jede HTML- und CSS-Lektion abdeckt. So entwickelst du endlich die nötige Routine, um echte Projekte fertigzustellen.
Share this article
About the Author
Coddy Team
Editorial Team
Frequently Asked Questions
Was ist das beste erste HTML- und CSS-Projekt für absolute Anfänger?
Eine Tribute-Seite oder eine persönliche „Über mich“-Seite. Beide nutzen nur grundlegendes HTML und ein wenig CSS, und du hast sie in wenigen Stunden fertiggestellt.
Muss ich JavaScript lernen, bevor ich HTML- und CSS-Projekte mache?
Nein. Du kannst allein mit HTML und CSS überraschend viel bauen: Landingpages, Portfolios, Bildergalerien, animierte Navigationen und sogar einen funktionierenden Bild-Slider. JavaScript kommt erst dann ins Spiel, wenn du Interaktivität benötigst, die CSS nicht bewältigen kann – was meistens erst beim fünften oder sechsten Projekt der Fall ist.
Wie lange sollte ein HTML- und CSS-Projekt für Anfänger dauern?
Ein erstes Projekt sollte höchstens ein Wochenende dauern. Sitzt du schon seit zwei Wochen daran? Dann ist der Umfang zu groß. Streiche Features, bis das Projekt veröffentlichungsreif ist, stelle diese Version fertig und füge erst dann mehr hinzu, wenn du es immer noch möchtest.
Lohnen sich CSS-Projekte, wenn ich Backend-Entwickler werden möchte?
Ja, zumindest ein paar davon. Die meisten Backend-Rollen erwarten immer noch, dass du mit HTML und CSS für grundlegende Frontend-Aufgaben, interne Tools und Admin-Seiten umgehen kannst. Drei oder vier Projekte bringen dich über die „Ich kann nicht mal“-Phase hinaus und hin zu „Ich kann bei Bedarf etwas zusammenbauen“.
Welche HTML- und CSS-Projekte machen sich im Portfolio am besten?
Setze auf Vielfalt: eine professionelle Landingpage, ein responsives Layout (wie ein Blog oder Dashboard), ein Projekt, das deine Fähigkeiten bei CSS-Animationen zeigt, und idealerweise ein Klon einer echten Website, um zu beweisen, dass du ein Design exakt nachbauen kannst. Vier gut umgesetzte Projekte sind besser als fünfzehn halbfertige.
Wie mache ich meine HTML- und CSS-Projekte responsiv?
Beginne mit dem Layout für kleine Bildschirme und füge dann CSS Media Queries hinzu, um es an größere anzupassen. Verwende überall relative Einheiten wie rem und % anstelle von festen Pixelbreiten. Teste das Ganze, indem du die Größe deines Browserfensters änderst oder die Device Toolbar in den DevTools verwendest.
Kann ich HTML und CSS auf Coddy kostenlos lernen?
Ja. Sowohl HTML als auch CSS sind im kostenlosen Tarif enthalten, jede Lektion ist inbegriffen. Der kostenlose Tarif begrenzt, wie viel du pro Sitzung tun kannst (ein Energiesystem, das sich mit der Zeit wieder auflädt), sperrt aber keine Inhalte hinter einer Paywall.
Welche CSS-Konzepte sollte ich kennen, bevor ich mich an fortgeschrittenere Projekte wage?
Das Box-Modell, Flexbox, CSS Grid, Positionierung (relative, absolute, fixed) und zumindest grundlegendes responsives Design mit Media Queries. Wenn dir eines davon noch unklar erscheint, mache ein paar Übungslektionen, bevor du dich an ein Layout-Projekt wagst. Andernfalls wirst du die meiste Zeit des Projekts mit Googeln statt mit dem eigentlichen Programmieren verbringen.
