Modul 10: HTML & CSS kombiniert

lock
Bevorstehend

Wende alles Gelernte an und baue eine komplette Landing Page

Ziele dieses Moduls
  • Sie koennen eine vollstĂ€ndige, responsive Landing Page mit modernen HTML- und CSS-Techniken erstellen
    Kreieren

Jetzt kommt alles zusammen! In diesem Modul wendest du alle HTML- und CSS-Techniken an, um eine professionelle Landing Page zu erstellen.

Was ist eine Landing Page?

Eine Landing Page ist eine Webseite, die ein spezifisches Ziel verfolgt: Ein Produkt vorstellen, zu einer Anmeldung aufrufen, oder ein Event bewerben.

Typische Struktur:

  • Hero-Bereich: Grosses Bild/Video + Hauptbotschaft + Call-to-Action
  • Features/Vorteile: 3-4 GrĂŒnde, warum das Angebot gut ist
  • Testimonials: Meinungen von Nutzern (optional)
  • Call-to-Action: Button fĂŒr Anmeldung/Kauf
  • Footer: Links, Kontakt, Social Media

Note

BEM-Methodik fĂŒr CSS-Klassen

FĂŒr grössere Projekte hilft eine Namenskonvention wie BEM (Block Element Modifier):

  • Block: .card - Eine eigenstĂ€ndige Komponente
  • Element: .card__title - Ein Teil des Blocks
  • Modifier: .card--featured - Eine Variation

Vorteil: Dein CSS bleibt ĂŒbersichtlich und du vermeidest Konflikte.

/* BEM-Beispiel */

/* Block */
.feature {
    padding: 40px;
    text-align: center;
}

/* Elements */
.feature__icon {
    font-size: 48px;
    color: #3498db;
}

.feature__title {
    font-size: 24px;
    margin: 20px 0 10px;
}

.feature__description {
    color: #666;
}

/* Modifier */
.feature--highlighted {
    background-color: #f8f9fa;
    border-left: 4px solid #3498db;
}

Challenge

Grossprojekt: Deine Landing Page

Erstelle eine vollstĂ€ndige Landing Page fĂŒr ein Thema deiner Wahl:

Themen-Ideen:

  • Ein fiktives Produkt (z.B. Smart Watch, Gaming-Headset)
  • Ein Event (Konzert, Festival, Workshop)
  • Eine App (Fitness-App, Lern-App, Spiel)
  • Ein Service (Webdesign-Agentur, Fotografie)

Pflicht-Elemente:

  1. Navigation: Logo + 3-4 Links (sticky optional!)
  2. Hero-Bereich: Grosses Bild, Überschrift, Untertitel, CTA-Button
  3. Features-Bereich: Grid mit 3 Features (Icon + Titel + Text)
  4. CTA-Bereich: Anmeldeformular oder prominenter Button
  5. Footer: Links, Copyright, Social Icons (können Platzhalter sein)

Technische Anforderungen:

  • VollstĂ€ndig responsive (Mobile, Tablet, Desktop)
  • Strukturiertes HTML (semantische Tags: <header>, <main>, <footer>, <section>)
  • BEM-Klassen verwenden
  • Mindestens 2 Hover-Effekte
  • Saubere AbstĂ€nde und Typographie

/* HTML-Struktur-Beispiel */
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartFit - Deine Fitness-App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="nav__logo">SmartFit</div>
            <ul class="nav__menu">
                <li><a href="#features">Features</a></li>
                <li><a href="#pricing">Preise</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <div class="hero__content">
                <h1 class="hero__title">Fit werden war nie einfacher</h1>
                <p class="hero__subtitle">TrainingsplÀne, Tracking, Community</p>
                <button class="hero__cta">Jetzt starten</button>
            </div>
        </section>

        <section class="features" id="features">
            <!-- Features Grid -->
        </section>
    </main>

    <footer class="footer">
        <!-- Footer Content -->
    </footer>
</body>
</html>

Note

Tipps fĂŒr ein professionelles Ergebnis:

  • Farbpalette: WĂ€hle 2-3 Hauptfarben (coolors.co hilft!)
  • Schriftarten: Verwende Google Fonts (max. 2 Schriften)
  • Bilder: Hochwertige Platzhalter von unsplash.com oder pexels.com
  • Whitespace: Gib deinen Elementen Platz zum Atmen!
  • Konsistenz: Gleiche AbstĂ€nde, Border-Radius, Schatten durchgehend verwenden

Zeit einplanen: Dieses Projekt braucht 3-5 Stunden. Nimm dir Zeit!

Reflection

ÜberprĂŒfe deine Arbeit:

  • ☐ Sieht die Seite auf dem Handy gut aus? (DevTools: 375px)
  • ☐ Sieht die Seite auf dem Tablet gut aus? (768px)
  • ☐ Sieht die Seite auf dem Desktop gut aus? (1440px)
  • ☐ Sind alle Links und Buttons funktionell?
  • ☐ Ist das HTML valide? (validator.w3.org)
  • ☐ Hast du aussagekrĂ€ftige alt-Texte bei Bildern?
  • ☐ Ist dein CSS organisiert und kommentiert?