Amsterdam Webseite

Ziel

Du baust eine eigene Webseite – mit mehreren Seiten, Bildern, einer Karte, Tönen, einem Video und einem Quiz. Am Ende liegt sie als Ordner voller Dateien auf deinem Rechner, und du kannst sie jedem zeigen.

Als Vorlage dient eine Seite über Amsterdam. In jedem Schritt siehst du zuerst, wie es dort gelöst ist, und baust es danach in deiner Seite nach – mit deinem Thema, deinen Bildern, deinen Texten.

Dein Thema darf ein anderes sein. Amsterdam ist nur das Beispiel, an dem alles gezeigt wird. Genauso gut geht deine Heimatstadt, dein Lieblingsverein, ein Hobby, ein Spiel oder eine Band. Was du brauchst: ein paar Bilder, ein paar Orte oder Dinge, die du vorstellen willst, und Lust, daran herumzuprobieren.

So läuft ein Schritt ab

Jede Seite dieses Projekts ist gleich aufgebaut:

Das Ziel – was am Ende auf deiner Seite zu sehen ist.
So könnte das aussehen – ein Beispiel zum Anfassen. Du kannst darin herumändern; kaputt geht nichts.
Wie es gemacht ist – die Technik dahinter, kurz erklärt.
Deine Aufgabe – dasselbe in deinem eigenen Projekt, mit deinen Inhalten.
Tipps, wenn du feststeckst, und eine mögliche Umsetzung zum Vergleichen.

Bei den Grundlagen verweise ich jeweils auf den Lernpfad Webentwicklung. Dort steht ausführlich, was hier nur kurz vorkommt.

Das entsteht

meine-seite/
├── index.html                 die Startseite
├── stil.css                   das Aussehen aller Seiten
├── bilder/                    deine Bilder und Töne
├── orte/                      je eine Seite pro Ort oder Ding
│   ├── ort-1.html
│   └── ort-2.html
├── geraeusche.html
└── quiz.html

Du arbeitest dabei in einem Editor mit mehreren Dateien – so, wie es auch beruflich gemacht wird. Welchen du nimmst, steht im Setup.

Vorwissen

🥳 Du brauchst kein Vorwissen, um den Kurs zu starten.