Menu
CoddyTech
JETZT LERNEN
flag De iconDeutschdown icon
BeliebtJourney

HTML lernen

Ein kostenloser, interaktiver Online-HTML-Kurs. In jeder Lektion schreibst du selbst HTML, mit Live-Vorschau beim Tippen und einem kostenlosen Zertifikat am Ende.

MIT DEM LERNEN BEGINNEN(kostenlos)
Lehrplan ansehenHTML-Playground

336,814+ codders eingeschrieben

241 Lektionen212 Aufgaben1,193 Quizfragen

  • Anfängerfreundlich
  • sparkles iconKI-gestützte Coding-Hilfe
  • hint iconPraktische, interaktive Lektionen
  • volume On iconAudio-Erzählung in jeder Lektion
  • quiz iconQuizfragen zum Wissenstest
  • certificate iconKostenloses Abschlusszertifikat

Lehrplan

5 Abschnitte6 Projekte241 Lektionen212 Aufgaben1,193 Quizfragen
  1. Abschnitt 1

    Grundlagen

    Abschnitt startenStartenAusklappenEinklappen    Lernen Sie die grundlegende Struktur und Syntax, um Webseiten von Grund auf zu erstellen60 Lektionen75 Aufgaben251 Fragen3 Projekte

    HTML-Grundlagen

    5 Lektionen530

    Text und Formatierung

    6 Lektionen1135

    Arbeiten mit Listen

    4 Lektionen721

    Rezeptkarte

    Projekt4 Lektionen1

    Inhalte hinzufügen

    5 Lektionen837

    Seitenlayout

    5 Lektionen930

    Persönliche Profilseite

    Projekt5 Lektionen1

    Formulare und Eingaben Teil 1

    6 Lektionen936

    Formulare und Eingaben Teil 2

    7 Lektionen1239

    Tabellen

    4 Lektionen723

    Event-Registrierungsseite

    Projekt5 Lektionen1

    Abschlussherausforderungen

    4 Lektionen4
  2. Abschnitt 2

    Styling mit CSSEigene Seite

    Abschnitt startenStartenAusklappenEinklappen    Bringen Sie Ihre Webseiten mit Farben, Layouts und Stilen zum Leben76 Lektionen100 Aufgaben418 Fragen3 Projekte

    Einführung

    5 Lektionen540

    CSS hinzufügen

    4 Lektionen725

    Grundlegende Selektoren

    7 Lektionen1247

    Textgrundlagen

    8 Lektionen1450

    Farben und Hintergründe

    5 Lektionen834

    Café-Menü

    Projekt3 Lektionen1

    Box-Modell Teil 1

    6 Lektionen943

    Box-Modell Teil 2

    5 Lektionen833

    Flexbox

    6 Lektionen943

    Anmeldeformular

    Projekt4 Lektionen1

    Layout-Techniken

    7 Lektionen1151

    Grundlagen des Responsive Designs

    6 Lektionen1052

    Tonga-Webseite

    Projekt6 Lektionen1

    Letzte Herausforderungen

    4 Lektionen4
  3. Abschnitt 3

    CSS-MeisterschaftEigene Seite

    Abschnitt startenStartenAusklappenEinklappen    Bringen Sie Ihre CSS-Fähigkeiten auf das nächste Level!43 Lektionen40 Aufgaben164 Fragen

    Selektoren-Meisterschaft – Kombinationen

    6 Lektionen539

    Interaktive Pseudoklassen

    5 Lektionen431

    Strukturelle Pseudoklassen

    5 Lektionen432

    Projekt: Dropdown-Menü

    4 Lektionen4

    Visuelle Effekte

    5 Lektionen536

    Landing Page

    5 Lektionen5

    Erstellen mit CSS Grid

    4 Lektionen426

    Flavor Fiesta Website

    4 Lektionen4

    Abschluss-Herausforderungen

    5 Lektionen5
  4. Abschnitt 4

    Praktisches Frontend

    Abschnitt startenStartenAusklappenEinklappen    Kombinieren Sie Struktur und Stil, um vollständige, responsive Webseiten zu gestalten35 Lektionen34 Aufgaben197 Fragen

    Variablen

    5 Lektionen432

    Mobile-First-Strategie

    6 Lektionen643

    Themeing & visuelle Stile

    5 Lektionen535

    Extremsport

    3 Lektionen3

    UI-Komponenten

    6 Lektionen642

    Responsive Muster

    6 Lektionen645

    Abschließende Herausforderungen

    4 Lektionen4
  5. Abschnitt 5

    JavaScript in Aktion

    Abschnitt startenStartenAusklappenEinklappen    Erkunden Sie, wie JavaScript mit HTML und CSS verwendet wird27 Lektionen27 Aufgaben163 Fragen

    Interaktivität/UI-Komponenten

    4 Lektionen433

    Formulare & Validierung

    3 Lektionen324

    Benachrichtigungen & Feedback

    3 Lektionen327

    Formular mit Toast-Benachrichtigung

    2 Lektionen2

    Navigation

    3 Lektionen329

    Design & Personalisierung

    2 Lektionen217

    Animationen & Effekte

    3 Lektionen327

    Animierte Navigation

    3 Lektionen36

    Abschlussherausforderungen

    4 Lektionen4

