20 Einsteigerprojekte für Webentwicklung in HTML, CSS, JavaScript und React, jeweils mit dem, was du dabei lernst, und einem kurzen Startcode, den du einfügen und ausbauen kannst.
Beginne mit Projekten, die dir jeweils eine neue Idee beibringen: eine persönliche Seite für HTML und CSS, ein Zähler und eine Todo-Liste für JavaScript-Events und State, danach eine Wetter- oder Quiz-App für fetch und JSON. Steig auf React um, sobald sich normales JavaScript leicht anfühlt. Jedes Projekt unten kommt mit einem Startcode, den du einfügen und erweitern kannst.
Eine sinnvolle Reihenfolge
Listen mit Einsteigerprojekten hören meist beim Titel auf. Jedes Projekt hier sagt dir, welche Fähigkeit es trainiert, wie lange es ungefähr dauert, und gibt dir ein paar Zeilen funktionierenden Code zum Start, damit du deine erste Stunde mit Bauen verbringst statt mit dem Anstarren einer leeren Datei. Filtere nach Level oder nach der Sprache, die du üben willst.
Eine einseitige Profilseite über dich in reinem HTML und CSS. Du brauchst nichts außer einem Texteditor und einem Browser, und sie deckt Überschriften, Absätze, Links, Bilder und grundlegendes Styling ab.
Für sich allein ja, denn fast jeder Lernende baut eine. Mach sie zu deiner eigenen: Füge Fälligkeitsdaten, Filter, Umsortieren per Drag-and-drop oder Speichern in localStorage hinzu und schreib eine kurze Notiz, was du verbessern würdest.
Sobald du den Zähler, die Todo-Liste und eine App mit fetch in reinem JavaScript ohne Tutorial bauen kannst. React ergibt viel mehr Sinn, wenn du selbst erlebt hast, wie mühsam es ist, das DOM von Hand zu aktualisieren.
Nein. Alle zwanzig laufen im Browser. Die Datenprojekte rufen kostenlose öffentliche APIs oder eine lokale JSON-Datei auf, und die Projekte zum Speichern nutzen localStorage, das String-Daten ohne Ablaufdatum im Browser speichert.
Es gibt keine feste Zahl. Drei oder vier fertige, ausgefeilte Projekte, die unterschiedliche Fähigkeiten zeigen, sagen meist mehr als zwanzig halbfertige.
Speichere das als index.html, öffne es im Browser und füge ein beliebiges HTML-Projekt in den Body ein.
Enthält das Viewport-Tag, damit Smartphones die Seite in der richtigen Größe anzeigen, und ein Script-Tag für die JavaScript-Projekte.
Anfänger
HTML/CSS
1 bis 2 Stunden
Seitenstruktur, Überschriften, Bilder, Links
Füge mit prefers-color-scheme ein dunkles Theme hinzu.
Anfänger
HTML/CSS
1 Stunde
Geordnete und ungeordnete Listen, semantische Abschnitte
Füge ein Print-Stylesheet hinzu, das das Foto ausblendet.
Anfänger
HTML/CSS
3 Stunden
Flexbox, Abstände, Buttons, responsiver Text
Lass die Feature-Zeile unter 600px untereinander umbrechen.
Anfänger
HTML/CSS
1 Stunde
CSS Grid, auto-fit, object-fit
Öffne eine größere Ansicht, wenn ein Foto angeklickt wird.
Anfänger
HTML/CSS
2 Stunden
Labels, Input-Typen, eingebaute Validierung
Zeige unter jedem Feld eine eigene Fehlermeldung.
Anfänger
JavaScript
30 Minuten
Elemente auswählen, Klick-Events, Text aktualisieren
Füge einen Reset-Button hinzu und stoppe bei null.
Anfänger
JavaScript
2 Stunden
Formular absenden, Arrays, eine Liste rendern
Speichere die Todos, damit sie ein Neuladen überstehen.
Anfänger
JavaScript
1 Stunde
Input-Events, Zahlen, Geldbeträge formatieren
Teile die Rechnung auf mehrere Personen auf.
Anfänger
JavaScript
45 Minuten
Klassen umschalten, eine Einstellung speichern
Übernimm beim ersten Besuch die Systemeinstellung.
Fortgeschritten
JavaScript
1 Stunde
setInterval, Datumswerte, Timer beenden
Lass den Nutzer das Zieldatum wählen.
Fortgeschritten
JavaScript
3 Stunden
Daten in Arrays aus Objekten, Punktezählung, State
Mische die Fragen und zeige einen Fortschrittsbalken.
Fortgeschritten
JavaScript
2 Stunden
localStorage, JSON.stringify und JSON.parse
Füge eine Suche und pro Notiz einen Löschen-Button hinzu.
Fortgeschritten
APIs
3 Stunden
fetch, async/await, Fehlerzustände
Zeige eine Lademeldung und eine freundliche Fehlermeldung.
Fortgeschritten
APIs
2 Stunden
JSON-Felder auslesen, Karten aus Daten bauen
Liste die fünf neuesten Repositories des Nutzers auf.
Fortgeschritten
JavaScript
1 Stunde
Arrays filtern, Input-Events, leere Zustände
Hebe die passenden Buchstaben hervor.
Nächster Schritt
React
30 Minuten
Komponenten, useState, Event-Handler
Füge ein Eingabefeld für die Schrittweite hinzu.
Nächster Schritt
React
3 Stunden
Listen mit Keys, kontrollierte Inputs, unveränderliche Updates
Füge die Filter Alle, Aktiv und Erledigt hinzu.
Nächster Schritt
React
2 Stunden
useEffect, Lade- und Fehlerzustände
Füge ein Suchfeld hinzu, das nach Namen filtert.
Nächster Schritt
React
4 Stunden
State nach oben verlagern, Einträge zwischen Listen verschieben
Füge Drag-and-drop zwischen den Spalten hinzu.
Nächster Schritt
React
4 Stunden
Abgeleitete Werte, reduce, Formulare mit mehreren Feldern
Stelle die Ausgaben nach Kategorie in einem Diagramm dar.
Filtere nach Level oder Fähigkeit und öffne dann ein Projekt für seinen Startcode.
Nach Level filtern
Nach Fähigkeit filtern
{n} von {total} Projekten angezeigt
Kopieren
{level} · {skill} · {time}. Lernziel: {teaches}. Zusatzziel: {stretch}
Kostenlos starten · Keine Kreditkarte nötig