CodeCrush | Lerne Webentwicklung im Gen Z Style
CodeCrush
Home Kurse Abschlussprojekt Community
🚀
đŸ’»

Lerne Webentwicklung im Gen Z Style

HTML, CSS & JavaScript – interaktiv, modern und mit deinem eigenen Abschlussprojekt. Starte deine Coding-Journey noch heute!

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Meine erste Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title">Willkommen bei CodeCrush!</h1>
    <p>Lerne Webentwicklung Schritt fĂŒr Schritt</p>
    
    <script src="script.js"></script>
</body>
</html>
Lektion 1: HTML Grundlagen

Demo Version

Dies ist nur eine Demo. Einige Funktionen sind möglicherweise eingeschrÀnkt.

60+ Interaktive Lektionen

Lerne durch praktische Übungen und sofortiges Feedback zu deinem Code.

Projektorientiertes Lernen

Baue echte Projekte und entwickle deine eigene Website als Abschluss.

Community Support

Lerne gemeinsam mit anderen, teile deinen Code und bekomme Hilfe.

Unsere Kurse

Von den Grundlagen bis zu fortgeschrittenen Konzepten - lerne alles, was du brauchst, um deine eigene Website zu erstellen.

AnfÀnger

HTML Grundlagen

Lerne die Basis der Webentwicklung: Struktur, Tags und Elemente.

5 Lektionen Kostenlos
AnfÀnger

HTML Formulare

Erstelle interaktive Formulare fĂŒr Benutzereingaben.

4 Lektionen Kostenlos
Fortgeschritten

HTML5 Multimedia

Integriere Audio, Video und interaktive Elemente.

6 Lektionen Kostenlos
Fortgeschritten

Semantisches HTML

Verbessere die ZugÀnglichkeit und SEO deiner Website.

5 Lektionen Kostenlos
Experte

Responsive Layouts

Erstelle Websites, die auf allen GerÀten gut aussehen.

7 Lektionen Kostenlos

Dein Abschlussprojekt

Wende dein Wissen an und erstelle deine eigene Website mit HTML, CSS und JavaScript.

project/index.html
<!DOCTYPE html>
<html>
<head>
    <title>Mein Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">MeinName</div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projekte</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            // Dein Content hier
        </section>
    </main>
    
    <script src="script.js"></script>
</body>
</html>
style.css
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background: #0F172A;
  color: #F8FAFC;
}

header {
  padding: 1rem 2rem;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
}

/* More styles... */
script.js
document.addEventListener('DOMContentLoaded', () => {
  // Animation fĂŒr die Navigation
  const navItems = document.querySelectorAll('nav ul li');
  
  navItems.forEach((item, index) => {
    item.style.animation = 
      `fadeIn 0.5s ease forwards ${index / 7 + 0.3}s`;
  });
  
  // More code...
});

Was du lernen wirst:

Projektplanung

Lerne, wie du ein Webprojekt von Anfang bis Ende planst und strukturierst.

Responsive Design

Erstelle eine Website, die auf allen GerÀten perfekt aussieht.

Interaktive Elemente

FĂŒge Animationen, ÜbergĂ€nge und interaktive Funktionen mit JavaScript hinzu.

Deployment

Veröffentliche deine Website online, damit die ganze Welt sie sehen kann.

Unsere Community

Lerne gemeinsam mit anderen, teile deinen Code und bekomme Hilfe von der Community.