HTML-Kurse

Praktische HTML-Kurse, kostenlos im Browser zu starten.

Sonnenfinsternis-Animation | HTML/CSS Projekt

Beliebt

In diesem Kurs erstellst du eine beeindruckende „Sonnenfinsternis“-Animation. Erfahre, wie man mit Animationen ansprechende und funktionale Benutzeroberflächen gestaltet.

  • 10
  • 2

Instagram-Clone | Front-End-Projekt

Beliebt

In diesem Kurs übst du standardmäßige und einfache HTML & CSS Ansätze und erstellst ein eigenes Instagram-Clone-Projekt.

  • 16
  • 5

YouTube Video-Player - HTML-Projekt

Beliebt

In diesem Projekt erstellst du einen YouTube Video-Player mit HTML und lernst dabei verschiedene Attribute kennen.

  • 7
  • 1

JavaScript DOM-Methoden

In diesem Kurs lernst du die am häufigsten verwendeten JavaScript DOM-Methoden kennen und erfährst, wie du sie anwendest!

  • 13

Stoppuhr - HTML/CSS/JS Projekt

In diesem Projekt erstellst du eine einfache Stoppuhr mit HTML, CSS und JavaScript.

  • 10
  • 3

HTML/CSS Herausforderungen - Paket I

Dieser Kurs wird dein Wissen über HTML und CSS auf unterhaltsame und effektive Weise herausfordern!

  • 11
Alle 26 HTML-Kurse ansehen →
Das bekommst du
Alles, was du zum Programmierenlernen nutzt

Lernen durch Tun

Schreibe echten Code, frage Datenbanken ab, erstelle Websites und meistere KI-Prompts. Unsere interaktiven Lektionen decken alle Fähigkeiten ab, die moderne Entwickler brauchen.

playground.js
Code-Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Eingabe
"Alex"
Ausgabe
"Hello, Coddy! Alex"

Baue deine Serie auf

Bleib konsequent und sieh zu, wie dein Fortschritt wächst! Verfolge deine tägliche Programmiergewohnheit, schütze deine Serie mit Einfrieroptionen und verdiene Belohnungen für jeden Tag.

12 Tage Serie

Komm morgen zurück, um deine Serie zu halten!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Doppelt oder Nichts

Tag 5 von 7

fire Freeze icon

Serie Einfrieren

2 left

Überall coden

Nimm deine Programmierreise mit! Keine Einrichtung, keine Downloads: einfach öffnen und loslegen. Verfügbar auf iOS, Android und Web mit 4,9-Sterne-Bewertungen.

Python
7Streak
250Punkte
5Energie
Variablen
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
FORTSETZEN
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Reise
Ziele
Bestenliste
Profil
4.9
SternSternSternSternStern
Bewertung

Du bist nicht allein

Tritt auf globalen Bestenlisten an, lade Freunde ein, um Belohnungen zu verdienen, und feiert gemeinsam eure Erfolge. Programmieren macht mit Freunden mehr Spaß!

Herausforderer-Liga
Herausforderer-LigaTop 7 steigen auf
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconAufstiegszoneleaderboard Arrow Up icon

Jeder Lernweg, alles dabei

Lies, höre, teste dich, frag die KI oder schlage nach, was du schon gelernt hast. Jede Lektion passt sich dir an.

Einführung in Variablen
Audio

Eine Variable ist ein benannter Container, der einen Wert speichert, auf den du später im Programm verweisen kannst.

