ohne Baukasten · ohne CMS · mit Verständnis

Webseiten von Hand bauen

Diese Seite erklärt, wie eine moderne kleine Webseite entsteht: mit HTML für die Struktur, CSS für Gestaltung und Responsive Design sowie etwas JavaScript für Verhalten. Keine fertige CMS-Kiste, kein Baukasten, kein Plugin-Stapel. Nur nachvollziehbarer Code, den man lesen, ändern und wirklich verstehen kann.

Direkt zum Bauplan Zur Veröffentlichungs-Checkliste
Grundgedanke

Warum überhaupt von Hand bauen?

Baukästen und CMS-Systeme haben ihren Platz. Aber wer verstehen will, wie Webseiten wirklich funktionieren, kommt irgendwann an den Punkt, an dem der eigene Code ehrlicher ist als jede Oberfläche mit hundert Optionen.

1

Kontrolle

Du bestimmst selbst, welche Datei was tut. Es gibt keine Theme-Ebene, keine Plugin-Abhängigkeit und keine versteckten Einstellungen, die das Verhalten der Seite verändern.

2

Geschwindigkeit

Eine handgebaute Seite kann sehr schlank sein. Wenn nur HTML, CSS und wenig JavaScript geladen werden, bleibt die Seite schnell, robust und gut wartbar.

3

Lerneffekt

Jede Änderung zeigt direkt, was im Browser passiert. Dadurch lernt man Struktur, Gestaltung, Semantik, Barrierefreiheit, SEO und sauberes Denken beim Entwickeln.

Wichtig: Handarbeit bedeutet nicht, alles kompliziert zu machen. Im Gegenteil: Eine gute handgebaute Seite ist oft einfacher als ein System, das für jedes Problem ein Plugin verlangt.
Startausrüstung

Was du wirklich brauchst

Für eine einfache statische Webseite reicht sehr wenig. Das ist der Charme daran: Du brauchst keinen Server-Stack, keine Datenbank, keinen Login-Bereich und kein Administrationspanel, wenn du nur eine Informationsseite bauen willst.

Baustein Aufgabe Warum wichtig?
HTML Struktur der Inhalte: Überschriften, Abschnitte, Navigation, Texte, Links, Bilder. HTML ist das Fundament. Ohne saubere Struktur bleibt jede Gestaltung nur Fassade.
CSS Layout, Farben, Abstände, Typografie, Responsive Design, Karten, Buttons und Navigation. CSS macht aus rohem Inhalt eine lesbare, nutzbare und eigenständige Oberfläche.
JavaScript Kleine Interaktionen: Menü schließen, kontrolliertes Scrollen, dynamische Kleinigkeiten. JavaScript sollte helfen, nicht die ganze Seite dominieren.
Editor Zum Schreiben des Codes, zum Beispiel VS Code, Notepad++, Kate oder ein anderer Texteditor. Du brauchst ein Werkzeug, das Textdateien sauber speichert und Syntax hervorhebt.
Browser Zum Testen auf Desktop und mobil. Wichtig sind Entwicklerwerkzeuge und responsive Ansicht. Der Browser ist dein echtes Prüfgerät. Er zeigt, was Nutzer wirklich sehen.
Webspace Zum Veröffentlichen der fertigen Dateien per FTP, Dateimanager oder Deployment. Für statische Seiten genügt meist ein normaler Hosting-Ordner mit SSL.
Bauplan

So entsteht eine Seite wie diese

Diese Seite nutzt genau das, was sie erklärt: eine einzelne index.html, darin der sichtbare Inhalt, das CSS im Kopfbereich und ein kleines JavaScript am Ende. Für größere Projekte kann man CSS und JS auslagern, aber zum Lernen ist eine Onefile-Seite sehr übersichtlich.

Projektordner anlegen

Lege einen Ordner für die Seite an. Darin liegt mindestens eine Datei namens index.html. Diese Datei ist die Startseite, die der Browser automatisch öffnet.

HTML-Grundgerüst schreiben

Beginne mit <!DOCTYPE html>, <html>, <head> und <body>. Im Kopfbereich stehen Titel, Beschreibung, Zeichensatz, Ansichtsgröße und später CSS.

Inhalte sinnvoll gliedern

