Dein Lernpfad 🧭

Vom Block-Bäcker zum echten Software-Entwickler. Arbeite dich Quest für Quest nach oben.

Gesamtfortschritt0% geschafft

🧩 Grundlagen

🧩 Quest 1: Der Block-Bäcker (Level 1)

Lerne die Grundlagen von Webseiten kennen und baue deine erste eigene Seite spielerisch mit bunten Blöcken!

👋 Los geht's

👋

Willkommen!

Wie diese Plattform funktioniert – und wie du am besten lernst.

Starten

🌐 Internet-Basics

🌐

Wie funktioniert das Internet?

Browser, Webseiten, Server – einfach erklärt, zum Mitmachen.

Starten

🏆 Hauptprojekt · Mit Aufgaben

🍕

🏆 Hauptprojekt: Die Rezept-Seite

Baue dein Lieblingsgericht im Block-Studio

1Schritt 1: Titel-Box mit Überschrift & Bild

2Schritt 2: Die Zutaten-Liste

3Schritt 3: Die Zubereitung (mit Nummern)

Projekt starten

✍️ Quest 2: Der Code-Schreiber (Level 2)

Schluss mit Blöcken! Du schreibst jetzt echte HTML-Tags von Hand und benutzt Inline-Styles, um alles bunt zu machen.

🧱 HTML von Hand schreiben

🧱

Was ist HTML?

Die geheime Bauanleitung, aus der jede Webseite der Welt besteht.

Starten

🏷️

Elemente & Tags

Wie wir Texten Schilder aufkleben, damit der Browser sie versteht.

Starten

🏗️

Die Grundstruktur

Das magische Grundgerüst, das jede Webseite braucht.

Starten

✍️

Überschrift & Absatz

Wie du mit fetten Schlagzeilen die Aufmerksamkeit fesselst.

Starten

📋

Listen im Griff

Bändige das Chaos mit Aufzählungspunkten.

Starten

📦

Container mit <div>

Wie du mehrere Elemente zu einer Gruppe zusammenpackst.

Starten

🏷️

Attribute: class, id & style

Wie du einem Element Extra-Infos gibst – die Brücke zu CSS.

Starten

🖼️

Bilder einfügen

Wie du deine Seite mit Grafiken und Memes zum Strahlen bringst.

Starten

🔗

Das World Wide Web verknüpfen

Erschaffe Brücken zu anderen Webseiten mit echten Links.

Starten

🎨 CSS: schön gestalten

🎨

Was ist CSS?

Womit du deine Seite bunt und schön machst.

Starten

✏️

Inline-Styles: dein erster Style

CSS direkt an ein Element schreiben.

Starten

➕

Mehrere Styles auf einmal

Mehrere Eigenschaften mit Semikolon trennen.

Starten

📋

Das Stylesheet & der Tag-Selektor

Der saubere Profi-Weg: CSS gesammelt an einem Ort.

Starten

🎫

Der Class-Selektor

Genau die Elemente stylen, die du willst.

Starten

🪪

Der Id-Selektor

Ein einzelnes, ganz bestimmtes Element ansprechen.

Starten

🌈

Farben: color & background

Text- und Hintergrundfarben gezielt setzen.

Starten

📏

Wie breit? width & max-width

Die Breite einer Box bestimmen.

Starten

📦

Abstände: padding & margin

Luft innen und außen für deine Boxen.

Starten

↔️

Text ausrichten: text-align

Text links, mittig oder rechts.

Starten

🧱

Anordnen mit Flexbox

Elemente sauber unter- oder nebeneinander.

Starten

🏆 Hauptprojekt · Mit Aufgaben

🐺

🏆 Hauptprojekt: Die Tier-Akte

Erschaffe einen bunten Steckbrief über ein Tier

1Schritt 1: Das Gerüst bauen (HTML-Tab)

2Schritt 2: Alle Boxen breit machen (CSS-Tab)

3Schritt 3: Box 1 färben (Inline-Style)

4Schritt 4: Box 2 färben (id-Selektor)

5Schritt 5: Box 3 färben (class)

6Schritt 6: Die Liste aufräumen (Flexbox)

Projekt starten

⚡ Quest 3: Der Logik-Meister (Level 3)

Kombiniere komplexes HTML, Inline-CSS und erwecke deine Seite mit echtem JavaScript im <script>-Tag zum Leben!

🟨 JavaScript & Scripts

⚡

Was ist JavaScript?

Womit deine Seite etwas TUN kann.

Starten

📜

Wo JavaScript wohnt

Der <script>-Block und der JavaScript-Tab.

Starten

🖱️

Auf einen Klick reagieren

Ein Knopf, der eine Nachricht auslöst.

Starten

🎨

Die Seite verändern

JavaScript kann mehr als Fenster – es verändert die Seite live.

Starten

🙋

Die Seite stellt eine Frage

Mit prompt() den Nutzer fragen und persönlich antworten.

Starten

🏆 Hauptprojekt · Mit Aufgaben

🚨

🏆 Hauptprojekt: Die Alarm-Zentrale

Ein interaktiver Button, der eine JavaScript-Aktion auslöst

1Schritt 1: Die Zentrale aufbauen

2Schritt 2: Der Alarm-Knopf

3Schritt 3: Zum Leben erwecken

Projekt starten

🧠 Fortgeschrittener Part

🚀 Quest 1: Der nächste Schritt

🚧 In Bearbeitung

Hier geht deine Reise weiter – mit fortgeschrittenen Themen für echte Web-Profis. Wir basteln noch fleißig daran!