Das erste Beet - Baumschule

Diese Anleitung führt dich Schritt für Schritt durch dein erstes Beet im Web. Arbeite die Punkte nacheinander ab und prüfe nach jedem Schritt, ob das erwartete Ergebnis sichtbar ist.

Schritt-für-Schritt

Lege in deinem Projekt eine index.html an und erstelle das Grundgerüst mit Emmet (z.B. ! + Enter).

HTML-Grundgerüst erstellen
Setze das Sprachattribut passend, z.B. <html lang="de">, und aktualisiere den Seitentitel mit <title>. Nutze einen individuellen Titel wie <title>Mein Garten</title>.
Baue den ersten Inhalt auf: eine <section> mit <div class="inner-wrapper">, einer <figure> mit <img> und einer <h1>. Verwende ein eigenes Bild (oder das drehende Blatt) und ergänze einen sinnvollen alt-Text.
Gib deiner Section mit padding und margin Luft zum Atmen. Ziel: Inhalt klebt nicht am Browserrand und hat klaren Abstand nach außen.
Lege eine externe style.css an, verlinke sie in deiner HTML-Datei und setze zuerst eine maximale Breite für .inner-wrapper. Prüfe danach im Browser: Der Inhalt steht zentriert und läuft auf großen Bildschirmen nicht zu breit.

Stylesheet anlegen und einbinden
```
.inner-wrapper {
  max-width: 600px;
  margin: 0 auto;
}
```
CSS

Alt-Text-Selfie und Gestaltung

Schreibe einen kurzen Text über dich und/oder deinen Garten im Internet. Nutze alttextselfies.net als inhaltliche Inspiration und formuliere 4 bis 8 Sätze, die eine visuelle Situation präzise beschreiben.

Binde eine Schrift per @font-face ein, z.B. von Dinamo Typefaces, und speichere die Font-Datei im Projektordner (z.B. im Hauptordner oder in /fonts).
```
@font-face {
  font-family: "ABCDiatype";
  src: url("./ABCDiatype-Regular-Trial.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
```
CSS
Nutze die Schrift in deinem Layout über font-family und lege mindestens zwei klar unterscheidbare Textstile fest: einen für die Überschrift und einen für den Fließtext.

Falls du Dinamo-Schriften nutzt, ergänze den Hinweis im Footer:

<footer>
  <div class="inner-wrapper">
    <p>Schriften von <a href="https://abcdinamo.com" target="_blank">Dinamo Typefaces</a></p>
  </div>
</footer>

HTML

Verfeinere dein Beet mit diesen CSS-Regeln und dokumentiere deine Entscheidungen direkt im Code über sinnvolle Klassennamen:
Konkretes Ziel: Eine Startansicht mit Bild, Überschrift und Text, die in sich stimmig ist und deutlich lesbar bleibt.