Nutze header, nav, main, section, article und footer. Das macht die Seite verständlich für Menschen, Browser und Suchmaschinen.

Gestaltung mit CSS aufbauen

Definiere Farben als CSS-Variablen, lege Maximalbreiten fest, baue Karten, Raster, Abstände und eine mobile Ansicht. Erst Lesbarkeit, dann Effekte.

Navigation mobil machen

Eine feste Topbar sorgt dafür, dass die Navigation erreichbar bleibt. Auf kleinen Bildschirmen wird daraus ein Hamburger-Menü, das sich per Klick öffnen und schließen lässt.

Rechtliches und Veröffentlichung prüfen

Impressum, Datenschutz, interne Links, externe Links, SSL, Ladeverhalten und mobile Darstellung gehören zur Freigabe dazu. Eine Seite ist nicht fertig, nur weil sie hübsch aussieht.

/md-cyberfun.de/ ├── index.html ├── icon.png optional ├── share.jpg optional └── assets/ optional ├── bilder/ ├── css/ └── js/
Struktur

HTML: Erst Inhalt, dann Optik

HTML beschreibt nicht, wie etwas aussehen soll, sondern was etwas ist. Eine Überschrift ist eine Überschrift. Eine Navigation ist eine Navigation. Ein Abschnitt ist ein Abschnitt. Genau diese Klarheit macht eine handgebaute Seite stabil.

Semantik statt Div-Suppe

Natürlich darf man <div> benutzen. Aber wenn alles nur ein Div ist, verliert die Seite Bedeutung. Besser ist eine klare Struktur:

<header>
  <nav>...</nav>
</header>

<main>
  <section id="thema">
    <h2>Thema</h2>
    <p>Inhalt...</p>
  </section>
</main>

<footer>...</footer>

Überschriften richtig nutzen

Eine Seite sollte normalerweise genau ein Hauptthema als h1 haben. Darunter folgen h2 für große Bereiche und h3 für Unterpunkte.

Eine h1 für das Hauptthema.
h2 für Hauptabschnitte wie Aufbau, CSS, SEO.
h3 für Karten, Unterpunkte und einzelne Schritte.
Keine Überschrift nur wegen der Schriftgröße wählen.
Gute HTML-Struktur ist wie ein sauberer Bauplan. CSS kann viel reparieren, aber eine chaotische Struktur bleibt darunter chaotisch.
Gestaltung

CSS: Layout, Rhythmus und Charakter

CSS ist mehr als Farbe. Es entscheidet darüber, ob eine Seite ruhig wirkt, ob Inhalte atmen können, ob mobile Nutzer zurechtkommen und ob die Oberfläche einen eigenen Charakter bekommt.

Variablen verwenden

Farben, Breiten und Schatten sollten zentral definiert werden. Dann muss man später nicht an zwanzig Stellen suchen.

:root {
  --bg: #0b1020;
  --text: #f8fafc;
  --accent: #38bdf8;
  --max: 1180px;
}

Mobile zuerst denken

Starte mit einer einspaltigen Ansicht. Größere Bildschirme bekommen später über Media Queries mehr Spalten.

.grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

Abstände ernst nehmen

Gute Abstände sind kein Luxus. Sie entscheiden, ob eine Seite lesbar bleibt oder wie eine überfüllte Pinnwand wirkt.

.section {
  padding: 48px 0;
}

.card {
  padding: 22px;
  border-radius: 24px;
}
Verhalten

JavaScript: Nur so viel wie nötig

JavaScript ist hier kein Fundament, sondern eine kleine Hilfe. Die Seite bleibt auch ohne komplexe Skripte verständlich. Das Script sorgt vor allem dafür, dass das mobile Menü nach einem Klick schließt und der Nach-oben-Button sauber arbeitet.

Das Script dieser Seite

Dieses Script kann man am Ende vor </body> einfügen. Es sucht die Menüpunkte, schließt beim Klick das mobile Menü und scrollt kontrolliert zum Ziel.

