3.4 Dein erstes Projekt

Versteh, was eine Webseite ist. Eine einfache Webseite ist eine Datei, die mit .html endet. HTML ist die Sprache, in der Webseiten geschrieben sind. Sie sagt dem Browser: Hier ist eine Überschrift, hier ein Bild, hier ein Link. Für Farben und Schriften gibt es noch CSS, eine Art Stil-Anweisung. Beides schreibt Claude für dich.

Überleg dir den Inhalt. Schreib dir kurz auf:

wie die Seite heißen soll, zum Beispiel dein Vorname,
drei bis fünf Sätze über dich: Hobbys, was dich freut, was du gerade lernst,
fünf bis zehn Lieblingslinks, etwa Wetter, Nachrichten, dein Lieblingsrezept, dein Verein,
eine Lieblingsfarbe.

Denk daran: Wenn du die Seite in Lektion 3.5 ins Internet stellst, kann sie jeder sehen. Lass Adresse, Telefonnummer und Geburtsdatum weg.

Leg ein Foto in den Ordner. Such ein Foto aus, auf dem du gut zu sehen bist, oder ein schönes Bild von etwas, das du magst. Kopier es in deinen Ordner „Mein erstes Projekt“ und nenn es foto.jpg. Nimm nur Fotos, die du selbst gemacht hast, und keine, auf denen andere Menschen ohne ihr Einverständnis zu sehen sind.

Öffne Claude Code im Projektordner. Desktop-App, Bereich „Code“, Ordner „Mein erstes Projekt“ auswählen, Modus „Manual“ (siehe Lektion 3.2 und 3.3).

Gib den ersten Auftrag.

Claude fragt, ob er die Datei anlegen darf. Schau kurz drauf und erlaube es.

Sag Claude:Bau mir in diesem Ordner eine persönliche Startseite als eine einzige Datei ‚index.html‘. Oben mein Name: … Darunter mein Foto ‚foto.jpg‘ als Kreis. Dann ein Abschnitt ‚Über mich‘ mit diesem Text: … Dann ‚Meine Lieblingslinks‘ als große, gut klickbare Kacheln: … Hauptfarbe: … Die Seite soll auch auf dem Handy gut aussehen. Keine Werbung, keine Zähler, keine Inhalte von fremden Seiten. Erklär mir danach kurz, was du gebaut hast.

Sieh dir die Seite an.

Mac: Öffne den Ordner im Finder und mach einen Doppelklick auf index.html. Die Seite öffnet sich in deinem Browser.
Windows: Öffne den Ordner im Explorer und mach einen Doppelklick auf index.html. Siehst du keine Endung, heißt die Datei vielleicht nur „index“ mit einem Browser-Symbol.
In der Desktop-App: Klick im Chat auf den Dateinamen „index.html“. Dann öffnet sie sich in einem Browser-Bereich direkt in der App.

Wünsch dir Änderungen. Jetzt kommt der schöne Teil. Sag Claude in normalen Sätzen, was dir nicht gefällt. Nach jeder Änderung lädst du die Seite im Browser neu: Cmd + R auf dem Mac, F5 unter Windows. Ein paar Ideen:

Wenn etwas komisch aussieht, mach ein Bildschirmfoto und gib es Claude über das Plus-Zeichen neben dem Eingabefeld: „So sieht es bei mir aus. Die Kacheln überlappen sich. Bitte reparieren.“

Sag Claude:Die Schrift ist mir zu klein. Mach alles etwas größer.

Sag Claude:Füg unter den Links eine Suchleiste hinzu, die mit einer Suchmaschine sucht.

Sag Claude:Zeig oben je nach Uhrzeit ‚Guten Morgen‘, ‚Guten Tag‘ oder ‚Guten Abend‘ an.

Sicher deinen Stand. Wenn dir die Seite gefällt:

Sag Claude:Speichere diesen Stand als Sicherung mit der Beschreibung ‚Erste fertige Startseite‘.

Optional: Mach sie zu deiner Browser-Startseite. Frag Claude, wie das in deinem Browser geht.

Wenn etwas nicht klappt:

Sag Claude:Ich mache einen Doppelklick auf index.html, aber es passiert Folgendes: … Was kann ich tun?

Hängst du irgendwo fest? Frag deinen Claude – so oft du willst, auch zu jedem einzelnen Schritt.

Sag Claude:Ich mache gerade die Lektion „3.4 Dein erstes Projekt“ im AWA Campus und hänge bei diesem Schritt: … Erklär ihn mir bitte einfacher, Schritt für Schritt. Ich bin Anfänger.