Das lernen Sie
- Wie Sie eine Aufgabe des Nutzers beschreiben statt „bau eine Website“
- Wie Sie die Seite in Teilen bauen: Struktur, Stile, Verhalten
- Wie Sie die Seite auf dem Telefon und mit der Tastatur prüfen
- Was nicht in den Code der Seite gehört
Wichtige Begriffe
- HTML
- Die Struktur der Seite: Überschriften, Text, Schaltflächen, Formulare.
- CSS
- Die Gestaltung: Farben, Schriften, Abstände, Anpassung an den Bildschirm.
- JavaScript
- Das Verhalten: was beim Tippen passiert, Senden von Formularen, Animation.
- Responsives Design
- Die Seite ist auf Telefon, Tablet und Computer gleich gut bedienbar.
01Beschreiben Sie ein Szenario
Wählen Sie einen Nutzer und eine Handlung: ein Material finden, eine Anfrage senden, einen Katalog öffnen. Notieren Sie, was die Person vor der Handlung sieht und was sie danach bekommt. Das ist die Aufgabe für die erste Version.
Beispiel. „Ein Streamer kommt auf die Seite, versteht in 10 Sekunden, dass Spenden sofort an seiner Wallet ankommen, und tippt auf ‚Link erstellen‘.“
02Bauen Sie in Teilen
Bitten Sie die KI zunächst nur um die HTML-Struktur: Überschrift, Beschreibung, drei Vorteile und eine Schaltfläche. Danach die Stile, danach das Verhalten. Prüfen Sie jeden Teil im Browser, bevor Sie zum nächsten gehen: So finden Sie Fehler leicht.
Tipp. Bitten Sie um kurze Kommentare im Code: So lässt er sich leichter pflegen.
03Prüfen Sie auf dem Telefon und mit der Tastatur
Öffnen Sie die Seite auf einem schmalen Bildschirm: Nichts darf über den Rand hinausragen, und die Schaltflächen müssen sich mit dem Finger treffen lassen. Gehen Sie die Seite mit der Tab-Taste durch: Jeder Link und jede Schaltfläche muss einen gut sichtbaren Fokus bekommen.
- Breite 360 Pixel ohne horizontales Scrollen
- Hauptschrift nicht kleiner als 16 Pixel
- Formularfelder haben Beschriftungen
- Alle Links funktionieren
04Sicherheit
Alles, was im Code der Seite steht, sieht jeder Besucher. API-Schlüssel, Passwörter und Tokens gehören nie in den Code der Seite: Sie werden auf dem Server gespeichert.
- Fügen Sie keine Schlüssel und Passwörter in HTML und JavaScript ein
- Binden Sie keine Skripte von unbekannten Websites ein
05Bereiten Sie die Veröffentlichung vor
Fügen Sie einen verständlichen Seitentitel (title) und eine Beschreibung (description) hinzu: Suchmaschinen zeigen sie an. Prüfen Sie, ob die Bilder Beschreibungen (alt) haben und die Seite im mobilen Internet schnell öffnet.
Vor der Veröffentlichung
- Die Seite löst ein klares Szenario
- Auf dem Telefon gibt es kein horizontales Scrollen
- Alle Schaltflächen und Links funktionieren und sind mit der Tastatur erreichbar
- Im Code stehen keine Schlüssel, Passwörter und Tokens
- Es gibt title, description und Bildbeschreibungen
Häufige Fehler und wie es richtig geht
Die KI sofort „die ganze Website bauen“ lassen
Beginnen Sie mit einem Szenario und bauen Sie in Teilen.
Nur auf dem Computer prüfen
Die meisten Besucher kommen mit dem Telefon.
Den API-Schlüssel direkt im Code der Seite
Geheimnisse werden nur auf dem Server gespeichert.
Ohne title und description veröffentlichen
Ohne sie wird die Seite in der Suche schlechter gefunden.
Probieren Sie es selbst
Bauen Sie die Seite Ihres Projekts: Überschrift, Beschreibung, drei Möglichkeiten und eine funktionierende Aktion.
- Beschreiben Sie das Nutzerszenario in einem Satz
- Lassen Sie sich von der KI die HTML-Struktur geben und prüfen Sie sie im Browser
- Fügen Sie Stile hinzu und prüfen Sie bei einer Breite von 360 Pixeln
- Gehen Sie die Seite mit der Tab-Taste durch und notieren Sie, was Ihnen auffällt
Ergebnis. Eine funktionierende Seite und eine Liste der Prüfungen, die sie bestanden hat.
Testen Sie sich
Antworten Sie zuerst im Kopf und öffnen Sie dann die Antwort.
1Warum ist es besser, die Seite in Teilen zu bauen?Antwort
Jeder Teil wird sofort geprüft, und Fehler sind leicht zu finden. Großen Code am Stück zu debuggen ist schwer.
2Darf ein API-Schlüssel in JavaScript der Seite stehen?Antwort
Nein. Den Code der Seite sieht jeder Besucher, Schlüssel gehören auf den Server.
3Wie prüfen Sie schnell die Zugänglichkeit einer Seite?Antwort
Gehen Sie sie mit der Tab-Taste durch: Alle Schaltflächen und Links müssen einen sichtbaren Fokus bekommen.
Kurz gesagt
Ein Szenario, Aufbau in Teilen mit Prüfung im Browser, Telefon und Tastatur, keine Geheimnisse im Code, verständliche title und description. So wird die erste Seite funktional und nicht nur schön.