Praxisprojekt: Eine kleine Profilseite

HTML und CSS in einer kleinen Beispielseite zusammenführen.

Lernziel

Du kombinierst HTML-Struktur und CSS-Gestaltung in einer kleinen Profilseite und planst ein Projekt sinnvoll von grob nach fein.

Projektidee

Baue eine einfache Profilseite mit Ueberschrift, Bild, Beschreibung, Kontaktbereich und einem kleinen Formular. Das Projekt verbindet mehrere HTML-Grundlagen in einer realistischen Mini-Webseite.

Moegliche Struktur

<main>
    <section class="profil"></section>
    <section class="kontakt"></section>
</main>

So sieht es aus

Im Browser entstehen zwei klar getrennte Bereiche innerhalb des Hauptinhalts: ein Profilbereich und ein Kontaktbereich. Erst mit Inhalten und CSS wird daraus eine vollstaendige kleine Seite.

Was bewirkt der Code?

main markiert den zentralen Seiteninhalt. Die beiden section Elemente teilen die Seite in sinnvolle Themenbereiche auf. Ueber die Klassen profil und kontakt kannst du spaeter gezielt CSS zuweisen.

Empfehlung

Arbeite Schritt fuer Schritt: zuerst Struktur anlegen, dann Inhalte einfuegen, danach Farben und Abstaende gestalten und am Ende die mobile Darstellung pruefen.

← Vorherige Lesson

Weiter →