Frontend-Entwicklung lernen

Das lernst du

1. Kapitel 1Der Frontend-Werkzeugkasten – Wie eine Seite aufgebaut ist: Bereiche, Klassen, das Box-Modell und welche CSS-Regel gewinnt.
   Seitenbereiche: header, main, footer · Klassen: ein Stil für viele Elemente · Das Box-Modell und box-sizing · Welche Regel gewinnt? Spezifität · Boss: eine Profilkarte
2. Kapitel 2Layout mit Flexbox – Elemente in eine Reihe bringen, verteilen, umbrechen und wachsen lassen – bis zur fertigen Navigationsleiste.
   display: flex – Elemente in eine Reihe · Verteilen und ausrichten: justify-content und align-items · Abstände und Umbruch: gap und flex-wrap · Wachsen lassen: flex: 1 · Boss: eine Navigationsleiste
3. Kapitel 3Layout mit Grid – Spalten und Zeilen auf einmal: fr-Einheiten, repeat, benannte Bereiche und Raster, die sich selbst anpassen.
   display: grid – Spalten festlegen · Kürzer schreiben: repeat() · Bereiche benennen: grid-template-areas · Raster, die sich selbst anpassen: auto-fit und minmax · Boss: ein Dashboard-Raster
4. Kapitel 4Responsive Design: eine Seite für jedes Gerät – Viewport, Mobile First, Media Queries und flüssige Größen – damit deine Seite auf Handy und Laptop gut aussieht.
   Der Viewport: Handys nicht verkleinern lassen · Mobile First mit min-width · Auf kleinen Bildschirmen ausblenden: max-width · Flüssige Größen: max-width, clamp und Bilder · Boss: eine responsive Produktseite
5. Kapitel 5Ein Design-System mit CSS-Variablen – Farben und Abstände an einer Stelle festlegen, Dark Mode, Komponenten mit Varianten und Zustände wie :hover.
   CSS-Variablen: eine Farbe, überall · Eine Abstands-Skala · Dark Mode mit prefers-color-scheme · Komponenten mit Varianten · Boss: ein Knopf-Set mit Zuständen
6. Kapitel 6Formulare und Barrierefreiheit – Beschriftete Felder, eingebaute Prüfungen, sichtbarer Fokus und Hilfen für Screenreader – Formulare, die alle bedienen können.
   Jedes Feld braucht ein label · Eingebaute Prüfung: required, type und minlength · Sichtbarer Fokus mit :focus-visible · Bilder und Symbole beschreiben: alt und aria-label · Boss: ein barrierefreies Kontaktformular
7. Kapitel 7JavaScript im Browser: das DOM – Elemente finden, Texte ändern, Klassen schalten und neue Elemente aus Daten bauen.
   Elemente finden: querySelector und textContent · Alle auf einmal: querySelectorAll und forEach · Klassen schalten: classList · Neue Elemente aus Daten bauen · Boss: eine Rangliste aus Daten
8. Kapitel 8Events: Seiten, die reagieren – Klicks, Eingaben und Tasten abfangen, eine Liste mit einem einzigen Listener steuern und Tabs bauen.
   Der erste Event-Listener · Live mittippen: das input-Ereignis · Tasten abfangen: keydown · Ein Listener für viele: Event-Delegation · Boss: Tabs bauen
9. Kapitel 9Daten laden mit fetch – Daten von einer API holen, mit async/await lesbar schreiben, Ladezustände zeigen und Fehler abfangen.
   Daten holen: fetch und json · Lesbarer mit async und await · Laden, fertig, leer: Zustände zeigen · Wenn es schiefgeht: response.ok und try/catch · Boss: eine Bestenliste von der API
10. Kapitel 10HTML + CSS: Struktur trifft Aussehen – HTML baut die Seite, CSS gestaltet sie – und Klassen, ids und <link> verbinden beides.
    Der <style>-Block im <head> · Klassen verbinden HTML und CSS · id für eins, class für viele · Eine eigene CSS-Datei mit <link> · Boss: eine Profilkarte mit Stil
11. Kapitel 11HTML + JavaScript: die Seite wird lebendig – Mit <script> greift JavaScript auf die Seite zu: Elemente finden, Texte ändern, auf Klicks und Eingaben reagieren.
    Das <script>-Tag holt JavaScript in die Seite · querySelector: Elemente finden wie in CSS · Auf Klicks reagieren: addEventListener · Eingaben lesen: value · Boss: eine kleine To-do-Liste
12. Kapitel 12HTML + JavaScript: Formulare auswerten – HTML sammelt Eingaben in Formularen, JavaScript wertet sie aus: abschicken, Auswahl lesen, prüfen und live reagieren.
    Ein Formular abschicken: submit · Auswahl lesen: select und checkbox · Eingaben prüfen und Fehler zeigen · Live reagieren: das input-Ereignis · Boss: ein Anmeldeformular prüfen
13. Kapitel 13HTML + CSS + JavaScript: alles zusammen – JavaScript schaltet CSS-Klassen, setzt Stile, blendet ein und aus und merkt sich Dinge im Browser.
    JavaScript schaltet CSS-Klassen · element.style: Stile direkt setzen · Ein- und ausblenden mit hidden · Merken im Browser: localStorage · Boss: ein Quiz mit Farbe
