Einstiegsübung · Eine Datei, ein vollständiges Projekt
Deine erste persönliche Webseite erstellen
Beschreibe zuerst dein Ziel, dann speichere, öffne, ändere und prüfe selbst eine Seite. Starte direkt und schlage Grundlagen nach, wenn ein Begriff unklar ist.
Download blockiert? Vollständigen Quellcode anzeigen
Kopiere den gesamten Text, speichere ihn als index.html in UTF-8 und öffne die Datei im Browser.
Was du vor dem Start brauchst
- Ein Computer zum Speichern von Dateien, ein Browser und ein reiner Texteditor.
- Optional: Ein KI-Chat- oder Programmierwerkzeug, das du bereits nutzt. Internet, Konto oder Bezahlung können nötig sein; beachte die aktuellen Bedingungen. Für dieses Tutorial ist kein Kauf erforderlich.
- Das Referenzbeispiel benötigt kein Konto, keinen Server, API-Schlüssel oder zusätzliche Abhängigkeiten. Nach dem Download funktioniert es offline.
- Das Projekt nutzt Standard-HTML und CSS. Die Dauer hängt von Erfahrung und Werkzeugen ab; arbeite die Schritte in deinem Tempo durch.
Von der Idee zur funktionierenden Seite
1. Projektordner vorbereiten
Erstelle den Ordner first-website. Öffne einen Texteditor und erstelle index.html. Blende Dateiendungen im Betriebssystem ein und prüfe, dass die Datei nicht index.html.txt heißt.
Ergebnis prüfen:Im Ordner liegt eine Datei mit der Endung .html. Node.js oder weitere Abhängigkeiten werden hier nicht benötigt.
2. Anforderungen an die KI geben oder zuerst das Beispiel ausführen
Füge die folgende Anweisung in dein vorhandenes KI-Werkzeug ein und ergänze Vorstellung und Projektbeschreibung. Kopiere das gesamte HTML ohne die Backticks des Codeblocks. Ist keine KI verfügbar, lade das vollständige Beispiel oben herunter.
Ergebnis prüfen:Du hast eine vollständige Datei von <!doctype html> bis </html>, keine einzelnen Fragmente.
3. Seite speichern und öffnen
Speichere den vollständigen Code mit UTF-8 als index.html. Öffne die Datei per Doppelklick oder ziehe sie in den Browser. Endet der Download auf .txt, benenne ihn vorher in index.html um.
Ergebnis prüfen:Der Browser zeigt eine gestaltete Vorstellung, ein Projekt und Lernnotizen. Eine Adresse mit file: ist bei einer lokalen Vorschau normal.
4. Eine eigene Änderung machen
Ersetze Lin im Editor durch deinen Spitznamen und die Projektbeschreibung durch eigenen Text. Speichere und lade die Seite neu. Ändere anschließend im CSS #5b21b6 zu #1e40af und beobachte die Akzentfarbe.
Ergebnis prüfen:Spitzname, Vorstellung und Farben ändern sich. Ändere jeweils nur eine Art von Inhalt, damit Fehler leichter auffallen.
5. Links und Smartphone-Layout prüfen
Klicke auf My work, About und den Hauptbutton, um die Ziele zu prüfen. Verkleinere das Browserfenster und bediene die Links mit Tab und Enter.
Ergebnis prüfen:Alle Schaltflächen haben ein echtes Ziel, Text wird nicht abgeschnitten, der Fokus ist sichtbar und es gibt keinen horizontalen Überlauf.
6. Projekt prüfen und fortfahren
Prüfe deine Datei anhand der folgenden Liste. Danach speicherst du den Lernstand mit „Als abgeschlossen markieren“ und gehst zur Lektion zur Vertiefung deiner Fähigkeiten.
Ergebnis prüfen:Du hast ein Projekt, das du öffnen, ändern und erklären kannst. Als abgeschlossen markieren speichert den Lernstand, ersetzt aber keine Prüfung deiner Arbeit.
Anforderungs-Prompt
Kopiere den Prompt und ersetze den Text in eckigen Klammern. KI-Ausgaben können variieren; beurteile das Ergebnis anhand der folgenden Prüfkriterien.
Hilf mir, eine persönliche Webseite zu erstellen. Gib nur eine vollständige index.html-Datei aus.
Ziel: Mich vorstellen, ein Projekt zeigen und Gelerntes festhalten.
Anforderungen:
1. Nur HTML und eingebettetes CSS, keine Frameworks, JavaScript, externen Schriften oder Bilder.
2. Name, kurze Vorstellung, Projektbereich und Lernnotizen einfügen.
3. Navigation und Hauptbutton müssen mit Seitenankern auf vorhandene Bereiche verweisen.
4. Auf Smartphones lesbar, mit ausreichendem Textkontrast und sichtbarem Tastaturfokus.
5. Fiktive Beispieldaten verwenden, keine Anmeldung, Zahlungen, Statistiken oder Formularübermittlung.
6. UTF-8-Kodierung und ein viewport-Tag einfügen.
Meine Vorstellung: [hier eine Vorstellung ohne sensible Daten eintragen]
Projektbeschreibung: [hier den gewünschten Inhalt beschreiben]Meine Projekt-Prüfliste
Prüfe jeden Punkt selbst. Diese Kästchen dienen nur der Selbstkontrolle; den Lernabschluss speicherst du über „Als abgeschlossen markieren“.
Wenn ein Problem auftritt
Die Datei zeigt Quellcode an
Prüfe, ob die Datei index.html statt index.html.txt heißt, und öffne sie im Browser statt im Editor.
Unlesbarer Text oder Änderungen erscheinen nicht
Speichere als UTF-8 und behalte das meta-charset-Tag. Prüfe, ob du dieselbe Datei bearbeitest und öffnest, dann speichere und lade neu.
Die KI verlangt Abhängigkeiten oder Schlüssel
Dieses Projekt braucht diese Schritte nicht. Ergänze: Schreibe es als einzelne HTML-Datei mit eingebettetem CSS neu, ohne Frameworks, Skripte oder externe Dienste.
Gestaltung oder Schaltflächen funktionieren nicht
Prüfe, ob der gesamte style-Bereich und alle schließenden Tags kopiert wurden. #work und #about müssen exakt den Ziel-IDs entsprechen. Vergleiche die Datei abschnittsweise mit dem Download-Beispiel.
Die KI fügt immer mehr Funktionen hinzu
Behalte drei Bereiche: Vorstellung, ein Projekt und Lernnotizen. Notiere weitere Funktionen für später und erfülle zuerst die Prüfkriterien der aktuellen Version.
Den nächsten Schritt machen
Füge ein zweites Projekt hinzu und erhalte das Layout für schmale Bildschirme. Schreibe zuerst die Prüfkriterien auf, lass die KI die Änderung vornehmen und prüfe selbst nach.
Veröffentlichen ist optional. Andere können nicht automatisch auf deine lokale Datei zugreifen. Prüfe vor der Hostingwahl Kontovoraussetzungen, Kosten und Sichtbarkeit und entferne sensible Angaben. Bei Bedarf lerne mehr unter Bereitstellung und Betrieb。
Weitere Projektideen findest du unter Full-Stack-Praxis、Werkzeuge zur Webseitengenerierung oder Fabric-Workflow。
Quellen und Rückmeldungen
Quellen geprüft: 2026-09-22. Referenzbeispiel v1; keine Framework-Abhängigkeiten.
Ein Problem mit diesem Tutorial melden, und beschreibe, bei welchem Schritt du festhängst und was du tatsächlich siehst.