00 – Willkommen! 🌱

Dein erster Schritt in die Welt der Webentwicklung

🪞 1. Mindset: KI als Spiegel deines Denkens

Bevor wir Code schreiben: ein wichtiger Gedanke. Viele nutzen KI heute, um Aufgaben zu lösen – ohne zu verstehen, warum die Lösung funktioniert. Das führt dazu, dass man zwar „fertig“ ist – aber nichts gelernt hat.

💡 Unsere Philosophie: KI ist ein Spiegel. Wenn du undeutlich denkst („Mach mir eine Website“), reflektiert sie Chaos. Wenn du klar denkst („Ich möchte eine Seite über Katzen mit Titel, Bild und Link“), reflektiert sie Klarheit.

🎯 2. Was erwartet dich in diesem Modul?

Die Grundidee hinter HTML und Webseiten verstehen
Deine erste HTML-Datei erstellen – mit richtiger Struktur
Lernen, wie man einen Projektordner sinnvoll organisiert
VS Code richtig nutzen – mit Live Server und Erweiterungen

📄 3. Deine erste HTML-Seite – Schritt für Schritt

Jede Website beginnt mit einer einfachen Textdatei – mit der Endung .html. Der Browser liest diese Datei und zeigt den Inhalt entsprechend an.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine erste Seite</title>
</head>
<body>
  <h1>Hallo Welt! 🌍</h1>
  <p>Das ist mein erster Absatz.</p>
</body>
</html>

Hallo Welt! 🌍

Das ist mein erster Absatz.

📂 4. Projektordner – Ordnung ist das halbe Leben

⚠️ Achtung: Ohne ordentliche Ordnerstruktur scheitert später alles – besonders bei CSS/JS!

Bevor du deine erste Datei speicherst: Erstelle einen ordentlichen Projektordner:

/html-css-tutorial/ ← Hauptordner
├── index.html
├── css/style.css
├── js/main.js
├── kapitel/
├── uebungen/
├── abschluss/
└── assets/ ← Bilder, Logo, Favicon

💡 Merke: Öffne immer den gesamten Ordner in VS Code – nie nur eine einzelne Datei!

💻 5. VS Code – deine Werkstatt

Du hast bereits die Seite „VS Code – Deine Werkstatt“ gelesen? Wenn nicht – bitte tu es jetzt!

💡 Wichtigste Schritte:

Installiere Live Server
Öffne den gesamten Projektordner
Klicke auf „Go Live“

🚀 6. Deine erste Aufgabe

Öffne VS Code und deinen Projektordner.
Erstelle eine neue Datei: meine-erste-seite.html im Root.
Kopiere den Code aus dem Beispiel oben hinein.
Speichere die Datei.
Klicke mit der rechten Maustaste → „Open with Live Server“.

🎉 Wenn du „Hallo Welt!“ im Browser siehst – Gratulation! Du hast deine erste Website erstellt.

💡 7. KI als Denkpartner – ein guter Prompt

Statt zu fragen: ❌ „Schreib mir eine HTML-Seite.“ Frage besser: ✅ „Kannst du mir das Grundgerüst einer HTML5-Seite mit deutscher Sprache, UTF-8 und Titel ‚Mein Hobby‘ zeigen?“

💡 So lernst du, klar zu denken – und die KI wird zum Werkzeug, nicht zur Krücke.