In Woche 4 der Challenge lernst du, echte UI-Komponenten zu bauen – vom interaktiven Dropdown-Menü bis zur vollständigen Hero Section mit Navigationsleiste, Bild und Call-to-Action. Der Schlüssel ist zu verstehen, dass jede Webseite einen klaren Zweck hat, und dein Design muss diesen Zweck direkt unterstützen.
Die Projekte: Dropdown-Menü und Hero Section
Woche 4 hat direkt mit einem neuen Projekt gestartet. An Tag 22 war das Ziel, ein Dropdown-Menü zu bauen. Wenn du mit der Maus über einen Link in der Navigationsleiste hoverst, soll ein kleines Untermenü aufklappen. Klingt simpel, aber genau solche Aufgaben zeigen dir, ob du das Gelernte auch wirklich anwenden kannst.
Tag 23 folgte mit einer kompletten Hero Section: Navigationsleiste oben, Hintergrundbild, Überschrift, Text und ein Call-to-Action-Button. An diesem Punkt kommt auch ein wichtiger Grundsatz: Jede Webseite braucht einen Zweck. Ein Online-Shop will verkaufen, ein Restaurant will Reservierungen, ein Portfolio will Arbeitgeber überzeugen. Dementsprechend gehört auf jede Seite ein klar sichtbarer Button mit einer Handlungsaufforderung. Das ist kein Design-Detail, das ist Grundprinzip.
JavaScript: Dein Einstieg in dynamische Webseiten
Ab Tag 24 kam JavaScript ins Spiel. Der klassische Einstieg: Hello World mit console.log und alert. Der Unterschied ist einfach: console.log schreibt in die Entwicklerkonsole, die du mit F12 im Browser öffnest. alert zeigt ein Popup an. Beides klingt nach wenig, aber du hast damit zum ersten Mal eine Webseite mit echtem Code zum Leben erweckt.
Wichtig für den Alltag: JavaScript solltest du immer in eine externe Datei auslagern und per <script src="..."> einbinden. Wenn du das Script im <head> deiner Seite einbindest, wird es ausgeführt, bevor der Rest der Seite geladen ist. Das kann zu Fehlern führen. Lösung: Entweder das Script ans Ende des <body> setzen oder das defer-Attribut nutzen. Das lässt das Script laden, aber erst nach dem HTML ausführen.
Tag 25 brachte dann Variablen mit let und const sowie Funktionen. Kleine aber wichtige Unterschiede: const für Werte, die sich nicht ändern, let für alles andere.
DOM, Events und dynamische Inhalte
Tag 26 war ein echter Schlüsselmoment: das Document Object Model, kurz DOM. Das DOM ist die Schnittstelle, über die JavaScript mit deinem HTML kommuniziert. Mit getElementById greifst du Elemente anhand ihrer ID an, mit querySelector kannst du alle CSS-Selektoren nutzen, die du schon kennst. Einmal ausgewählt, kannst du Texte ändern, Bilder austauschen, Klassen hinzufügen. Die Webseite reagiert plötzlich auf dich.
Tag 27 ging noch einen Schritt weiter: Elemente nicht nur verändern, sondern neu erstellen. Mit createElement baust du neue HTML-Elemente direkt in JavaScript, mit append hängst du sie in dein bestehendes HTML. Das fühlt sich am Anfang abstrakt an, aber genau so funktionieren moderne Webanwendungen.
Tag 28 war Events. Wenn ein Nutzer auf einen Button klickt, mit der Maus hovert oder eine Taste drückt, feuert ein Event. Mit onclick und onmouseover hast du die ersten beiden kennengelernt. Du kannst einem Button sagen: “Wenn jemand auf dich klickt, ruf diese Funktion auf.” Das ist der Grundbaustein für jede interaktive Webseite.
Wenn du dein Wissen in diesen Bereichen vertiefen willst, schau dir den Frontend Fundamentals Kurs von DevKarriere an. Dort wird genau dieser Bereich systematisch aufgebaut.
VS Code Tipps, die dich sofort schneller machen
Neben den Inhalten gab es in Woche 4 auch ein paar Praxistipps für VS Code. Den größten Zeitgewinn bringt die Erweiterung ES7+ React Redux React Native Snippets. Ein Snippet ist eine Abkürzung: Statt console.log auszuschreiben tippst du einfach clg und drückst Tab. Das klingt nach wenig, aber im Alltag sparst du damit erstaunlich viel Zeit.
Zweite Empfehlung: Prettier. Das ist ein Code-Formatter, der deinen Code bei jedem Speichern automatisch sauber formatiert. Egal wie chaotisch dein HTML oder JavaScript gerade aussieht, Strg+S und alles ist wieder ordentlich eingerückt. Pflicht für jeden, der ernsthaft coden will.
Dann noch zwei optionale, aber schöne Ergänzungen: Das Material Icon Theme gibt deinen Dateien im Explorer aussagekräftige Icons. Das Night Owl Theme sorgt für ein dunkles, angenehmes Editor-Design. Keine Pflicht, aber du wirst viel Zeit in VS Code verbringen. Es lohnt sich, sich dort wohlzufühlen.
Häufige Fragen
Was ist der Unterschied zwischen console.log und alert in JavaScript?
console.log gibt Text in der Entwicklerkonsole aus, die du mit F12 im Browser öffnest. Das sieht nur du als Entwickler. alert erzeugt ein sichtbares Popup-Fenster im Browser, das auch normale Nutzer zu sehen bekommen. console.log nutzt du vor allem zum Debuggen, alert eher für schnelle Tests.
Warum sollte JavaScript nicht einfach im <head> stehen?
Wenn der Browser dein HTML lädt, liest er es von oben nach unten. Ein Script im <head> wird ausgeführt, bevor das restliche HTML gelesen wurde. Greift dein Script auf ein Element zu, das noch nicht existiert, gibt es einen Fehler. Setz dein Script ans Ende des <body> oder nutze das defer-Attribut, dann läuft alles in der richtigen Reihenfolge.
Für wen ist die 31-Tage-Challenge geeignet?
Die Challenge richtet sich an alle, die gerade mit HTML und CSS angefangen haben und jetzt einen strukturierten Einstieg in JavaScript suchen. Du brauchst keine Vorkenntnisse außer den Grundlagen aus den ersten Wochen. Wenn du überlegst, ob ein kompletter Berufswechsel in die IT für dich in Frage kommt, findest du beim DevKarriere Fullstack Web Developer Kurs mehr Informationen dazu.