HTML Lernen: Programmieren
HTML Lernen: Programmieren — Ein HTML-Kurs mit Live-Vorschau-Editor für unterwegs
HTML Lernen: Programmieren ist ein HTML-Kurs für iPhone und Android, der dir in jeder Lektion mit nur einem Tipp einen HTML-Editor mit Live-Vorschau zur Verfügung stellt. Gib ein Tag ein, sieh dir an, wie die Seite gerendert wird, und arbeite dich von der ersten Überschrift über Formulare und Tabellen bis hin zu semantischem HTML5, Barrierefreiheit und Webkomponenten vor – in 40 kurzen Kursen.
- Preis
- Kostenlos, Pro-Upgrade
- Plattformen
- iOS und Android
- Sprachen
- 22
- Altersfreigabe
- 4+
- Erfordert
- iOS 15.1 oder neuer
- App Store
- 3.0 ★ (1)
Ein Tag bedeutet mehr, wenn du gesehen hast, wie es etwas darstellt.
HTML ist eine Auszeichnungssprache. Deshalb verstehst du ein neues Element am schnellsten, indem du es eingibst und dir das Ergebnis ansiehst. Jede Lektion in dieser App endet mit dem bereits geöffneten Editor. Neben deinem Markup siehst du die Vorschau, und CSS- oder JavaScript-Dateien fügst du erst hinzu, wenn du bereit dafür bist.
Was es ist
HTML Lernen: Programmieren ist ein kostenlos startbarer HTML-Kurs für iOS und Android, der dir in 40 Kursen und 159 kurzen Lektionen das Markup von Webseiten vermittelt – geordnet vom Anfängerniveau (A1) bis zum fortgeschrittenen Niveau (C1). Jedes Thema wird mit einem integrierten HTML-Code-Editor und einer sofortigen Vorschau verbunden. Dazu kommen 20 geführte Projekte wie ein Kontaktformular und eine barrierefreie Preistabelle, 20 Debugging-Missionen und ein KI-Mentor. So gelangst du auch als kompletter Anfänger von einem leeren Dokument zu semantischen, barrierefreien und gut strukturierten Seiten.
In der App
So sieht es aus
Der Kurs
Das behandelt der HTML-Kurs
40 Kurse und 159 Lektionen aus der kurseigenen Liste der App – in der Reihenfolge, in der sie der Lernpfad vermittelt.
Dokumentstruktur, Text, Links, Bilder und Listen
Das Grundgerüst jeder Seite: die Dokumentstruktur, Überschriften und Absätze, Links und Navigation, Bilder und Abbildungen sowie nummerierte und nicht nummerierte Listen.
Tabellen, Attribute und globale Attribute
Daten in Tabellen anordnen und anschließend die Attribute kennenlernen, mit denen du ein Element anpasst – einschließlich der globalen Attribute, die für jedes Tag funktionieren.
Formulare: Grundlagen, erweiterte Steuerelemente und Validierung
Zuerst grundlegende Eingabefelder, dann umfangreichere Steuerelemente und anschließend die Validierungsattribute, mit denen der Browser ein Feld vor dem Absenden prüfen kann.
Semantisches HTML5, Head und Metadaten, Audio und Video
Semantische Elemente, der Head des Dokuments und seine Metadaten sowie die Audio- und Videoelemente.
Barrierefreiheit, ARIA-Rollen und fortgeschrittene ARIA-Muster
Grundlagen der Barrierefreiheit, ARIA-Rollen und -Attribute sowie fortgeschrittene Muster für benutzerdefinierte Widgets.
Datenattribute, Templates, Canvas, SVG und iframes
Benutzerdefinierte Datenattribute, HTML-Templates, das Canvas-Element, SVG in HTML und eingebettete Inhalte in iframes.
Web Storage, Drag-and-drop, SEO und E-Mail-Templates
Web Storage und die Drag-and-drop-API, SEO- und Social-Meta-Tags sowie die besonderen Regeln für HTML-E-Mail-Templates.
Web Components, Performance und HTML im großen Maßstab
Benutzerdefinierte Elemente, das Shadow DOM, Import Maps und Progressive Enhancement sowie Performance, Sicherheit, PWAs und Testing – bis hin zu HTML im großen Maßstab.
So funktioniert es
So lernst du ein Tag – vom Lesen bis zum Rendern
Eine Lektion ist kurz, und der Editor befindet sich direkt daneben. So kannst du ein Konzept lesen und es in derselben Sitzung ausprobieren.
Lies eine kurze Lektion
Setze den Lernpfad dort fort, wo du aufgehört hast. Jede Lektion behandelt eine einzelne Idee, etwa eine ungeordnete Liste oder ein Bild mit alt-Text, und dauert nur wenige Minuten.
Gib es im Editor ein und sieh dir die Vorschau an
Öffne den Editor und schreibe das Markup. Die Vorschau zeichnet deine Seite neu, und die Tabs für CSS und JavaScript stehen bereit, wenn du die Seite gestalten oder auf Eingaben reagieren lassen möchtest.
Prüfe es, behebe Fehler und baue damit
Ein Quiz und eine Coding-Challenge schließen jedes Thema ab. Wenn ein Tag oder ein Fehler unklar ist, erklärt ihn dir der KI-Mentor. Eine Debugging-Mission gibt dir eine fehlerhafte Seite zur Reparatur, und in einem geführten Projekt erstellst du etwas, das du zeigen kannst.
Was steckt drin
Das erwartet dich in Learn HTML
40
Kurse von A1 bis C1
159 Lektionen führen von Dokumentstruktur, Text, Links, Bildern und Listen über Tabellen, Formulare und semantisches HTML5 bis hin zu Barrierefreiheit, Webkomponenten, Sicherheit sowie der History and Navigation API.
Live
HTML-Editor mit Vorschau
Schreibe Markup und sieh zu, wie sich die gerenderte Seite aktualisiert. Du kannst CSS- und JavaScript-Dateien zum selben Projekt hinzufügen, sodass aus einem einfachen Dokument eine kleine funktionierende Website wird.
20
Geführte Projekte
Schritt-für-Schritt-Projekte, darunter eine Rezeptbox-Seite, ein Kontaktformular, eine Fotogalerie, eine Navigationsleiste und eine barrierefreie Preistabelle.
20
Debugging-Missionen
Echte Fehler, die du aufspüren musst: ein Anmeldeformular, das nichts sendet, ein Label, das niemand antippen kann, oder eine Seite, die auf einem Smartphone verkleinert geladen wird.
80
Tag-Spickzettel
Eine Übersicht mit 80 HTML-Tags, -Elementen und -Attributen für den Moment, in dem du weißt, was du suchst, aber nicht, wie es heißt.
50
Interviewfragen
Fünfzig Interviewfragen für Webentwickler mit klaren Antworten sowie eine Code-Bibliothek mit kurzen Beispielen, die du öffnen und bearbeiten kannst, und ein Bereich zum Speichern deiner eigenen Codes und Notizen.
Hintergrund
Was ist HTML, und kannst du es durch Tippen auf dem Smartphone lernen?
HTML (HyperText Markup Language) ist die Sprache, die die Struktur einer Webseite beschreibt: welcher Text eine Überschrift ist, welcher ein Absatz, wohin ein Link führt und wonach ein Formular fragt. Es ist keine Programmiersprache. Du musst dich also nicht mit Schleifen oder Variablen herumschlagen, weshalb HTML meist der erste Schritt in die Webentwicklung ist. Da das Ergebnis sofort sichtbar wird, sobald du etwas schreibst, eignet sich HTML gut für kurze Lerneinheiten auf dem Smartphone: Ein Tag ist klein genug, um es mit dem Daumen einzugeben, und eine Vorschau zeigt sofort, ob es funktioniert hat.
Elemente, Tags und Attributedie drei Wörter, die in jeder Lektion vorkommen
Ein Element ist ein bedeutungstragender Inhaltsbaustein, der zwischen einem öffnenden und einem schließenden Tag steht, zum Beispiel ein Absatz oder ein Listeneintrag. Attribute stehen im öffnenden Tag und passen es an, etwa die Adresse, auf die ein Link verweist, oder der Text, der ein Bild beschreibt. Fast jeder Anfängerfehler ist ein fehlendes schließendes Tag oder ein falsch platziertes Attribut.
Semantisches HTMLÜberschriften, Navigation, Hauptinhalt und Footer
Semantische Elemente geben an, was ein Bereich der Seite ist, statt zu beschreiben, wie er aussieht. Eine Navigationsleiste, ein Artikel und ein Footer haben jeweils ihr eigenes Element. Das hilft Screenreadern, Suchmaschinen und allen, die die Seite später bearbeiten müssen. Diese Gewohnheit unterscheidet eine aufgeräumte Seite von einem Haufen allgemeiner Container.
HTML, CSS und JavaScriptwer was macht
HTML enthält die Struktur und den Inhalt, CSS steuert das Aussehen dieser Inhalte, und JavaScript fügt Verhalten hinzu, etwa die Reaktion auf einen Klick. Wenn du zuerst HTML lernst, haben die anderen beiden etwas, woran sie anknüpfen können. Der Editor in der App bietet separate Tabs für HTML, CSS und JavaScript, sodass du die drei Aufgaben von Anfang an getrennt halten kannst.
Formulare und Barrierefreiheitwo einfache Seiten ernst werden
Über Formulare kann eine Seite beliebige Angaben von Besuchern abfragen. Gleichzeitig beginnen hier die meisten Barrierefreiheitsprobleme: ein Label, das niemand antippen kann, oder ein Feld, das ein Screenreader nicht benennen kann. Labels, Validierungsattribute und ARIA-Rollen sind kleine Markup-Bausteine, die darüber entscheiden, ob eine Seite für alle funktioniert.
Passend
Für wen es geeignet ist – und für wen nicht
Es passt zu dir, wenn du
- Du schreibst deine erste Webseite und möchtest jedes Tag erklärt bekommen, bevor du es verwendest
- Du lernst am besten, wenn du das Ergebnis jeder Zeile sofort sehen kannst
- Du betreibst einen Blog, eine Shopseite oder ein Portfolio und möchtest das dahinterliegende Markup bearbeiten
- Du möchtest als Nächstes CSS, JavaScript oder Frontend-Entwicklung lernen und vorher solide Grundlagen schaffen
- Du bereitest dich auf ein Vorstellungsgespräch als Webentwickler vor und möchtest Fragen zum Üben haben
Du bist hier nicht richtig, wenn du
- Du brauchst einen vollständigen Desktop-Workflow mit Dateien, Ordnern und einem lokalen Server
- Du erwartest, dass jeder Kurs kostenlos ist: Der erste Kurs, das erste geführte Projekt und zwei Missionen sind kostenlos, mit Pro wird der Rest freigeschaltet
- Du schreibst bereits täglich HTML für produktive Projekte und möchtest eher ein Nachschlagewerk als einen Kurs
- Du möchtest ein Designtool lernen – hier geht es um Markup und den Code hinter Webseiten
Fragen
Häufig gestellte Fragen
Was ist HTML Lernen: Programmieren?
HTML Lernen: Programmieren ist eine App für iPhone und Android, die HTML vom ersten Tag bis hin zu fortgeschrittenen Themen vermittelt. Sie kombiniert 40 kurze Kurse mit einem integrierten HTML-Editor und einer Live-Vorschau, 20 geführten Projekten, 20 Debugging-Missionen und einem KI-Mentor. Du kannst kostenlos beginnen; die App ist in 22 Sprachen verfügbar.
Kann ich HTML wirklich auf einem Smartphone schreiben und in der Vorschau anzeigen?
Ja. Der Editor in HTML Lernen: Programmieren verfügt über Tabs für HTML, CSS und JavaScript. In der Vorschau siehst du die Seite, die dein Markup erzeugt. Ein Smartphone eignet sich gut für das konzentrierte Üben, das HTML erfordert, da die Tags kurz sind. Ein größerer Bildschirm wird erst nützlich, wenn du gleichzeitig mit vielen Dateien arbeitest.
Brauche ich vor dem Start Programmiererfahrung?
Nein. Der Lernpfad beginnt damit, wie ein HTML-Dokument aufgebaut ist, und erklärt jeden Begriff in verständlicher Sprache, bevor er verwendet wird. HTML hat keine Schleifen oder Variablen, die du zuerst lernen musst. Deshalb behandelt HTML Lernen: Programmieren absolute Anfänger als Normalfall und nicht als Ausnahme.
Was ist der Unterschied zwischen HTML und CSS?
HTML legt fest, was auf der Seite steht und welche Bedeutung die einzelnen Teile haben, etwa eine Überschrift, ein Link oder ein Formularfeld. CSS bestimmt das Aussehen, einschließlich Farben, Abständen und Layout. Die App vermittelt zuerst HTML und ermöglicht dir, CSS-Dateien im Editor hinzuzufügen. So siehst du, wie beide zusammenarbeiten, ohne ihre Aufgaben zu vermischen.
Wie lange dauert es, die HTML-Grundlagen zu lernen?
Die meisten können nach einigen kurzen Lerneinheiten eine einfache, korrekte Seite schreiben, denn die grundlegenden Elemente sind überschaubar: Überschriften, Absätze, Links, Bilder, Listen und einfache Formulare. Umfangreichere Themen wie Barrierefreiheit, semantische Struktur und Web Components brauchen länger. Die Lektionen sind so gestaltet, dass du sie in wenigen Minuten abschließen kannst – eine tägliche Lernroutine ist also realistisch.
Welche Arten von Projekten kann ich in der App erstellen?
Zu den 20 geführten Projekten gehören eine Rezeptbox-Seite, ein Kontaktformular, eine Fotogalerie, eine Navigationsleiste und eine barrierefreie Preistabelle. Jedes Projekt wird Schritt für Schritt erstellt. Sie sind bewusst klein gehalten, damit du sie abschließt und den Code in deinen gespeicherten Snippets behältst.
Behandelt Learn HTML auch Barrierefreiheit und Formulare?
Ja, und zwar ausführlich. Die Formulare sind auf drei Kurse verteilt und behandeln Grundlagen, erweiterte Steuerelemente und Validierungsattribute. Für Barrierefreiheit gibt es eigene Kurse zu den Grundlagen, ARIA-Rollen und fortgeschrittenen ARIA-Mustern. Auch die Debugging-Missionen enthalten Fehler wie ein Label, das niemand antippen kann. Dadurch werden diese Themen praktisch statt abstrakt vermittelt.
Ist die App kostenlos, und was bietet Pro zusätzlich?
Du kannst die App kostenlos herunterladen und sofort beginnen: Der erste Kurs, das erste geführte Projekt, zwei Missionen und der Live-Editor sind enthalten, ebenso ein tägliches Kontingent für den KI-Mentor. Mit Pro werden alle Kurse, Projekte und Missionen, die Zertifikatsprüfung und unbegrenzt viele Fragen an den KI-Mentor freigeschaltet. Außerdem wird die Werbung entfernt.
Loslegen
Gib dein erstes Tag ein und sieh zu, wie es gerendert wird
Kostenloser Einstieg auf iOS und Android in 22 Sprachen.
Mehr von CoddyKit
Verfügbar auf iOS und Android.