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.
269,396+ codders eingeschrieben
- Anfängerfreundlich
KI-gestützte Coding-Hilfe
Praktische, interaktive Lektionen
Audio-Erzählung in jeder Lektion
Quizfragen zum Wissenstest
Kostenloses Abschlusszertifikat
Lehrplan
Abschnitt 1
Fundamentals
Abschnitt startenStartenAusklappenEinklappenLearn the core structure and syntax to create web pages from scratchHTML-Grundlagen
5 Lektionen531- 01Was ist HTML?Aufgabe
- 02Grundstruktur von HTMLAufgabeQuiz
- 03Tags und ElementeAufgabeQuiz
- 04Verschachtelung und schließende TagsAufgabeQuiz
- 05Kommentare in HTMLAufgabeQuiz
Text und Formatierung
6 Lektionen1135- 01ÜberschriftenAufgabeMeisterungQuiz
- 02AbsätzeAufgabeMeisterungQuiz
- 03ZeilenumbrücheAufgabeMeisterungQuiz
- 04Fetter und kursiver TextAufgabeMeisterungQuiz
- 05Nochmals fett und kursivAufgabeMeisterungQuiz
- 06Wiederholung – FormatierungAufgabe
Arbeiten mit Listen
4 Lektionen721- 01Ungeordnete ListeAufgabeMeisterungQuiz
- 02Geordnete ListeAufgabeMeisterungQuiz
- 03Verschachtelte ListenAufgabeMeisterungQuiz
- 04Zusammenfassung – ListenAufgabe
Rezeptkarte
Projekt4 Lektionen1- 01ProjektübersichtAufgabe
- 02Rezepttitel und BeschreibungProjekt
- 03ZutatenProjekt
- 04SchritteProjekt
Inhalte hinzufügen
5 Lektionen837- 01HTML-AttributeQuiz
- 02LinksAufgabeMeisterungQuiz
- 03Links zu neuen SeitenAufgabeMeisterungQuiz
- 04BilderAufgabeMeisterungQuiz
- 05Bild-AttributeAufgabeMeisterungQuiz
Seitenlayout
5 Lektionen930- 01Bereiche (Divisions)AufgabeMeisterungQuiz
- 02Inline-SpansAufgabeMeisterungQuiz
- 03Semantische TagsAufgabeMeisterungQuiz
- 04Sections und ArticlesAufgabeMeisterungQuiz
- 05Zusammenfassung – LayoutAufgabe
Persönliche Profilseite
Projekt5 Lektionen1- 01ProjektübersichtAufgabe
- 02Header-BereichProjekt
- 03ProfilbildProjekt
- 04Über-mich-BereichProjekt
- 05Social LinksProjekt
Formulare und Eingaben Teil 1
6 Lektionen936- 01Formular-GrundlagenQuiz
- 02TexteingabenAufgabeMeisterungQuiz
- 03Input-AttributeAufgabeMeisterungQuiz
- 04PasswortfeldAufgabeMeisterungQuiz
- 05Labels für EingabenAufgabeMeisterungQuiz
- 06Zusammenfassung – Einfaches FormularAufgabe
Formulare und Eingaben Teil 2
7 Lektionen1239- 01Radio-ButtonsAufgabeMeisterungQuiz
- 02CheckboxenAufgabeMeisterungQuiz
- 03DropdownsAufgabeMeisterungQuiz
- 04ButtonsAufgabeMeisterungQuiz
- 05Buttons in FormularenAufgabeMeisterungQuiz
- 06Wiederholung - Formulare #1Aufgabe
- 07Wiederholung - Formulare #2Aufgabe
Tabellen
4 Lektionen723- 01Tabellen-GrundlagenAufgabeMeisterungQuiz
- 02Beschriftungen hinzufügenAufgabeMeisterungQuiz
- 03Zeilen und Spalten verbindenAufgabeMeisterungQuiz
- 04Zusammenfassung - TabellenAufgabe
Event-Registrierungsseite
Projekt5 Lektionen1- 01ProjektübersichtAufgabe
- 02Header-BereichProjekt
- 03Event-Details-BereichProjekt
- 04RegistrierungsformularProjekt
- 05Footer-BereichProjekt
Abschlussherausforderungen
4 Lektionen4- 01Einfache ProfilkarteAufgabe
- 02Event-EinladungskarteAufgabe
- 03Einfache ArtikelseiteAufgabe
- 04Lieblingsbücher-ListeAufgabe
Abschnitt 2
Styling with CSSEigene Seite
Abschnitt startenStartenAusklappenEinklappenBring your web pages to life with colors, layouts, and stylesEinführung
5 Lektionen540- 01Was ist CSS?AufgabeQuiz
- 02CSS-SyntaxAufgabeQuiz
- 03CSS-KommentareQuiz
- 04Das Head-TagAufgabeQuiz
- 05Das Title-TagAufgabeMeisterungQuiz
CSS hinzufügen
4 Lektionen725- 01Inline-CSSAufgabeMeisterungQuiz
- 02Internes CSSAufgabeMeisterungQuiz
- 03Externes CSSAufgabeMeisterungQuiz
- 04Grundlagen-Styling-ChallengeAufgabe
Grundlegende Selektoren
7 Lektionen1247- 01Einführung in SelektorenAufgabeQuiz
- 02Typ-SelektorAufgabeMeisterungQuiz
- 03Klassen-SelektorAufgabeMeisterungQuiz
- 04ID-SelektorAufgabeMeisterungQuiz
- 05Gruppen-SelektorenAufgabeMeisterungQuiz
- 06Universal-SelektorAufgabeMeisterungQuiz
- 07Selektions-HerausforderungAufgabe
Text-Grundlagen
8 Lektionen1450- 01TextfarbeAufgabeMeisterungQuiz
- 02SchriftfamilieAufgabeMeisterungQuiz
- 03SchriftgrößeAufgabeMeisterungQuiz
- 04SchriftstärkeAufgabeMeisterungQuiz
- 05TextausrichtungAufgabeMeisterungQuiz
- 06TextdekorationAufgabeMeisterungQuiz
- 07Wiederholungs-Challenge #1Aufgabe
- 08Wiederholungs-Challenge #2Aufgabe
Farben und Hintergründe
5 Lektionen834- 01HintergrundfarbeAufgabeMeisterungQuiz
- 02HEX-FarbenAufgabeMeisterungQuiz
- 03RGB-FarbenAufgabeMeisterungQuiz
- 04Transparenz mit RGBAAufgabeQuiz
- 05Wiederholungs-Challenge #1Aufgabe
Café-Menü
Projekt3 Lektionen1- 01Typografie-GrundlagenAufgabe
- 02Text-StylingProjekt
- 03Farben und HintergründeProjekt
Box-Modell Teil 1
6 Lektionen943- 01Was ist das Box-Modell?Quiz
- 02PaddingAufgabeMeisterungQuiz
- 03MarginsAufgabeMeisterungQuiz
- 04BordersAufgabeMeisterungQuiz
- 05Breite und HöheAufgabeMeisterungQuiz
- 06Wiederholungs-ChallengeAufgabe
Box-Modell Teil 2
5 Lektionen834- 01Box-SizingAufgabeQuiz
- 02Border-RadiusAufgabeMeisterungQuiz
- 03OverflowAufgabeMeisterungQuiz
- 04Box-ShadowAufgabeMeisterungQuiz
- 05Recap-ChallengeAufgabe
Flexbox
6 Lektionen943- 01Was ist Flexbox?AufgabeQuiz
- 02Flex DirectionAufgabeMeisterungQuiz
- 03Justify ContentAufgabeMeisterungQuiz
- 04Align ItemsAufgabeMeisterungQuiz
- 05Die perfekte ZentrierungAufgabeQuiz
- 06Flexbox-HerausforderungAufgabe
Login-Formular
Projekt4 Lektionen1- 01BodyAufgabe
- 02Formular-ContainerProjekt
- 03EingabefeldProjekt
- 04ButtonProjekt
Layout-Techniken
7 Lektionen1152- 01Block- vs. Inline-ElementeAufgabeQuiz
- 02Grundlagen der PositionierungAufgabeMeisterungQuiz
- 03Relative PositionierungAufgabeMeisterungQuiz
- 04Absolute PositionierungAufgabeMeisterungQuiz
- 05Fixierte PositionierungAufgabeMeisterungQuiz
- 06Z-Index GrundlagenAufgabeQuiz
- 07Wiederholungs-ChallengeAufgabe
Grundlagen des Responsive Designs
6 Lektionen1052- 01Was ist Responsive Design?AufgabeQuiz
- 02Viewport Meta TagAufgabeQuiz
- 03Fluid LayoutsAufgabeMeisterungQuiz
- 04Viewport-EinheitenAufgabeMeisterungQuiz
- 05Media Queries GrundlagenAufgabeMeisterungQuiz
- 06Flexible BilderAufgabeMeisterungQuiz
Tonga Webseite
Projekt6 Lektionen1- 01NavigationsmenüAufgabe
- 02Willkommens-HeaderProjekt
- 03Über-uns-BereichProjekt
- 04Kontakt-BereichProjekt
- 05Viewport-TagProjekt
- 06Media QueryProjekt
Abschluss-Herausforderungen
4 Lektionen4- 01Elemente anordnenAufgabe
- 02FilmlisteAufgabe
- 03HochzeitseinladungAufgabe
- 04Schwebende BenachrichtigungAufgabe
Abschnitt 3
CSS MasteryEigene Seite
Abschnitt startenStartenAusklappenEinklappenTake you css skills to the next level!Selektoren-Meisterschaft – Kombinationen
6 Lektionen539- 01EinführungQuiz
- 02Nachfahren-SelektorAufgabeQuiz
- 03Kind-SelektorAufgabeQuiz
- 04Direkter Nachbar-SelektorAufgabeQuiz
- 05Allgemeiner Geschwister-SelektorAufgabeQuiz
- 06Wiederholungs-ChallengeAufgabe
Interaktive Pseudoklassen
5 Lektionen431- 01PseudoklassenQuiz
- 02Hover-EffekteAufgabeQuiz
- 03Fokus-EffekteAufgabeQuiz
- 04Aktiv-StylesAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Strukturelle Pseudoklassen
5 Lektionen432- 01Strukturelle PseudoklassenQuiz
- 02Das erste Kind-Element ansprechenAufgabeQuiz
- 03Das letzte Kind-Element ansprechenAufgabeQuiz
- 04Muster-Power: nth-child nutzenAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Projekt: Dropdown-Menü
4 Lektionen4- 01Das Untermenü hinzufügenAufgabe
- 02Das Untermenü anzeigenAufgabe
- 03Weiteres StylingAufgabe
- 04Input und ButtonAufgabe
Visuelle Effekte
5 Lektionen536- 01FarbverläufeAufgabeQuiz
- 02CSS-FilterAufgabeQuiz
- 03TransformationenAufgabeQuiz
- 04Übergänge & Hover-EffekteAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Landing Page
5 Lektionen5- 01Header-Bereich stylenAufgabe
- 02Den Button stylenAufgabe
- 03Sektions-LayoutAufgabe
- 04Card-LayoutAufgabe
- 05Den letzten Schliff hinzufügenAufgabe
Erstellen mit CSS Grid
4 Lektionen426- 01Grid-GrundlagenAufgabeQuiz
- 02Grid-row ElementplatzierungAufgabeQuiz
- 03Benannte BereicheAufgabeQuiz
- 04Wiederholungs-ChallengeAufgabe
Flavor Fiesta Website
4 Lektionen4- 01Das Grid einrichtenAufgabe
- 02HeaderAufgabe
- 03Der HauptteilAufgabe
- 04FooterAufgabe
Abschluss-Herausforderungen
5 Lektionen5- 01Aktives Menü hervorhebenAufgabe
- 02Zebra-TabellenzeilenAufgabe
- 03Button-Hover-EffektAufgabe
- 04Grid-Card-LayoutAufgabe
- 05Verschwommenes Hero-ImageAufgabe
Abschnitt 4
Practical Frontend
Abschnitt startenStartenAusklappenEinklappenCombine structure and style to design complete, responsive web pagesVariablen
5 Lektionen432- 01VariablenQuiz
- 02CSS-Variablen verwendenAufgabeQuiz
- 03Variablen für Design TokensAufgabeQuiz
- 04Lokale VariablenAufgabeQuiz
- 05Wiederholungs-ChallengeAufgabe
Mobile-First-Strategie
6 Lektionen643- 01Was „Mobile-First“ bedeutetAufgabeQuiz
- 02Mobile-First-TypografieAufgabeQuiz
- 03Mobile-First-NavigationAufgabeQuiz
- 04Mobile-First-BilderAufgabeQuiz
- 05Mobile-First-FormulareAufgabeQuiz
- 06Wiederholungs-ChallengeAufgabe
Theming & Visuelle Stile
5 Lektionen535- 01Theming in CSSAufgabeQuiz
- 02Dark/Light Mode GrundlagenAufgabeQuiz
- 03Akzentfarben & HervorhebungAufgabeQuiz
- 04Typografie-ThemingAufgabeQuiz
- 05Recap-ChallengeAufgabe
Extremsport
3 Lektionen3- 01VariablenAufgabe
- 02Mobile-FirstAufgabe
- 03ThemingAufgabe
UI-Komponenten
6 Lektionen642- 01Dropdown-MenüAufgabeQuiz
- 02TabsAufgabeQuiz
- 03BadgesAufgabeQuiz
- 04TooltipsAufgabeQuiz
- 05BenachrichtigungsbannerAufgabeQuiz
- 06Wiederholungs-ChallengeAufgabe
Responsive Muster
6 Lektionen645- 01Holy-Grail-LayoutAufgabeQuiz
- 02Card-Grid-LayoutAufgabeQuiz
- 03Sidebar + Content LayoutAufgabeQuiz
- 04Split-Screen-LayoutAufgabeQuiz
- 05Sticky Header / FooterAufgabeQuiz
- 06Recap-ChallengeAufgabe
Abschlussherausforderungen
4 Lektionen4- 01ProfilkarteAufgabe
- 02Schokoladengalerie-RasterAufgabe
- 03Sieben WeltwunderAufgabe
- 04Neue sieben WeltwunderAufgabe
Abschnitt 5
JavaScript in Action
Abschnitt startenStartenAusklappenEinklappenExplore how javascript is used with html and cssInteraktivität/UI-Komponenten
4 Lektionen433- 01TabsAufgabeQuiz
- 02Akkordeon (aufklappen/zuklappen)AufgabeQuiz
- 03Modal (öffnen/schließen)AufgabeQuiz
- 04DropdownAufgabeQuiz
Formulare & Validierung
3 Lektionen324- 01EingabevalidierungAufgabeQuiz
- 02Benutzerdefinierte FehlermeldungenAufgabeQuiz
- 03Submit-ButtonsAufgabeQuiz
Benachrichtigungen & Feedback
3 Lektionen327- 01Toast-NachrichtAufgabeQuiz
- 02Schließbare BannerAufgabeQuiz
- 03LadeanzeigenAufgabeQuiz
Formular mit Toast-Benachrichtigung
2 Lektionen2- 01Die Toast-Nachricht anzeigenAufgabe
- 02Die Toast-Nachricht ausblendenAufgabe
Navigation
3 Lektionen329- 01Mobiles Burger-Menü umschaltenAufgabeQuiz
- 02Ausklappbare SeitennavigationAufgabeQuiz
- 03Dropdown-MenüsAufgabeQuiz
Theming & Personalisierung
2 Lektionen217- 01Dark/Light ThemesAufgabeQuiz
- 02Theme-Auswahl speichernAufgabeQuiz
Animationen & Effekte
3 Lektionen327- 01CSS-TransitionsAufgabeQuiz
- 02Elemente beim Scrollen animierenAufgabeQuiz
- 03Button-Klick-AnimationenAufgabeQuiz
Animierte Navigation
3 Lektionen36- 01VariablenAufgabeQuiz
- 02Event-ListenerAufgabe
- 03CSS-TransitionAufgabe
Abschluss-Herausforderungen
4 Lektionen4- 01Interaktives FAQ-AkkordeonAufgabe
- 02Login-FormularAufgabe
- 03Responsive NavbarAufgabe
- 04Blog-Seite mit ThemeAufgabe
HTML-Kurse
Praktische HTML-Kurse, kostenlos im Browser zu starten.
Sonnenfinsternis-Animation | HTML/CSS Projekt
BeliebtIn diesem Kurs erstellst du eine beeindruckende „Sonnenfinsternis“-Animation. Erfahre, wie man mit Animationen ansprechende und funktionale Benutzeroberflächen gestaltet.
- 10
- 2
HTML/CSS Herausforderungen - Paket I
BeliebtDieser Kurs wird dein Wissen über HTML und CSS auf unterhaltsame und effektive Weise herausfordern!
- 11
YouTube Video-Player - HTML-Projekt
In diesem Projekt erstellst du einen YouTube Video-Player mit HTML und lernst dabei verschiedene Attribute kennen.
- 7
- 1
DOM-Projekt - Taschenrechner
In diesem Kurs baust du einen einfachen interaktiven Taschenrechner mit HTML, CSS und JS.
- 14
- 3
Instagram-Clone | Front-End-Projekt
In diesem Kurs übst du standardmäßige und einfache HTML & CSS Ansätze und erstellst ein eigenes Instagram-Clone-Projekt.
- 16
- 5
3D-Karte | Front-end-Projekt
In diesem Projekt wirst du selbst ein 3D-Kartendesign erstellen!
- 31
- 4
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.
