,
Dies ist ein Paragraf mit betontem Text.
) Attribute: Zusätzliche Informationen für Tags (z.B. href , target ) Struktur: HTML ist hierarchisch aufgebaut Übungen: Erstelle eine einfache "Über mich" Seite mit Überschrift, Absätzen und einer Liste deiner Hobbys Füge Links zu deinen Lieblings-Websites hinzu Experimentiere mit verschiedenen Text-Formatierungen Füge eine Bild hinzu 🎨 Kapitel 2: Grundlagen CSS Was lernst du hier? Wie man HTML mit CSS gestaltet Farben, Schriftarten und Abstände Layout mit Flexbox Hover-Effekte und Animationen Beispiel-Code: body { font-family: 'Segoe UI', sans-serif; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 300px; } .card:hover { transform: translateY(-5px); transition: transform 0.3s ease; } Wichtige Konzepte: Selektoren: Wie man HTML-Elemente auswählt (z.B. .card , body ) Eigenschaften: Was man ändern kann (z.B. color , font-size ) Box-Model: Padding, Margin, Border Flexbox: Modernes Layout-System Übungen: Gestalte deine HTML-Seite aus Kapitel 1 mit CSS Erstelle Karten-Layout mit Hover-Effekten Experimentiere mit Farbgradienten und Schatten 🖱️ Kapitel 3: Click Events & Zähler Was lernst du hier? Dein erstes JavaScript-Programm Auf Benutzer-Klicks reagieren Variablen und Funktionen DOM-Manipulation (Elemente verändern) Beispiel-Code: // Elemente auswählen const clickButton = document.getElementById('click-btn'); const clickResult = document.getElementById('click-result'); // Zähler für Klicks let clickCount = 0; // Event Listener hinzufügen clickButton.addEventListener('click', function() { clickCount = clickCount + 1; // Mathe ??** clickResult.textContent = 'Button wurde ' + clickCount + ' mal geklickt!'; console.log('Button geklickt! Anzahl:', clickCount); }); Wichtige Konzepte: Variables: Daten speichern mit let und const Event Listeners: Auf Benutzeraktionen reagieren DOM: Das Document Object Model - wie JavaScript HTML verändert Functions: Code organisieren und wiederverwenden Übungen: Erstelle einen einfachen Klick-Zähler Baue einen Zähler mit Plus-, Minus- und Reset-Buttons Ändere die Farbe des Zählers je nach Wert (positiv/negativ) 🎨 Kapitel 4: DOM Styling & Farben Was lernst du hier? CSS-Eigenschaften mit JavaScript ändern Farben programmatisch wechseln CSS-Klassen hinzufügen und entfernen Größe und Position von Elementen verändern Beispiel-Code: // Farben wechseln const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']; let currentColorIndex = 0; colorButton.addEventListener('click', function() { currentColorIndex = currentColorIndex + 1; if (currentColorIndex >= colors.length) { currentColorIndex = 0; } colorBox.style.backgroundColor = colors[currentColorIndex]; console.log('Farbe geändert zu:', colors[currentColorIndex]); }); // CSS-Klassen wechseln function removeAllThemes() { themeBox.classList.remove('dark-theme', 'bright-theme', 'rainbow-theme'); } darkThemeBtn.addEventListener('click', function() { removeAllThemes(); themeBox.classList.add('dark-theme'); }); Wichtige Konzepte: element.style: Direkte Stil-Änderungen classList: CSS-Klassen verwalten (add, remove, toggle) Arrays: Listen von Werten speichern Modulo-Operator (%): Für zyklische Werte Übungen: Erstelle einen Farbwechsler mit verschiedenen Farben Baue einen Theme-Umschalter (hell/dunkel) Lass Elemente ihre Größe ändern bei Klicks 📝 Kapitel 5: Text & Input Handling Was lernst du hier? Text aus Input-Feldern lesen Text dynamisch ändern String-Methoden (toUpperCase, toLowerCase, reverse) Einfache Text-Statistiken Einen simplen Chatbot programmieren Beispiel-Code: // Text aus Input lesen und anzeigen textButton.addEventListener('click', function() { const newText = textInput.value; if (newText.trim() !== '') { textDisplay.textContent = newText; textInput.value = ''; // Input leeren } }); // Text transformieren const reversedText = text.split('').reverse().join(''); // Chatbot-Logik const botResponses = { 'hallo': 'Hallo! Wie geht es dir?', 'hilfe': 'Ich kann einfache Fragen beantworten!' }; Wichtige Konzepte: Input-Werte: element.value zum Lesen von Eingaben String-Methoden: Text manipulieren Objects: Key-Value Paare speichern Conditional Logic: if/else Entscheidungen Übungen: Baue einen Text-Transformator (groß/klein/umgekehrt) Erstelle einen Wort- und Zeichen-Zähler Programmiere deinen eigenen Chatbot mit mehr Antworten 💫 Kapitel 6: Animation & Movement Was lernst du hier? Elemente bewegen und animieren Tastatur-Steuerung implementieren requestAnimationFrame für sanfte Animationen Partikel-Effekte erstellen Kollisionserkennung Beispiel-Code: // Einfache Bewegung let currentPosition = 20; moveRightBtn.addEventListener('click', function() { if (currentPosition < 300) { currentPosition += 50; moveBox.style.left = currentPosition + 'px'; } }); // Automatische Animation function animateBox() { autoPosition += direction * speed; // Richtung wechseln bei Kollision if (autoPosition >= 320 || autoPosition <= 20) { direction *= -1; } autoBox.style.left = autoPosition + 'px'; animationId = requestAnimationFrame(animateBox); } // Tastatur-Steuerung document.addEventListener('keydown', function(event) { switch(event.key.toLowerCase()) { case 'w': playerY -= moveSpeed; break; case 's': playerY += moveSpeed; break; case 'a': playerX -= moveSpeed; break; case 'd': playerX += moveSpeed; break; } player.style.left = playerX + 'px'; player.style.top = playerY + 'px'; }); Wichtige Konzepte: Position: Elemente mit left , top bewegen requestAnimationFrame: Optimierte Animationen Keyboard Events: Tastatureingaben verarbeiten Collision Detection: Grenzen und Hindernisse setTimeout: Verzögerungen und Timing Übungen: Erstelle ein bewegliches Objekt mit Buttons Programmiere eine Tastatur-gesteuerte Figur Baue einen Partikel-Effekt bei Mausklicks 🧠 Kapitel 7: Memory Spiel (Komplettes Projekt) Was lernst du hier? Ein vollständiges Spiel von Grund auf entwickeln Spiellogik und Zustandsverwaltung Komplexere Datenstrukturen Timer und Statistiken Modales Fenster (Popup) Responsive Design Kernkomponenten des Memory-Spiels: Game State Management let gameState = { board: [], flippedCards: [], matchedPairs: 0, moves: 0, startTime: null, timerInterval: null, isEasyMode: true, totalPairs: 8, gameStarted: false }; Spielfeld generieren function createBoard() { const selectedSymbols = SYMBOLS.slice(0, gameState.totalPairs); const gameSymbols = [...selectedSymbols, ...selectedSymbols]; // Fisher-Yates Shuffle for (let i = gameSymbols.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [gameSymbols[i], gameSymbols[j]] = [gameSymbols[j], gameSymbols[i]]; } gameState.board = gameSymbols.map((symbol, index) => ({ id: index, symbol: symbol, isFlipped: false, isMatched: false })); } Match-Logik function checkMatch() { const [firstIndex, secondIndex] = gameState.flippedCards; const firstCard = gameState.board[firstIndex]; const secondCard = gameState.board[secondIndex]; if (firstCard.symbol === secondCard.symbol) { handleMatch(firstIndex, secondIndex); } else { handleNoMatch(firstIndex, secondIndex); } } Wichtige Konzepte: State Management: Spielzustand verwalten Arrays und Objects: Komplexe Datenstrukturen Game Loop: Spielschleife und Updates Fisher-Yates Shuffle: Zufällige Anordnung Modal Windows: Popup-Fenster Local Functions: Code in kleinere Teile aufteilen Features des Memory-Spiels: ✅ Zwei Schwierigkeitsgrade (4x4 und 6x6) ✅ Timer und Züge-Zähler ✅ Hint-System ✅ Auto-Solve Funktion ✅ Gewinn-Animation mit Bewertung ✅ Responsive Design für Handys Übungen: Füge neue Symbole zum Spiel hinzu Erstelle einen Highscore-System Baue Sound-Effekte ein Entwickle weitere Spielmodi 💡 Tipps für erfolgreiches Lernen 1. Learning by Doing Tippe jeden Code-Beispiel selbst ab Experimentiere mit den Werten Verändere Farben, Texte und Funktionen 2. Console nutzen Öffne die Browser-Entwicklertools (F12 oder cmd+option+i) Schaue dir die Console-Ausgaben an Experimentiere mit console.log() 3. Fehler sind normal Jeder Programmierer macht Fehler Lese Fehlermeldungen aufmerksam Nutze die Entwicklertools zum Debuggen 4. Schritt für Schritt Verstehe ein Konzept, bevor du zum nächsten gehst Baue auf dem vorherigen Wissen auf Wiederhole schwierige Teile 5. Eigene Projekte Modifiziere die Beispiele Erstelle eigene kleine Programme Kombiniere verschiedene Konzepte 🛠️ Entwicklertools Browser-Konsole // Debugging mit console.log() console.log('Debug-Info:', variableName); console.error('Fehler aufgetreten'); console.warn('Warnung'); Häufige Debugging-Techniken // Werte prüfen console.log('Wert von x:', x); // Funktionsaufrufe verfolgen function myFunction() { console.log('myFunction wurde aufgerufen'); // ... Code } // Element-Eigenschaften prüfen console.log('Element-Inhalt:', element.textContent); 📖 Weiterführende Ressourcen MDN Web Docs: Umfassende Dokumentation W3Schools: Tutorials und Referenzen JavaScript.info: Detaillierte Erklärungen Codecademy: Interaktive Kurse FreeCodeCamp: Kostenlose Projekte 🏆 Abschlussprojekt-Ideen Nach dem Memory-Spiel kannst du folgende Projekte angehen: Tic-Tac-Toe Spiel Todo-Liste mit LocalStorage Einfacher Taschenrechner Quiz-App mit verschiedenen Kategorien Snake-Spiel Wetterapp mit API Viel Erfolg beim Programmieren lernen! Remember: Jeder Experte war einmal ein Anfänger. 🚀