Kennst du dieses Kribbeln, wenn dir eine Website-Idee im Kopf herumspukt – und dann die Frage: Wo fange ich an? Du suchst, klickst, liest … und stehst plötzlich im Nebel aus Fachbegriffen. Frustig. Genau hier holen wir dich ab. Wir gehen die ersten Schritte gemeinsam, klar und stressfrei. Keine Abkürzungen, die später teuer werden. Stattdessen ein gerader Weg von Null bis zur ersten kleinen Seite, die du selbst baust, stylst und ausbaust.
Das Beste daran: Schon mit den HTML und CSS Grundlagen siehst du schnelle Erfolge. Erst das Gerüst, dann Farbe, Abstände, Layout. Baustein für Baustein. Klingt machbar? Ist es. In den nächsten Kapiteln bekommst du eine strukturierte Anleitung, handliche Codebeispiele und kurze Übungen. Und du wirst merken: Sobald die ersten Elemente im Browser auftauchen und reagieren, macht es Klick – und der Rest fügt sich Schritt für Schritt.
HTML und CSS Grundlagen: Überblick, Setup & Arbeitsweise
Wenn du startest, hilft eine klare Rollenverteilung: HTML ist Struktur, CSS ist Gestaltung. Stell dir eine Zeitung vor: Artikel, Überschriften und Bilder sind HTML. Wie sie angeordnet sind, welche Schriften und Farben sie haben – das macht CSS. Ohne HTML gäbe es nichts zu sehen. Ohne CSS sähe alles wie eine Textwüste aus. Erst zusammen wird daraus eine lesbare, schöne, nutzbare Website. Genau dieses Zusammenspiel üben wir jetzt – in kleinen, gut verdaulichen Schritten.
HTML vs. CSS: Aufgaben und Zusammenspiel
HTML (HyperText Markup Language) strukturiert Inhalte: Überschriften, Absätze, Bilder, Navigation. Jedes Element hat Bedeutung (Semantik). Eine h1 kennzeichnet die Hauptüberschrift, nav steht für Navigation, main für den Hauptinhalt. Diese Semantik hilft Suchmaschinen wie auch Screenreadern – gut für SEO und Barrierefreiheit.
CSS (Cascading Style Sheets) kümmert sich um das Aussehen: Farben, Abstände, Anordnung, Typografie. „Kaskadierend“ heißt: Regeln vererben sich und können überschrieben werden. Du setzt z. B. eine Grundschrift im body und passt Details an Buttons oder Links gezielt an. Für eine knackige Einführung lohnt sich ein Blick in die kompakte Erklärung der MDN Web Docs – dort findest du Definitionen und weiterführende Beispiele.
Das Zusammenspiel läuft so: HTML liefert die Elemente, CSS wählt sie aus und stylt sie. Mit Klassen und IDs wirst du präziser. Ergebnis: Inhalt und Präsentation bleiben getrennt – ein Prinzip, das Projekte langfristig sauber hält. Und ganz ehrlich: Diese Trennung spart dir später Nerven.
Editor, Browser-Tools & Projekt-Setup
Zum Start reicht ein moderner Code-Editor wie Visual Studio Code. Ein schlankes Projekt besteht aus index.html und style.css in einem Ordner. Mit einem lokalen Server (z. B. VS Code „Live Server“-Extension) siehst du Änderungen sofort im Browser.
Die DevTools deines Browsers (F12) sind Gold wert: Elemente inspizieren, Box-Modell sehen, CSS-Regeln live testen. Du kannst Werte direkt verändern, ohne den Code zu zerschießen. Kurz noch ein Tipp: Aktiviere die Device-Toolbar, um verschiedene Bildschirmgrößen zu simulieren – frühe Checks sparen später viel Zeit. Klingt nach Kleinkram? Wart’s ab, du wirst es lieben.
HTML und CSS für Anfänger: Schritt für Schritt zur ersten Webseite
Der schnellste Lernfortschritt entsteht, wenn du wirklich baust. Lass uns eine kleine Seite anlegen: eine Überschrift, etwas Text, ein Bild und ein Button. Dann verknüpfen wir CSS, richten Abstände ein und sorgen für ein simples, hübsches Layout. Fertig ist dein erstes Mini-Portfolio – perfekt zum Erweitern. Bereit?
- Kleine Checkliste: Lege einen Projektordner an und öffne ihn im Editor.
- Erstelle index.html und style.css – verknüpfe beides korrekt.
- Schreibe semantisches HTML (header, main, footer).
- Style zuerst global (Schrift, Farben), dann Details (Buttons, Karten).
- Teste früh auf Mobilansicht mit den Browser-DevTools.
Nun zum Startcode. Eine minimale HTML-Boilerplate mit verknüpftem CSS sieht so aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meine erste Seite</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Hallo, ich bin Alex!</h1>
<nav><a href="#about">Über mich</a> | <a href="#work">Projekte</a></nav>
</header>
<main>
<section id="about">
<h2>Über mich</h2>
<p>Ich lerne Webentwicklung und baue erste Projekte.</p>
<img src="portrait.jpg" alt="Porträt von Alex" width="240" />
<button>Kontakt</button>
</section>
</main>
<footer>© 2025 Alex</footer>
</body>
</html>Und ein kleines CSS-Grundset:
:root { --brand: #3b82f6; --text: #1f2937; --bg: #ffffff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--text); background: var(--bg); }
main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
a { color: var(--brand); text-decoration: none; }
button { background: var(--brand); color: #fff; border: 0; padding: .6rem 1rem; border-radius: .5rem; }Ein visueller Eindruck hilft oft mehr als tausend Worte:
Grundlegende HTML-Tags: Liste mit Beispielen
Die wichtigsten Tags lernst du am schnellsten im Überblick. Merke dir: Nutze semantische Elemente, wo immer möglich – sie beschreiben Bedeutung statt bloßer Optik. So verstehen nicht nur Browser, sondern auch Suchmaschinen, was deine Inhalte sind. Unten findest du eine kompakte Tabelle mit zentralen Elementen und Minibeispielen, die du sofort kopieren kannst. Klingt trocken? Probier sie direkt im Editor aus – dann wird’s lebendig.
Diese Elemente gliedern eine Seite in Bereiche. header ist der Kopfbereich (Logo, Navigation), nav bündelt Navigationslinks, main enthält den Hauptinhalt, footer den Fußbereich. Trivial? Vielleicht. Wirksam? Auf jeden Fall. Screenreader können so besser ankern, und Suchmaschinen erkennen den Aufbau. Weniger Chaos, mehr Klarheit – bereits im Grundgerüst.
| Tag | Bedeutung | Kurzbeispiel |
|---|---|---|
| html | Wurzelelement | <html lang="de">…</html> |
| head | Metadaten, Titel, Links | <head><title>Seite</title><link rel="stylesheet" href="style.css"></head> |
| body | Sichtbarer Inhalt | <body>…</body> |
| header | Kopfbereich | <header><h1>Logo</h1></header> |
| nav | Navigation | <nav><a href="#">Start</a></nav> |
| main | Hauptinhalt | <main><article>…</article></main> |
| footer | Fußbereich | <footer>© 2025</footer> |
- Überschriften h1–h6: Nutze pro Seite genau eine h1; Unterüberschriften folgen als h2, h3 usw.
- Text p: Für Absätze – bitte keine Überschriften mit größerer Schrift simulieren.
- Links a: Mit aussagekräftigem Linktext (nicht „hier klicken“). Barrierefreiheit zahlt sich aus.
- Bilder img: Immer mit alt-Text; er beschreibt, was das Bild zeigt, und hilft Screenreadern.
- Listen ul/ol: Für Aufzählungen (unordered) oder Schritte (ordered). Buttons für Aktionen.
Ein Mini-Beispiel aus der Praxis: Ein Button sollte button sein, wenn er etwas auf der Seite auslöst (z. B. ein Modal). Ein a-Link führt zu einer neuen URL. Klare Rollen vermeiden Missverständnisse – für Nutzer wie Maschinen. Schon mal erlebt, dass ein „Button-Link“ nicht reagiert, wie du erwartest? Genau das.
CSS-Selektoren verständlich erklärt für Einsteiger
CSS-Selektoren sind deine Fernbedienung: Du wählst aus, welches Element du stylen willst. Je präziser du auswählst, desto kontrollierter die Gestaltung. Lerne zuerst die Basis (Element, Klasse, ID, Attribut), dann Kombinatoren und Pseudoklassen. Wichtig ist auch die Spezifität: Sie entscheidet, welche Regel gewinnt, wenn mehrere Regeln kollidieren. Klingt theoretisch – aber ein klarer Kopf hier spart dir später Debugging-Marathons.
Element-, Klassen-, ID-Selektoren und Attribut-Selektoren
- Elementselektor: p { … } stylt alle p-Absätze.
- Klassenselektor: .card { … } trifft alle Elemente mit class=“card” – die Arbeitspferde des CSS.
- ID-Selektor: #hero { … } wählt das Element mit id=“hero” (IDs sollten pro Seite einzigartig sein).
- Attributselektor: a[target=“_blank”] { … } stylt nur Links, die ein neues Tab öffnen.
Beispiel:
/* Basis */
p { line-height: 1.6; }
.card { padding: 1rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
#hero { background: #f0f9ff; }
a[target="_blank"] { text-decoration: underline dashed; }Tipp: Arbeite überwiegend mit Klassen. IDs sparsam einsetzen – meist für Ankerpunkte oder JavaScript-Hooks.
Kombinatoren, Pseudoklassen/-elemente & Spezifität
Kombinatoren verknüpfen Selektoren: article p trifft p in article; article > p nur direkte Kinder. Mit Pseudoklassen wie :hover, :focus oder :nth-child() steuerst du Zustände und Positionen. Pseudoelemente ::before und ::after fügen dekorative Inhalte ein, ohne das HTML aufzublähen.
nav a:hover { color: #2563eb; }
.card > h3 { margin-top: 0; }
.list li:nth-child(2) { font-weight: 600; }
.btn::after { content: " →"; }MDN fasst es prägnant: „Spezifität ist ein Mechanismus, mit dem der Browser entscheidet, welche CSS-Regel angewendet wird, wenn mehrere Regeln auf das gleiche Element anwendbar sind.“ Lies die Details in den MDN-Selektorreferenzen.
Zur Visualisierung hilft ein Diagramm der Selektoren-Hierarchie:
Responsive Layout: Grundlagen mit CSS Flexbox
Deine Seite soll auf dem Handy genauso gut funktionieren wie auf dem Laptop. Das erreichst du mit einem Mobile-First-Ansatz, Flexbox für Layouts und Media Queries für sinnvolle Breakpoints. Denk weniger in starren Pixeln und mehr in Flows, flexiblen Boxen und relativen Einheiten. Gute Nachricht: Schon wenige Regeln bringen spürbar Struktur.
Flexbox-Grundkonzepte: Achsen, Container, Items
Flexbox definiert einen flex-Container, in dem Items entlang der Hauptachse verteilt werden. Standard ist row (horizontal), mit column wechselst du auf vertikal – ideal für Mobile-First. Wichtige Eigenschaften: justify-content (Ausrichtung auf Hauptachse), align-items (Querachse) und gap (Abstände ohne Margins-Chaos).
.grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 260px; /* wachsen, schrumpfen, Basisbreite */ }
.hero { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 768px) {
.hero { flex-direction: row; align-items: center; }
}Ein kleines Praxisbild: Ein Café aus meiner Nachbarschaft stellte seine Startseite von starrem Spalten-Layout (nur Desktop) auf Flexbox um. Zwei Wochen später: 28% längere Verweildauer auf Mobilgeräten, 15% mehr Klicks auf „Tisch reservieren“. Warum? Inhalte reihten sich sauber untereinander, Buttons waren sofort erreichbar. Mobilfreundlichkeit verkauft – so simpel kann es sein.
Responsive Breakpoints: Mobile-First mit Media Queries
Starte mit einem einfachen, linearen Mobile-Layout. Baue dann bei größeren Viewports Spalten und Sidebars ein. Typische Breakpoints sind 480px, 768px, 1024px – wähle sie aber nach deinem Design, nicht nach Modellnamen. Ein bewährtes Muster:
- Mobile-First: Standard-CSS ohne Queries für kleine Screens schreiben.
- Breakpoints sparsam: Nur dort einsetzen, wo das Layout tatsächlich „kippt“.
- Relative Einheiten: rem, %, minmax(); Bilder mit max-width: 100%.
- Testen auf echten Geräten: DevTools sind super – Realität ist besser.
/* Mobile-First Basis */
.main { padding: 1rem; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
/* Tablet */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}Wenn du vertiefen willst, liefert der Flexbox-Artikel der MDN Web Docs klare Referenzen und Beispiele. Und jetzt Hand aufs Herz: Welche kleine Sektion wirst du als Nächstes bauen – Hero, Karteikarten, Footer? Fang an, iteriere, und die HTML und CSS Grundlagen werden zur Routine.
Hey, ich bin Karwl und das ist mein Blog. Ich liebe alles zu den Themen 🌱 Garten & Pflanzen, 🤖 KI & Tech, 🌐 Web & Coding und würde mich freuen, wenn du hier öfters mal vorbei schaust.