Interaktive Medien 1 - HTML, CSS & JavaScript

Willkommen zum Kurs Interaktive Medien 1! Dieser Kurs führt Sie systematisch in die Grundlagen der Webentwicklung ein.

Kursstruktur

Der Kurs ist in 6 Module gegliedert, die aufeinander aufbauen:

📘 00-course-info - Kursinformationen

Hier finden Sie:

• Detaillierter Kursablauf und Lernziele
• Technische Grundlagen
• HTTP-Protokoll Einführung
• Projekt-Ablaufpläne

Start hier: Lesen Sie zuerst die Kursdokumentation!

---

🟦 01-html-basics - HTML Grundlagen

Lernziele:

• HTML5-Grundstruktur verstehen
• Semantische Elemente einsetzen
• HTML-Attribute verwenden (class, id, src, href, alt)

Inhalte:

• 📚 lesson/ - Theoretische Grundlagen
• 💡 examples/ - Vollständiges Arbeitsbeispiel
• ✏️ exercises/ - Platz für Ihre Übungen

Dauer: ~2-3 Stunden

---

🟩 02-css-basics - CSS Grundlagen

Lernziele:

• CSS mit HTML verknüpfen
• Selektoren verstehen (Element, Klasse, ID)
• Grundlegende Gestaltung umsetzen

Inhalte:

• 📚 lesson/ - CSS-Theorie
• 💡 examples/ - Vollständig gestaltete Beispielseite
• ✏️ exercises/ - Platz für Ihre Übungen

Wichtige Konzepte: Box Model, Farben, Schriften, Abstände

Dauer: ~3-4 Stunden

---

🟨 03-js-basics - JavaScript Grundlagen

Lernziele:

• JavaScript einbinden
• Browser-Konsole nutzen
• Event-Listener verstehen
• DOM-Manipulation lernen

Inhalte:

• 📚 lesson/ - JavaScript-Grundlagen
• 💡 examples/ - 6 interaktive Beispiele:
  • Console.log
  • Button Click Events
  • Text dynamisch ändern
  • Farben ändern
  • Input-Felder auslesen
  • Liste erstellen

Wichtige Konzepte: Events, DOM, Variables, Functions

Dauer: ~4-5 Stunden

---

🟪 04-css-layouts - Fortgeschrittene Layouts

Lernziele:

• Flexbox für 1D-Layouts
• CSS Grid für 2D-Layouts
• Responsive Design umsetzen
• Moderne Layout-Patterns

Inhalte:

• 🔧 Flexbox Beispiele: (5 Beispiele)
  • Basic Row, Column, Centered, Space Between, Gallery
• 🔲 Grid Beispiele: (5 Beispiele)
  • Two/Three Column, Auto-fit, Card Layout, Holy Grail
• 🧩 Kombinierte Beispiele: (3 Beispiele)
  • Header, Cards, Sidebar mit Flex + Grid

Navigation: Öffnen Sie index.html für eine Übersicht

Dauer: ~5-6 Stunden

---

🟥 05-project-museum - Praxisprojekt: Museum Website

Lernziele:

• Alle Konzepte in einem echten Projekt anwenden
• Multi-Page Website erstellen
• Dark Mode implementieren
• Custom Fonts einbinden

Struktur:

• 🚀 starter/ - Ihre Arbeitsversion (Code-Along)
• ✅ solution/ - Vollständige Lösung (Referenz)

Features:

• Mehrere HTML-Seiten (Home, Ausstellung, Künstler, Kontakt)
• Fortgeschrittenes CSS (Grid, Flexbox, Custom Properties)
• JavaScript Theme Toggle
• Responsive Design
• Custom Web Fonts

Dauer: ~8-10 Stunden

---

🟧 06-advanced-examples - Weiterführende Beispiele

CSS Zen Garden

• Erkunden Sie, wie CSS das Design komplett verändert
• Experimentieren Sie mit fortgeschrittenen CSS-Techniken
• Erstellen Sie Ihre eigenen Designs

Ideal für: Studierende, die tiefer einsteigen möchten

---