In Python erstellst du eine, indem du den Namen, ein Gleichheitszeichen und dann den Wert schreibst.

Der Wert kann sich ändern - eine neue Zuweisung verweist den Namen einfach auf einen neuen Wert.

1xSarah

Werde zertifiziert

Verdiene Zertifikate für jeden abgeschlossenen Kurs. Füge sie deinem LinkedIn-Profil und Lebenslauf hinzu, um Arbeitgebern deine Programmierkenntnisse zu zeigen.

CoddyAbschlusszertifikat
Hiermit wird bestätigt, dassMax Mustermannerfolgreich abgeschlossen hat
python iconPython-Grundlagen
Verifiziert
DatumJan. 2026
LinkedInZu LinkedIn hinzufügen

Warum HTML mit Coddy lernen

  • Schreib HTML im Browser und sieh die gerenderte Seite direkt daneben. Kein Editor zu installieren, kein Setup. Jede Änderung am HTML-Code erscheint sofort live – die Feedback-Schleife ist kurz.
  • Modernes, semantisches HTML: Überschriften, Listen, Links, Bilder, Tabellen, Formulare und semantische Tags wie <header>, <nav>, <main>, <section>, <footer>. Genau das HTML, mit dem du auch wirklich eine echte Website baust.
  • KI-Hinweise helfen dir, HTML-Fehler zu beheben – nicht geschlossene Tags, kaputte Attribut-Syntax, Accessibility-Patzer – ohne die Lösung zu verraten, damit gute HTML-Gewohnheiten hängen bleiben.
  • Kostenloses HTML-Zertifikat zum Abschluss. Ein glaubwürdiger erster Schritt in die Webentwicklung – passt nahtlos zu den Kursen für CSS und JavaScript.

Häufige Fragen zum Lernen von HTML

Ist HTML leicht zu lernen?

HTML ist eines der einfachsten Dinge, die du in der Tech-Welt lernen kannst. Es ist eine Auszeichnungssprache, keine Programmiersprache – du beschriftest Inhalte (Überschriften, Absätze, Links, Bilder), statt Logik zu schreiben. Die meisten Anfänger bauen ihre erste richtige Webseite schon in der ersten Stunde.

Wie lange dauert es, HTML zu lernen?

Die Grundlagen von HTML lassen sich mit täglicher Übung oft in ein bis zwei Wochen lernen. Für eigene reale Projekte solltest du je nach Tempo eher ein bis drei Monate einplanen.

Sollte ich HTML vor CSS und JavaScript lernen?

Ja. HTML legt die Struktur einer Seite fest, CSS bestimmt das Aussehen und JavaScript macht sie interaktiv. Wenn du zuerst HTML lernst, hast du später etwas Konkretes, das du gestalten und animieren kannst. Der HTML-Kurs ist bewusst kurz gehalten, damit du schnell zu CSS und JS weitergehen kannst.

Ist HTML eine Programmiersprache?

Streng genommen nein. HTML ist eine Auszeichnungssprache, mit der die Struktur von Webinhalten beschrieben wird. Sie hat von sich aus keine Variablen, Bedingungen oder Schleifen. Die eigentliche Programmierung auf einer Webseite kommt von JavaScript, das in einem separaten Kurs behandelt wird.

Kann ich HTML kostenlos online lernen?

Ja. Der interaktive HTML-Kurs ist kostenlos – Lektionen, Programmierübungen, eine Live-Vorschau des HTML und ein Zertifikat. Alles läuft im Browser, du musst also weder einen Editor noch sonstige Tools installieren, um loszulegen.

Bekomme ich nach dem HTML-Kurs ein Zertifikat?

Ja. Wenn du den HTML-Kurs abschließt, bekommst du ein kostenloses Abschlusszertifikat. Ein nachprüfbarer Nachweis, den du in deinen Lebenslauf aufnehmen oder auf LinkedIn teilen kannst – meist als Zwischenschritt auf dem Weg zu einem vollständigen Portfolio aus HTML, CSS und JavaScript.

Lernpfade, die diesen Kurs enthalten

Dieser Kurs ist ein Schritt eines längeren Pfads: mehrere Kurse in der Reihenfolge, in der ein Mentor sie unterrichten würde, jeder mit eigenem kostenlosem Zertifikat.

Illustration der Programmiersprachen bei Coddy

Lerne HTML mit Coddy

LOS GEHT'S