Etappe 1 – Grundlagen · Lektion 8 von 11 · Lernziel: Aus HTML und CSS eine ansprechende Startseite gestalten.
Voraussetzung: Grundlagen aus Lektion 7; arbeite im selben Projekt modellbau-webseite.
Ziel
Wir gestalten unsere erste vollständige Startseite mit einem Begrüßungsbereich („Hero“), einer kurzen Vorstellung und einer Vorschau auf die Projekte. Diese Lektion ersetzt die bisherige src/pages/index.astro vollständig.
Datei: src/pages/index.astro
---
const webseite = 'Meine Modellbau-Werkstatt';
const interessen = ['Modellflug', '3D-Druck', 'Elektronik'];
---
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{webseite}</title>
<meta name="description" content="Modellbau, Elektronik und 3D-Druck zum Selbermachen" />
</head>
<body>
<header><div class="rahmen"><strong>{webseite}</strong></div></header>
<main class="rahmen">
<section class="hero">
<h1>Willkommen in meiner Werkstatt!</h1>
<p>Technik entdecken, ausprobieren und eigene Ideen verwirklichen.</p>
<a class="knopf" href="#interessen">Meine Interessen entdecken</a>
</section>
<section id="interessen">
<h2>Das mache ich gerne</h2>
<ul>{interessen.map((thema) => <li>{thema}</li>)}</ul>
</section>
<section>
<h2>Aktuelles Projekt</h2>
<p>Ein selbst konstruiertes Modellbauteil aus dem 3D-Drucker.</p>
<img src="/bilder/projekt.jpg" alt="Selbst gebautes Modellbauprojekt" width="600" />
</section>
</main>
<footer><div class="rahmen">Meine Modellbau-Werkstatt</div></footer>
</body>
</html>
<style>
:global(body) { margin: 0; font-family: Arial, sans-serif; color: #243447; background: #f4f6f8; line-height: 1.6; }
.rahmen { max-width: 960px; margin: 0 auto; padding: 20px; }
header, footer { background: #183247; color: white; }
.hero { background: #dfeef7; padding: 32px; margin: 20px 0 32px; border-radius: 12px; }
.knopf { display: inline-block; padding: 10px 18px; color: white; background: #147bb8; border-radius: 6px; text-decoration: none; }
.knopf:hover { background: #105d8b; }
img { max-width: 100%; height: auto; border-radius: 8px; }
</style>Wichtig: Das Projektbild muss noch im Ordner public/bilder/ liegen. Fehlende Bilder kannst du vorläufig durch Entfernen der <img>-Zeile ausblenden.
Neues Konzept: Wiederholungen mit map()
Das Array interessen enthält drei Texte. Der Ausdruck {interessen.map(...)} erzeugt daraus automatisch drei Listeneinträge. Du musst den JavaScript-Ausdruck zunächst nicht auswendig können; in Lektion 16 betrachten wir ihn ausführlicher.
Übung
Ändere den Begrüßungstext, die Akzentfarbe des Buttons und füge ein viertes Interesse zum Array hinzu.
Kontrolle: Nach dem Speichern erscheint der vierte Listenpunkt, ohne dass du ein viertes <li> per Hand einfügen musst.
Weitere Informationen: Offizielle Astro-Dokumentation.