<script>
document.addEventListener("DOMContentLoaded", function () {
  const navToggle = document.querySelector(".nav-toggle");
  const navLinks = document.querySelectorAll(".nav-links a[href^='#']");
  const toTop = document.querySelector(".to-top");

  function closeMenu() {
    if (navToggle) {
      navToggle.checked = false;
    }
  }

  navLinks.forEach(function (link) {
    link.addEventListener("click", closeMenu);
  });

  if (toTop) {
    toTop.addEventListener("click", function () {
      closeMenu();
    });
  }
});
</script>
Auffindbarkeit

SEO beginnt nicht bei Tricks

Suchmaschinenoptimierung bedeutet zuerst: klare Inhalte, klare Titel, gute Struktur, passende Beschreibung, interne Links und eine Seite, die technisch funktioniert. Keyword-Stuffing ersetzt keine nützliche Seite.

Wichtige Head-Tags

Jede Seite sollte mindestens Titel, Beschreibung, Zeichensatz und Viewport besitzen. Für Social Sharing helfen Open-Graph-Tags.

<title>Webseiten von Hand bauen</title>
<meta name="description" content="..." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="canonical" href="https://example.de/" />

Gute Inhalte statt leere Versprechen

Eine Seite rankt nicht besser, weil sie „modern“, „professionell“ oder „innovativ“ behauptet. Sie wird besser, wenn sie konkrete Fragen beantwortet.

Beschreibe klar, worum es geht.
Nutze echte Überschriften statt Marketing-Slogans.
Verlinke relevante Abschnitte intern.
Halte rechtliche und technische Basis sauber.
Livegang

Von der Datei zur veröffentlichten Seite

Wenn die Seite lokal funktioniert, muss sie auf den Webspace. Bei klassischen Hostern reicht es häufig, die index.html in den Zielordner der Domain zu legen. Wichtig: immer prüfen, ob die Domain wirklich auf den richtigen Ordner zeigt.

1. Lokal testen

Öffne die Datei direkt im Browser. Prüfe Links, Navigation, mobile Ansicht, Rechtschreibung, Impressum und Datenschutz.

2. Hochladen

Lade die Datei per FTP, SFTP oder Hosting-Dateimanager hoch. Die Startdatei muss normalerweise index.html heißen.

3. Online prüfen

Rufe die Domain mit https:// auf. Teste Desktop, Smartphone, interne Links, externe Links und die Darstellung im Browser.

Abnahme

Checkliste vor Veröffentlichung

Diese Liste ist bewusst praktisch. Sie hilft, eine kleine Webseite wirklich veröffentlichungsfähig zu bekommen und nicht nur optisch fertig aussehen zu lassen.

Technik

Die Startdatei heißt index.html.
Alle internen Links springen zu vorhandenen IDs.
Die Navigation funktioniert mobil und auf Desktop.
Bilder haben sinnvolle alt-Texte.
Die Seite nutzt HTTPS.
Keine unnötigen externen Skripte oder Tracker.

Inhalt und Rechtliches

Titel und Beschreibung passen zum Inhalt.
Impressum ist erreichbar.
Datenschutz ist erreichbar.
Kontaktadresse ist korrekt geschrieben.
Externe Links öffnen sicher mit rel="noopener noreferrer", wenn sie in neuem Tab öffnen.
Texte wurden auf Tippfehler und falsche Behauptungen geprüft.
Selbst nachbauen

Wie du diese Seite als Vorlage nutzt

Der einfachste Weg: Speichere diese Datei als index.html, öffne sie im Editor und ersetze Schritt für Schritt Inhalte, Farben und Links. Nicht alles auf einmal ändern. Erst verstehen, dann umbauen.

1. Titel ändern

Ändere <title>, h1 und die Meta-Beschreibung auf dein Thema.

2. Navigation anpassen

Jeder Menülink braucht ein Ziel: href="#thema" springt zu id="thema".

3. Sektionen füllen

Ersetze die Beispielabschnitte durch echte Inhalte. Lieber ausführlich und klar als kurz und nichtssagend.

4. Veröffentlichen

Lade die fertige Datei in den Domainordner hoch und teste sie direkt online.

Diese Seite ist gleichzeitig Erklärung und Beispiel. Sie zeigt Navigation, Layout, Inhaltsstruktur, SEO-Grundlagen, interne Sprungmarken, Impressum und Datenschutz in einer einzigen Datei.
↑