In der ersten Woche der Challenge packst du direkt die HTML-Grundlagen: vom Aufbau einer Seite über Texte und Bilder bis hin zu Tabellen und Listen. Jeden Tag eine kleine praktische Aufgabe statt theoretischer Ballast — du lernst, indem du selbst baust. Nach sieben Tagen hast du deine erste funktionierende Website erstellt und VS Code wie ein Profi eingerichtet.
Was du in den ersten 7 Tagen gelernt hast
Die Challenge hat dich direkt ins Wasser geworfen, im besten Sinne. Ab Tag 2 gab es täglich ein neues Thema, immer kombiniert mit einer praktischen Aufgabe zum Ausprobieren. Kein endloses Theorie-Lesen, sondern direkt selbst schreiben.
Ein kurzer Überblick über die Woche:
- Tag 2: Erste eigene HTML-Seite erstellen, Grundstruktur verstehen
- Tag 3: Head und Body, Seitentitel, Überschriften und Texte anlegen
- Tag 4: Texte, Links und Bilder einfügen
- Tag 5: HTML-Elemente mit dem
style-Attribut stylen, z. B. Textfarbe ändern - Tag 6: Tabellen anlegen, geordnete und ungeordnete Listen (OL und UL)
- Tag 7: VS Code als Editor einrichten und die Live Server Extension installieren
Das ist in einer Woche eine ganze Menge. Wer täglich drangeblieben ist, hat mehr gelernt als viele in einem Monat mit passivem Tutorial-Schauen.
VS Code einrichten: So startest du richtig
VS Code ist der Standard-Editor für Webentwicklung. Kostenlos, schnell, riesige Community. Du kannst ihn direkt auf code.visualstudio.com herunterladen. Die Seite erkennt dein Betriebssystem automatisch und schlägt den passenden Download vor.
Nach der Installation öffnest du VS Code, klickst links auf das Extension-Symbol und suchst nach Live Server. Einmal installiert, kannst du HTML-Dateien per Rechtsklick oder über “Go Live” unten rechts direkt im Browser öffnen. Das Praktische: Jede Änderung, die du mit Strg+S (Mac: Cmd+S) speicherst, wird sofort im Browser sichtbar. Kein manuelles Neu-Laden mehr.
Das klingt nach einer Kleinigkeit, gibt dir aber sofortiges Feedback auf deinen Code. Das beschleunigt das Lernen enorm.
HTML richtig strukturieren: Was du über Überschriften wissen musst
Ein Thema aus Woche 1, das viele Anfänger falsch machen: Überschriften. HTML kennt sechs Ebenen von H1 bis H6. Die H1 ist die wichtigste und sollte nur einmal pro Seite vorkommen. Sie markiert den Haupttitel der Seite, alles andere ordnet sich darunter ein.
Für den Alltag bedeutet das:
- H1: Seitentitel, einmalig pro Seite
- H2 und H3: Abschnitte und Unterabschnitte, kommen am häufigsten vor
- H4 bis H6: Selten nötig, aber vorhanden
Außerdem: Text wird auch ohne <p>-Tag im Browser angezeigt. Trotzdem solltest du es verwenden. Das <p>-Element definiert saubere Textabschnitte, macht deinen Code lesbarer und ist später beim Stylen mit CSS deutlich angenehmer.
Wer die Grundlagen von HTML und CSS strukturiert aufbauen will, findet bei den Frontend Fundamentals genau das: Schritt für Schritt, von null an.
Emmet: Schneller coden als du tippst
Einer der praktischsten Tipps aus Woche 1 war Emmet. Diese Erweiterung ist direkt in VS Code eingebaut und spart dir beim Schreiben von HTML erheblich Zeit.
Ein paar Beispiele, die du sofort nutzen kannst:
!+ Tab erstellt das komplette HTML-Grundgerüst (Doctype, Head, Body)ul+ Tab erstellt eine ungeordnete Listeli*5+ Tab erstellt gleich fünf List-Itemsul>li*5{Item $}+ Tab erstellt eine Liste mit fünf nummerierten Einträgen
Das klingt erstmal nach Geheimsprache. Nach ein paarmal Ausprobieren geht es aber schnell in Fleisch und Blut über. Statt jeden Tag dieselben Tags von Hand zu tippen, lässt du VS Code die Arbeit machen und konzentrierst dich auf den Inhalt.
Häufige Fragen
Muss ich VS Code für die Challenge verwenden?
Nein, zwingend ist es nicht. VS Code ist aber der De-facto-Standard in der Webentwicklung, kostenlos, und bringt mit Live Server und Emmet zwei Extensions mit, die gerade für Anfänger sehr praktisch sind. Es lohnt sich, gleich damit anzufangen und sich keine schlechten Gewohnheiten mit anderen Editoren anzugewöhnen.
Was ist der Unterschied zwischen OL und UL in HTML?
<ol> (Ordered List) erstellt eine nummerierte Liste, sinnvoll für Schritte oder Rankings. <ul> (Unordered List) erstellt eine Liste mit Bullet-Points, gut für Aufzählungen ohne feste Reihenfolge. Beide verwenden <li>-Elemente als einzelne Einträge.
Ich habe die ersten Tage verpasst. Kann ich noch einsteigen?
Ja. Die Challenge ist so aufgebaut, dass du die Grundlagen auch nachträglich durcharbeiten kannst. Wenn du möchtest, dass alles wirklich von null erklärt wird, kommt demnächst noch ein separates HTML-Grundlagentutorial. Wer dagegen langfristig in die Webentwicklung einsteigen will, findet im Fullstack Web Developer Kurs eine strukturierte Alternative zur Challenge.