14. Kapitel 14JavaScript + HTML: Listen aus Daten bauen – Daten liegen in JavaScript-Arrays, die Seite zeigt sie als HTML: Elemente erzeugen, Listen rendern, filtern, suchen und sortieren.
    Elemente erzeugen: createElement und append · Daten zu HTML: map und join · Filtern per Knopf: filter und data-Attribute · Live-Suche: input, filter und includes · Boss: ein Produktkatalog
15. Kapitel 15JavaScript + JSON: Daten aus dem Netz – JSON ist die Sprache, in der Programme Daten austauschen. fetch holt sie von einer API, JavaScript zeigt sie auf der Seite.
    JSON: aus Text werden Daten · JSON.stringify: aus Daten wird Text · fetch: Daten von einer API holen · Daten aus der API auf die Seite bringen · Boss: Laden mit Fehlerfall
16. Kapitel 16Zustand im Browser: speichern und neu zeichnen – Daten in localStorage merken, Objekte als JSON speichern, einen Zustand mit einer render-Funktion anzeigen und filtern.
    Sich etwas merken: localStorage · Listen und Objekte speichern: JSON · Ein Zustand, eine render-Funktion · Filtern: dieselben Daten, andere Ansicht · Boss: eine Merkliste, die sich erinnert
17. Kapitel 17Animationen und Übergänge – Weiche Übergänge mit transition, Bewegung mit transform, eigene Animationen mit @keyframes – und Rücksicht auf „weniger Bewegung“.
    Weiche Übergänge: transition · Bewegen ohne Ruckeln: transform · Eigene Animationen: @keyframes · Rücksicht: prefers-reduced-motion · Boss: eine lebendige Produktkarte
18. Kapitel 18React: Komponenten und Props – Oberflächen aus Bausteinen: Komponenten, Props, children, Listen mit key und Inhalte nur bei Bedarf zeigen.
    Eine Komponente ist eine Funktion · Props: Komponenten mit Werten füllen · Inhalte durchreichen: children · Listen mit map und key · Boss: Produktkarten mit Abzeichen
19. Kapitel 19React: State und Events – Werte, die sich ändern: useState, Listen im State, Inhalte ein- und ausklappen und State an Kind-Komponenten weitergeben.
    useState: ein Wert, der sich ändert · Listen im State: nie verändern, immer neu bauen · Ein- und ausklappen · State nach oben heben · Boss: ein Warenkorb mit Summe
20. Kapitel 20React: Effekte und Daten – Daten in useEffect laden, Lade- und Fehlerzustände zeigen und eigene Hooks schreiben, die Logik wiederverwendbar machen.
    Daten laden mit useEffect · Ladezustand anzeigen · Fehler abfangen: catch · Eigene Hooks: Logik wiederverwenden · Boss: geladene Daten filtern
21. Kapitel 21Projekt: eine Landingpage – Eine echte Startseite für ein Produkt: Hero-Bereich, Vorteile, Preise, Fußbereich – und am Ende alles zusammen, responsive.
    Der Hero-Bereich: der erste Eindruck · Vorteile in einem Raster · Preiskarten mit Empfehlung · Der Fußbereich: Links und Kleingedrucktes · Boss: die ganze Landingpage
22. Kapitel 22Projekt: ein Shop mit Warenkorb – Produkte von der API laden, Ausverkauftes kennzeichnen, in den Warenkorb legen, die Summe berechnen und den Korb speichern.
    Produkte laden und anzeigen · Ausverkauft kennzeichnen · In den Warenkorb legen · Die Summe berechnen · Boss: der fertige Mini-Shop
23. Kapitel 23Projekt: ein Wetter-Dashboard – Aktuelles Wetter laden, die Stadt per Auswahl wechseln, eine Drei-Tage-Vorhersage anzeigen, unbekannte Städte abfangen und alles zu einem Dashboard verbinden.
    Das aktuelle Wetter · Die Stadt auswählen · Die Drei-Tage-Vorhersage · Unbekannte Städte abfangen · Boss: das Wetter-Dashboard
24. Kapitel 24Projekt: dein Portfolio – Eine eigene Portfolio-Seite: Projektkarten aus Daten, Filter nach Technik, ein Kontaktformular mit Prüfung und ein gespeichertes Farbschema.
    Projektkarten aus Daten · Nach Technik filtern · Ein Kontaktformular mit Prüfung · Das Farbschema merken · Boss: dein Portfolio

Abschlussprojekt: Dein Portfolio

Eine responsive Portfolio-Seite mit Projektkarten, Filter, Kontaktformular und gespeicherten Einstellungen.

So funktioniert's

Jede Lektion beginnt mit kurzen Erklärseiten. Danach übst du mit Auswahlfragen, Lückentexten, Code ordnen und eigenem Code – mit Hinweisen und sofortigem Feedback. Kostenlos, ohne Werbung, auf Handy, Tablet und PC.

Jetzt Frontend-Entwicklung lernen