BeliebtJourney
HTML lernen
Lerne HTML von Grund auf mit einem kostenlosen interaktiven Online-Kurs. Übe Dokumentstruktur, semantische Tags, Links, Formulare, Bilder und grundlegende Barrierefreiheit mit praktischen Aufgaben, echten Projekten, KI-Hinweisen und einem Zertifikat zum Abschluss.
249,002+ codders eingeschrieben
Diese Journey enthält
KI-gestützte Coding-Hilfe
Praktische, interaktive Lektionen
Audio-Erzählung in jeder Lektion
Quizfragen zum Wissenstest
Kostenloses Abschlusszertifikat
Lehrplan
5 Abschnitte241 Lektionen212 Aufgaben1,203 Quizfragen01Abschnitt 1
Fundamentals
Learn the core structure and syntax to create web pages from scratchMIT DEM LERNEN BEGINNENHTML-Grundlagen
5 Lektionen531- 01Was ist HTML?Aufgabe
- 02Grundstruktur von HTMLAufgabeQuizAudio
- 03Tags und ElementeAufgabeQuizAudio
- 04Verschachtelung und schließende TagsAufgabeQuizAudio
- 05Kommentare in HTMLAufgabeQuizAudio
Text und Formatierung
6 Lektionen1137- 01ÜberschriftenAufgabeMeisterungQuizAudio
- 02AbsätzeAufgabeMeisterungQuizAudio
- 03ZeilenumbrücheAufgabeMeisterungQuizAudio
- 04Fetter und kursiver TextAufgabeMeisterungQuizAudio
- 05Nochmals fett und kursivAufgabeMeisterungQuizAudio
- 06Wiederholung – FormatierungAufgabe
Arbeiten mit Listen
4 Lektionen721- 01Ungeordnete ListeAufgabeMeisterungQuizAudio
- 02Geordnete ListeAufgabeMeisterungQuizAudio
- 03Verschachtelte ListenAufgabeMeisterungQuizAudio
- 04Zusammenfassung – ListenAufgabe
Rezeptkarte
Projekt4 Lektionen1- 01ProjektübersichtAufgabe
- 02Rezepttitel und BeschreibungProjekt
- 03ZutatenProjekt
- 04SchritteProjekt
Inhalte hinzufügen
5 Lektionen837- 01HTML-AttributeQuizAudio
- 02LinksAufgabeMeisterungQuizAudio
- 03Links zu neuen SeitenAufgabeMeisterungQuizAudio
- 04BilderAufgabeMeisterungQuizAudio
- 05Bild-AttributeAufgabeMeisterungQuizAudio
Seitenlayout
5 Lektionen931- 01Bereiche (Divisions)AufgabeMeisterungQuizAudio
- 02Inline-SpansAufgabeMeisterungQuizAudio
- 03Semantische TagsAufgabeMeisterungQuizAudio
- 04Sections und ArticlesAufgabeMeisterungQuizAudio
- 05Zusammenfassung – LayoutAufgabe
Persönliche Profilseite
Projekt5 Lektionen1- 01ProjektübersichtAufgabe
- 02Header-BereichProjekt
- 03ProfilbildProjekt
- 04Über-mich-BereichProjekt
- 05Social LinksProjekt
Formulare und Eingaben Teil 1
6 Lektionen937- 01Formular-GrundlagenQuizAudio
- 02TexteingabenAufgabeMeisterungQuizAudio
- 03Input-AttributeAufgabeMeisterungQuizAudio
- 04PasswortfeldAufgabeMeisterungQuizAudio
- 05Labels für EingabenAufgabeMeisterungQuizAudio
- 06Zusammenfassung – Einfaches FormularAufgabe
Formulare und Eingaben Teil 2
7 Lektionen1239- 01Radio-ButtonsAufgabeMeisterungQuizAudio
- 02CheckboxenAufgabeMeisterungQuizAudio
- 03DropdownsAufgabeMeisterungQuizAudio
- 04ButtonsAufgabeMeisterungQuizAudio
- 05Buttons in FormularenAufgabeMeisterungQuizAudio
- 06Wiederholung - Formulare #1Aufgabe
- 07Wiederholung - Formulare #2Aufgabe
Tabellen
4 Lektionen725- 01Tabellen-GrundlagenAufgabeMeisterungQuizAudio
- 02Beschriftungen hinzufügenAufgabeMeisterungQuizAudio
- 03Zeilen und Spalten verbindenAufgabeMeisterungQuizAudio
- 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
02Abschnitt 2
Styling with CSS
Bring your web pages to life with colors, layouts, and stylesMIT DEM LERNEN BEGINNENEinfü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
03Abschnitt 3
CSS Mastery
Take you css skills to the next level!MIT DEM LERNEN BEGINNENSelektoren-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
04Abschnitt 4
Practical Frontend
Combine structure and style to design complete, responsive web pagesMIT DEM LERNEN BEGINNENVariablen
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
05Abschnitt 5
JavaScript in Action
Explore how javascript is used with html and cssMIT DEM LERNEN BEGINNENInteraktivität/UI-Komponenten
4 Lektionen433- 01TabsAufgabeQuiz
- 02Akkordeon (aufklappen/zuklappen)AufgabeQuiz
- 03Modal (öffnen/schließen)AufgabeQuiz
- 04DropdownAufgabeQuiz
Formulare & Validierung
3 Lektionen325- 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
Warum HTML mit Coddy lernen
- Kostenloser Online-Kurs für HTML: keine Installation, keine Tool-Konfiguration, keine Einstiegshürde. Öffne den Browser und übe ab der ersten Lektion.
- HTML-Lektionen, die weiter gehen als ein Tutorial: jedes Konzept wird mit einer Aufgabe verbunden, in der du echten Code schreibst.
- KI-Hinweise helfen dir, wenn du bei einer HTML-Übung festhängst, und zeigen den nächsten Schritt, ohne die komplette Lösung zu verraten.
- Kostenloses Abschlusszertifikat für HTML, das du auf LinkedIn teilen oder deinem Lebenslauf hinzufügen kannst.
Häufige Fragen zum Lernen von HTML
Ist HTML leicht zu lernen?
Ja, du kannst mit HTML auch ohne Vorkenntnisse starten. Coddy zerlegt die Themen in kurze Übungen, damit du Syntax verstehst, Dokumentstruktur, semantische Tags, Links, Formulare, Bilder und grundlegende Barrierefreiheit übst und Schritt für Schritt sicherer wirst.
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.
Wo kann ich HTML online kostenlos lernen?
Coddy bietet einen kostenlosen Online-Kurs für HTML mit Lektionen, Coding-Aufgaben, Quizzen und Projekten. Du musst nichts installieren; alles läuft im Browser.
Wie lerne ich HTML schnell?
Am schnellsten lernst du durch tägliche Praxis. Auf Coddy wechselst du zwischen kurzer Erklärung, sofortiger Übung und Feedback mit KI-Hinweisen, statt lange Videos nur anzusehen.
Bekomme ich am Ende ein HTML-Zertifikat?
Ja. Nach Abschluss des HTML-Kurses auf Coddy erhältst du ein kostenloses Zertifikat, das du auf LinkedIn teilen oder deinem Lebenslauf hinzufügen kannst.
Was kann ich nach dem Lernen von HTML bauen?
Nach dem Kurs kannst du Webseiten, Formulare, einfache Landingpages und solide Grundlagen für CSS- und JavaScript-Projekte bauen. Außerdem hast du eine solide Grundlage für fortgeschrittene Themen.
