Menu
Coddy logo textTech
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

281,604+ codders eingeschrieben

241 Lektionen212 Aufgaben1,195 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,195 Quizfragen
  1. Abschnitt 1

    Fundamentals

    Abschnitt startenStartenAusklappenEinklappen    Learn the core structure and syntax to create web pages from scratch60 Lektionen75 Aufgaben252 Fragen3 Projekte

    HTML-Grundlagen

    5 Lektionen531

    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 with CSSEigene Seite

    Abschnitt startenStartenAusklappenEinklappen    Bring your web pages to life with colors, layouts, and styles76 Lektionen100 Aufgaben419 Fragen3 Projekte

    Einführung

    5 Lektionen540

    CSS hinzufügen

    4 Lektionen725

    Grundlegende Selektoren

    7 Lektionen1247

    Text-Grundlagen

    8 Lektionen1450

    Farben und Hintergründe

    5 Lektionen834

    Café-Menü

    Projekt3 Lektionen1

    Box-Modell Teil 1

    6 Lektionen943

    Box-Modell Teil 2

    5 Lektionen834

    Flexbox

    6 Lektionen943

    Login-Formular

    Projekt4 Lektionen1

    Layout-Techniken

    7 Lektionen1151

    Grundlagen des Responsive Designs

    6 Lektionen1052

    Tonga Webseite

    Projekt6 Lektionen1

    Abschluss-Herausforderungen

    4 Lektionen4
  3. Abschnitt 3

    CSS MasteryEigene Seite

    Abschnitt startenStartenAusklappenEinklappen    Take you css skills to the next 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

    Practical Frontend

    Abschnitt startenStartenAusklappenEinklappen    Combine structure and style to design complete, responsive web pages35 Lektionen34 Aufgaben197 Fragen

    Variablen

    5 Lektionen432

    Mobile-First-Strategie

    6 Lektionen643

    Theming & Visuelle Stile

    5 Lektionen535

    Extremsport

    3 Lektionen3

    UI-Komponenten

    6 Lektionen642

    Responsive Muster

    6 Lektionen645

    Abschlussherausforderungen

    4 Lektionen4
  5. Abschnitt 5

    JavaScript in Action

    Abschnitt startenStartenAusklappenEinklappen    Explore how javascript is used with html and css27 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

    Theming & Personalisierung

    2 Lektionen217

    Animationen & Effekte

    3 Lektionen327

    Animierte Navigation

    3 Lektionen36

    Abschluss-Herausforderungen

    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

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

  • 7
  • 1

Stoppuhr - HTML/CSS/JS Projekt

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

  • 10
  • 3

Untere Navigationsleiste - HTML/CSS Projekt

In diesem Kurs erstellst du eine einfache untere Navigationsleiste mit HTML und gestaltest sie mit CSS. Du lernst, wie du mithilfe des (:hover)-Selektors in CSS einfache Animationen hinzufügst.

  • 12
  • 2

DOM-Projekt - Taschenrechner

In diesem Kurs baust du einen einfachen interaktiven Taschenrechner mit HTML, CSS und JS.

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

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

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
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

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.
Coddy programming languages illustration

Lerne HTML mit Coddy

LOS GEHT'S