Deine erste Website ohne Code

Deine erste No-Code-Website ist das Projekt, das dir den schnellsten Erfolg bringt. In wenigen Stunden hast du etwas Sichtbares — und der Moment, in dem deine Seite zum ersten Mal im Browser erscheint, ist unschlagbar motivierend.

🔄 Quick Recall: In der letzten Lektion hast du das Entscheidungsframework gelernt — Plattformwahl nach Projekttyp, DSGVO-Check und Kosten in EUR. Jetzt baust du.

Schritt 1: Planung — Bevor du baust

Hilf mir, meine Website zu planen:

Zweck: [Firmenwebsite / Portfolio / Landingpage /
  Online-Shop / Vereinsseite]
Zielgruppe: [wer besucht die Seite]
Ziel-Aktion: [was sollen Besucher tun —
  kontaktieren, kaufen, buchen, anmelden]
Branche: [welche]

Erstelle:
1. Seitenstruktur (welche Seiten, Navigation)
2. Homepage-Aufbau (Sektionen von oben nach unten)
3. Textentwürfe für jede Sektion
4. SEO-Grundlagen (Title, Description, H1)
5. Impressum-Checkliste

Die bewährte Homepage-Struktur

Fast jede erfolgreiche Website folgt diesem Muster:

Jede Sektion hat einen Job. Wenn sie diesen Job nicht erfüllt, lösch sie.

✅ Quick Check: Dein Handwerksbetrieb hat eine No-Code-Website gebaut. Was fehlt noch, bevor sie live gehen kann? (Antwort: Impressum mit vollständigen Angaben, Datenschutzerklärung, Cookie-Banner mit aktivem Opt-in, SSL-Zertifikat — und prüfe, ob die mobile Version funktioniert.)

Design-Grundregeln für Nicht-Designer

Du musst kein Designer sein. Halte dich an vier Regeln:

1. Weißraum ist dein Freund — Lass Elemente atmen. Mehr Platz = professioneller.

2. Maximal 2 Schriftarten — Eine für Überschriften, eine für Fließtext.

3. 3 Farben reichen — Hauptfarbe, Akzentfarbe, Neutralgrau. KI hilft:

Schlage mir ein professionelles Farbschema vor:

Branche: [welche]
Wirkung: [seriös / modern / freundlich / technisch]
Bestehende Farben: [Logo-Farbe, falls vorhanden]

Gib mir: Hex-Codes, wo welche Farbe einsetzen,
Beispiel-Kombination.

4. Ausrichtung konsistent halten — Alles links oder zentriert, nie gemischt.

Impressum und Datenschutz — Deutsche Pflicht

Jede kommerzielle Website in Deutschland braucht:

Impressum (DDG §5):

• Name, Anschrift, Kontakt (E-Mail + Telefon oder Kontaktformular)
• Handelsregister-Eintrag, Umsatzsteuer-IdNr.
• Berufsbezeichnung und Kammer (bei Freiberuflern)
• Innerhalb von 2 Klicks erreichbar, von jeder Seite

Datenschutzerklärung (DSGVO Art. 13):

• Welche Daten werden erhoben, warum, wie lange
• Alle eingesetzten Dienste auflisten (Analytics, Hosting, Fonts)
• Rechte der Betroffenen (Auskunft, Löschung, Widerspruch)

Cookie-Banner (TTDSG):

• Aktives Opt-in — vorausgewählte Checkboxen sind verboten
• „Weiter surfen" zählt NICHT als Einwilligung
• Must-have: Ablehnen-Button gleich prominent wie Akzeptieren
• Deutsche Lösungen: Real Cookie Banner, Borlabs Cookie, Usercentrics

Tipp: e-Recht24.de bietet Impressum- und Datenschutz-Generatoren speziell für deutsche Websites.

Veröffentlichungs-Checkliste

Bevor du auf „Live schalten" klickst:

• SSL-Zertifikat aktiv (https://)
• Eigene Domain verbunden
• Impressum vollständig und von jeder Seite erreichbar
• Datenschutzerklärung mit allen Diensten
• Cookie-Banner mit aktivem Opt-in
• Mobile Vorschau auf echtem Smartphone getestet
• Alle Links funktionieren
• Kontaktformular getestet
• Ladegeschwindigkeit akzeptabel (<3 Sekunden)
• Google Search Console eingerichtet

Key Takeaways

• Planung vor Bau: Definiere Zweck, Zielgruppe, Kernseiten und Ziel-Aktion, bevor du den Website-Builder öffnest
• Die bewährte Homepage-Struktur (Hero → Social Proof → Leistungen → Prozess → Referenzen → CTA) funktioniert für fast jede Branche
• Deutsches Recht erfordert Impressum, Datenschutzerklärung und DSGVO-konformes Cookie-Banner — Verstöße kosten 500-2.000€ pro Abmahnung
• Design-Grundregeln für Nicht-Designer: viel Weißraum, 2 Schriftarten, 3 Farben, konsistente Ausrichtung

Up Next

In der nächsten Lektion baust du eine richtige App — mit Datenmodell, Nutzerrollen und interaktiver Logik. Der Sprung von „Website" zu „Web-App".