Empfohlener Lernpfad

1. Woche 1-2: HTML Basics → CSS Basics → JS Basics
2. Woche 3: CSS Layouts (Flexbox & Grid)
3. Woche 4-5: Museum Projekt
4. Optional: Advanced Examples

🚀 Schnellstart

Bevor Sie anfangen:

1. Entwicklungsumgebung einrichten → Setup-Anleitung

   • VS Code installieren
   • Live Server Extension
   • Browser DevTools kennenlernen

2. Häufige Fehler kennen → Fehler & Lösungen

   • Typische Anfängerfehler
   • Debugging-Strategien
   • Checklisten

Los geht's:

# 1. Repository klonen oder herunterladen
git clone <repository-url>

# 2. Ersten Schritt öffnen
cd 01-html-basics
open examples/index.html  # macOS
start examples/index.html # Windows
xdg-open examples/index.html # Linux

# 3. Mit einem Code-Editor öffnen (z.B. VS Code)
code .

Arbeitsweise

Für jedes Modul:

1. 📚 Lesen: Studieren Sie die Theorie im lesson/ Ordner
2. 💡 Verstehen: Öffnen Sie die Beispiele im Browser und Code-Editor
3. ✏️ Üben: Erstellen Sie eigene Dateien im exercises/ Ordner
4. ✅ Anwenden: Nutzen Sie das Gelernte im nächsten Modul

Empfohlene Tools

• Code-Editor: Visual Studio Code
• Browser: Chrome, Firefox oder Edge (mit DevTools)
• VS Code Extensions:
  • Live Server (für lokale Entwicklung)
  • Prettier (Code-Formatierung)
  • HTML CSS Support

Hilfreiche Ressourcen

Dokumentation & Tutorials

• MDN Web Docs - Beste Referenz für Web-Technologien
• W3Schools - Tutorials und Beispiele
• CSS-Tricks - CSS-Tipps und -Tricks
• JavaScript.info - Modernes JavaScript-Tutorial
• Can I Use - Browser-Kompatibilität prüfen

Interaktive Lernspiele

Üben Sie spielerisch und interaktiv:

• 🍽️ CSS Diner - Lernen Sie CSS-Selektoren spielerisch (perfekt für Modul 02)
• 🌻 Grid Garden - CSS Grid meistern durch Garten-Puzzles (ideal für Modul 04)
• 🎮 Flexbox Defense - Flexbox lernen mit Tower Defense (ideal für Modul 04)

Empfehlung: Spielen Sie CSS Diner nach Modul 02 und Grid Garden + Flexbox Defense nach Modul 04!

Häufige Fragen

Q: Wo fange ich an? A:

1. Zuerst: Entwicklungsumgebung einrichten
2. Dann: 00-course-info/ lesen
3. Danach: Arbeiten Sie sich durch Module 01-06

Q: Muss ich programmieren können? A: Nein! Dieser Kurs startet bei Null und erklärt alles Schritt für Schritt.

Q: Wie lange dauert der Kurs? A: Bei ca. 4-6 Stunden pro Woche sind Sie in 4-6 Wochen durch.

Q: Kann ich Module überspringen? A: Nicht empfohlen! Jedes Modul baut auf dem vorherigen auf.

Q: Wo finde ich Lösungen? A: Beispiellösungen finden Sie in den examples/ Ordnern und im Museum-Projekt unter 05-project-museum/solution/.

Q: Mein Code funktioniert nicht - was tun? A: Schauen Sie in die Fehler & Lösungen - dort finden Sie die häufigsten Probleme und deren Lösungen!

Support

Bei Fragen oder Problemen:

1. Schauen Sie in die README.md des jeweiligen Moduls
2. Konsultieren Sie die Kursdokumentation in 00-course-info/
3. Nutzen Sie die Developer Tools (F12) zur Fehlersuche
4. Fragen Sie Ihren Dozenten

Lizenz

Dieser Kurs ist für Bildungszwecke erstellt.

---

Viel Erfolg beim Lernen! 🚀

Beginnen Sie jetzt mit → 00-course-info