Willkommen im zweiten Teil des HTML- und CSS-Tutorials. Im Teil 1 haben wir eine Website für den Rechtsanwalt Peter Maier aus Limberlachen mit HTML aufgebaut. Dabei hast du die Grundlagen von HTML kennengelernt und Schritt für Schritt ein vollständiges HTML-Dokument aufgebaut. Du hast gelernt, wie Inhalte strukturiert und semantische Bereiche angelegt werden. Jetzt bist du mit HTML-Elementen und CSS-Klassen vertraut und hast einen soliden Rohbau auf einem stabilen Fundament. Die Struktur steht, jetzt geht es um die Gestaltung, also das Design. Das Design wird im Webdesign mit der Auszeichnungssprache CSS realisiert. Im zweiten Teil des Tutorials stellen wir die Projekt-Website für die Rechtsanwaltskanzlei fertig.
Was ist CSS?
CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache, die das Erscheinungsbild von Webseiten beschreibt. Während HTML die Struktur und den Inhalt einer Website festlegt, bestimmt CSS, wie diese Inhalte dargestellt werden. Mit CSS können Farben, Schriftarten, Abstände, Hintergründe, Rahmen und viele weitere gestalterische Eigenschaften definiert werden. Dadurch wird aus einer einfachen HTML-Struktur eine ansprechend gestaltete und benutzerfreundliche Webseite.
Ein großer Vorteil von CSS besteht darin, dass Gestaltung und Inhalt voneinander getrennt werden. Änderungen am Design können zentral in einer CSS-Datei vorgenommen werden, ohne den eigentlichen HTML-Code anpassen zu müssen. Das vereinfacht die Pflege von Websites erheblich und sorgt für eine einheitliche Darstellung auf allen Unterseiten. Gleichzeitig reduziert sich der Aufwand bei späteren Anpassungen oder Modernisierungen des Designs.
Moderne Websites wären ohne CSS kaum denkbar. Die Technologie ermöglicht flexible Layouts, Animationen, Hover-Effekte und die Anpassung von Webseiten an unterschiedliche Bildschirmgrößen. Dadurch können Websites auf Smartphones, Tablets und Desktop-Computern optimal dargestellt werden. CSS gehört zusammen mit HTML und JavaScript zu den wichtigsten Grundtechnologien des modernen Webdesigns und bildet die Grundlage für die visuelle Gestaltung nahezu aller Webseiten im Internet.
CSS-Boxmodell, Flexbox und Grid erklärt
Nachfolgend schauen wir uns drei zentrale Konzepte von CSS, die als Grundlage sehr wichtig sind: das Boxmodell, Flexbox und CSS Grid. Diese Techniken bestimmen, wie Elemente auf einer Webseite dargestellt, positioniert und angeordnet werden. Während das Boxmodell die Grundlage für jedes einzelne HTML-Element bildet, helfen Flexbox und Grid dabei, mehrere Elemente flexibel und übersichtlich auf der Seite zu platzieren.
Das CSS-Boxmodell
Das CSS-Boxmodell beschreibt den Aufbau eines HTML-Elements. Jedes Element auf einer Webseite, egal ob Überschrift, Absatz, Bild oder Button, wird vom Browser als rechteckige Box behandelt. Diese Box besteht aus vier Bereichen: dem Inhalt (Content), dem Innenabstand (Padding), dem Rahmen (Border) und dem Außenabstand (Margin).
Der Inhalt enthält die eigentlichen Daten des Elements, beispielsweise Text oder Bilder. Um den Inhalt herum befindet sich das Padding. Es sorgt für einen Abstand zwischen dem Inhalt und dem Rahmen. Der Border bildet die sichtbare Umrandung des Elements. Außerhalb des Rahmens liegt schließlich die Margin, die den Abstand zu anderen Elementen festlegt.
Ein Beispiel:
.box {
width: 300px;
padding: 20px;
border: 2px solid #000;
margin: 30px;
}In diesem Beispiel erhält die Box eine Breite von 300 Pixeln. Der Inhalt wird durch 20 Pixel Innenabstand vom Rahmen getrennt. Der Rahmen ist 2 Pixel breit und schwarz. Zusätzlich sorgt die Margin dafür, dass die Box 30 Pixel Abstand zu benachbarten Elementen hat.
Das Verständnis des Boxmodells ist besonders wichtig, weil es erklärt, warum Elemente oft größer erscheinen als die im CSS angegebene Breite oder Höhe. Standardmäßig werden Padding und Border zur eigentlichen Breite hinzugerechnet. Deshalb wird oft folgende Regel verwendet:
* {
box-sizing: border-box;
}Dadurch werden Padding und Border in die Gesamtbreite eingerechnet, was die Berechnung von Layouts deutlich vereinfacht.
Flexbox als flexible Anordnung von Elementen
Flexbox ist ein Layout-System, das speziell entwickelt wurde, um Elemente flexibel innerhalb eines Containers auszurichten. Es eignet sich besonders gut für horizontale oder vertikale Anordnungen von Elementen und wird häufig für Navigationen, Button-Gruppen, Karten oder Menüs verwendet.
Damit Flexbox genutzt werden kann, wird einem übergeordneten Container die Eigenschaft display: flex zugewiesen.
.container {
display: flex;
}Alle direkten Kind-Elemente des Containers werden dadurch automatisch zu sogenannten Flex-Elementen. Standardmäßig werden diese nebeneinander in einer Zeile angeordnet.
Ein vollständiges Beispiel:
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}<div class="container">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>Die Eigenschaft justify-content: center zentriert die Elemente horizontal innerhalb des Containers. Mit align-items: center werden sie vertikal ausgerichtet. gap: 20px erzeugt einen Abstand zwischen den einzelnen Boxen.
Ein großer Vorteil von Flexbox ist die einfache Erstellung responsiver Layouts. Mit einer zusätzlichen Regel können Elemente beispielsweise auf kleineren Bildschirmen automatisch untereinander dargestellt werden:
.container {
display: flex;
flex-wrap: wrap;
}Dadurch umbrechen die Elemente automatisch in die nächste Zeile, wenn nicht genügend Platz vorhanden ist.
CSS Grid
Während Flexbox hauptsächlich für eindimensionale Layouts entwickelt wurde, arbeitet CSS Grid zweidimensional. Das bedeutet, dass gleichzeitig mit Zeilen und Spalten gearbeitet werden kann. Dadurch eignet sich Grid hervorragend für komplexe Seitenlayouts.
Ein Grid-Container wird ebenfalls über eine CSS-Eigenschaft aktiviert:
.grid-container {
display: grid;
}Anschließend können Spalten und Zeilen definiert werden:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}Hier entstehen drei gleich breite Spalten. Die Einheit fr steht für „Fraction“ und verteilt den verfügbaren Platz gleichmäßig auf die Spalten.
Passender HTML-Code:
<div class="grid-container">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>CSS Grid wird häufig für komplette Webseitenlayouts eingesetzt. So lassen sich beispielsweise Header, Navigation, Hauptinhalt, Sidebar und Footer übersichtlich anordnen.
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
}In diesem Beispiel erhält die erste Spalte eine feste Breite von 250 Pixeln, während die zweite Spalte den restlichen verfügbaren Platz einnimmt. Auf diese Weise lassen sich klassische Webseiten mit einer Seitenleiste sehr einfach erstellen.
Flexbox und Grid verfolgen ähnliche Ziele, werden jedoch unterschiedlich eingesetzt. Flexbox eignet sich hervorragend, wenn Elemente in einer einzigen Richtung – entweder horizontal oder vertikal – angeordnet werden sollen. Typische Anwendungsfälle sind Menüs, Button-Leisten oder Kartenreihen.
Grid hingegen ist die bessere Wahl, wenn ein vollständiges Layout mit mehreren Zeilen und Spalten erstellt werden soll. Daher wird Grid häufig für die Grundstruktur einer Webseite verwendet, während innerhalb einzelner Bereiche zusätzlich Flexbox zum Einsatz kommt.
📍 Übung
Nachdem du gelernt hast wie Flexbox und Grid funktionieren, mache gleich eine kleine Übung. Unabhängig von der Website, die wir für den Rechtsanwalt Maier erstellen, erstelle eine separate HTML- und eine CSS-Datei und übe ein wenig mit Flexbox und Grid. Erstelle einen Container mit Boxen, die sich innerhalb des Containers befinden. Ändere die Werte und schaue, was im Browser passiert. So bekommst du ein Gefühl für CSS und schulst deine Fähigkeiten.
CSS-Datei erstellen
Wir öffnen wieder den Code-Editor und erstellen eine neue Datei, diesen nennen wir style.css und speichern sie im gleichen Ordner wie die bereits vorhandene Datei index.html. Das ist wichtig, da die HTML-Datei nicht auf die CSS-Datei zugreifen könnte, wenn diese in einem Ordner liegen würde. In diesem Fall müssten man den Pfad anpassen, aber wir machen es hier einfach und lassen beide Dateien im selben Ordner.
Im ersten Teil haben wir die CSS-Datei bereits im Head-Bereich des HTML-Dokuments eingebunden:
<link rel="stylesheet" href="style.css">Diesen Schritt können wir somit überspringen.
Im ersten Teil des Tutorials habe ich bereits die CSS-Klassen und Klassenselektoren angesprochen. Hier nochmal zur Wiederholung die CSS-Grundlagen.
Eine CSS-Klasse dient dazu, ein oder mehrere HTML-Elemente zu kennzeichnen. Die Klasse wird im HTML-Code mit dem Attribut class vergeben und kann beliebig oft verwendet werden. Dadurch lassen sich mehrere Elemente mit denselben Gestaltungsregeln versehen, ohne den CSS-Code mehrfach schreiben zu müssen.
Um eine Klasse in CSS anzusprechen, wird ein Klassenselektor verwendet. Dieser beginnt immer mit einem Punkt (.), gefolgt vom Namen der Klasse. Der Browser sucht anschließend alle HTML-Elemente mit dieser Klasse und wendet die definierten Formatierungen an.
Der grundlegende Aufbau einer CSS-Regel besteht aus dem Selektor und einem Regelblock. Im Regelblock stehen die Eigenschaften und deren Werte. Ein typischer Klassenselektor sieht beispielsweise so aus:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}Hier ist .button der Klassenselektor. Die Eigenschaften background-color, color und padding bestimmen das Aussehen aller HTML-Elemente, denen die Klasse button zugewiesen wurde.
📍 Aufgabe
In die leere CSS-Datei fügen wir den ersten Regelblock ein, beginnend mit einem Stern:
* {
box-sizing: border-box;
}Die CSS-Eigenschaft box-sizing: border-box; verändert die Art und Weise, wie die Größe eines Elements berechnet wird.
Standardmäßig verwendet ein HTML-Element den Wert content-box. Das bedeutet, dass width und height nur für den Inhalt gelten. Rahmen (border) und Innenabstände (padding) werden zusätzlich hinzugefügt.
Mit box-sizing: border-box; werden Padding und Border bereits in die angegebene Breite eingerechnet.
Jetzt gestalten wir den Body-Bereich:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #161616;
background: #f7f3f1;
line-height: 1.6;
}Mit margin: 0; werden die standardmäßigen Außenabstände des Browsers entfernt, sodass der Inhalt direkt am Rand des Browserfensters beginnt. Die Eigenschaft font-family: Arial, Helvetica, sans-serif; legt fest, dass bevorzugt die Schriftart Arial verwendet wird, alternativ Helvetica oder eine andere serifenlose Schrift.
Mit color: #161616; wird die Standardtextfarbe auf ein dunkles Grau festgelegt. Die Eigenschaft background: #f7f3f1; sorgt für einen hellen Hintergrund in einem dezenten Beigeton.
Die Anweisung line-height: 1.6; erhöht den Zeilenabstand auf das 1,6-fache der Schriftgröße.
Wenn du jetzt die index.html Datei öffnest, wirst du bereits erste kleine Veränderungen beim Design sehen können.
Mit dem nächsten Regelblock legen wir die Standarddarstellung der Links fest:
a {
color: inherit;
text-decoration: none;
}Mit color: inherit; übernehmen Links automatisch die Textfarbe ihres übergeordneten Elements, anstatt die vom Browser vorgegebene blaue Farbe zu verwenden.
Die Eigenschaft text-decoration: none; entfernt die standardmäßige Unterstreichung von Links, was für ein moderneres und aufgeräumteres Erscheinungsbild sorgt.
Das Feindesign beginnt: Klassen und Klassenselektoren
Es ist an der Zeit, die Bereiche wie Header, Main und Footer sowie die Unterbereiche zu gestalten und unserer Website so langsam aber sicher ein ansprechendes Aussehen zu geben.
Wir beginnen mit der Klasse .site-header:
.site-header {
min-height: 100vh;
padding: 24px;
background: radial-gradient(circle at top right, #7a111d 0, #220309 35%, #080808 70%);
color: #ffffff;
}Was haben wir hier gemacht?
Die Eigenschaft min-height: 100vh; sorgt dafür, dass der Header mindestens die gesamte Höhe des Browserfensters einnimmt. Dadurch füllt der Header beim ersten Aufruf der Seite den gesamten sichtbaren Bereich aus.
Mit padding: 24px; wird ein Innenabstand von 24 Pixeln auf allen Seiten des Headers festgelegt. So kleben Texte und andere Inhalte nicht direkt am Rand des Elements, sondern erhalten ausreichend Platz.
Die Eigenschaft background: radial-gradient(...) erzeugt einen radialen Farbverlauf, der oben rechts mit einem dunklen Rot beginnt und nach außen in sehr dunkle Rot- und Schwarztöne übergeht. Mit color: #ffffff; wird die Standardtextfarbe innerhalb des Headers auf Weiß gesetzt, sodass sich Texte deutlich vom dunklen Hintergrund abheben.
Kannst du die Veränderungen im Browser sehen?
📍 Aufgabe
Um ein Gespür für CSS zu bekommen, ändere die vorhandenen Werte, aktualisiere die Seite im Browser und schaue, was passiert.
Navigation gestalten
Als Nächstes gestalten wir die Navigation innerhalb des Headers:
.navbar {
width: min(1120px, 100%);
margin: 0 auto;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(14px);
}Die Eigenschaft width: min(1120px, 100%); begrenzt die maximale Breite auf 1120 Pixel, während die Navigation auf kleineren Bildschirmen die gesamte verfügbare Breite nutzen kann. Mit margin: 0 auto; wird die Navigationsleiste horizontal zentriert. Der Innenabstand von 18px 22px sorgt dafür, dass die Inhalte genügend Platz zum Rand haben.
Durch display: flex; wird das Flexbox-Layout aktiviert. Die Eigenschaft justify-content: space-between; verteilt die Elemente gleichmäßig, sodass beispielsweise das Logo links und das Menü rechts positioniert werden. align-items: center; richtet alle Elemente vertikal mittig aus.
Für die Gestaltung sorgen ein leicht transparenter Rahmen (border), abgerundete Ecken (border-radius: 24px) und ein halbtransparenter Hintergrund (background). Die Eigenschaft backdrop-filter: blur(14px); erzeugt zusätzlich einen Unschärfeeffekt für den Bereich hinter der Navigationsleiste. Dadurch entsteht der moderne sogenannte „Glassmorphism“-Effekt, bei dem die Navigation wie eine leicht durchsichtige Glasscheibe wirkt.
Auch hier kannst du wieder experimentieren und Werte verändern. Wir sind hier, um zu lernen und kaputt machen kann man ohnehin nichts.
Wir machen weiter:
.logo {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.04em;
}Die Klasse .logo gestaltet das Logo oder den Markennamen der Website. Mit font-size: 1.3rem; wird die Schrift etwas größer dargestellt. font-weight: 700; sorgt für eine fette Schrift, wodurch das Logo stärker hervorgehoben wird. Die Eigenschaft letter-spacing: -0.04em; verringert den Abstand zwischen den Buchstaben leicht und verleiht dem Schriftzug ein kompakteres, moderneres Erscheinungsbild.
.nav-links {
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 26px;
list-style: none;
}Die Klasse .nav-links definiert das Layout der Navigationsliste. Standardabstände werden mit margin: 0; und padding: 0; entfernt. Durch display: flex; werden die Menüpunkte nebeneinander angeordnet. align-items: center; richtet sie vertikal mittig aus, während gap: 26px; einen gleichmäßigen Abstand zwischen den einzelnen Menüpunkten erzeugt. Mit list-style: none; werden die üblichen Aufzählungszeichen der Liste entfernt.
.nav-links a {
color: rgba(255, 255, 255, 0.82);
font-size: 0.95rem;
}.nav-links a:hover {
color: #ffffff;
}Der Regelblock .nav-links a gestaltet die einzelnen Links innerhalb der Navigation. Die Textfarbe wird auf ein leicht transparentes Weiß gesetzt, wodurch die Links dezent wirken. Mit font-size: 0.95rem; wird eine gut lesbare Schriftgröße festgelegt. Der Pseudoklassen-Selektor .nav-links a:hover verändert die Farbe beim Überfahren mit der Maus zu reinem Weiß, wodurch der Benutzer eine visuelle Rückmeldung erhält.
.nav-button {
padding: 10px 18px;
border-radius: 999px;
background: #b3192b;
box-shadow: 0 0 24px rgba(216, 32, 55, 0.7);
}Die Klasse .nav-button hebt einen bestimmten Navigationspunkt als Schaltfläche hervor. Durch den Innenabstand (padding) entsteht eine buttonähnliche Form. border-radius: 999px; erzeugt stark abgerundete Ecken und damit eine pillenförmige Schaltfläche. Der rote Hintergrund (background) sorgt für Aufmerksamkeit, während box-shadow einen roten Leuchteffekt erzeugt, der den Button zusätzlich hervorhebt und modern wirken lässt.
Und nun, was sagst du jetzt zu unserer Website? Wir haben tatsächlich eine ansprechende Navigation.
Bereiche innerhalb des Headers
Als Nächstes wollen wir den Header fertigstellen:
.hero {
width: min(1120px, 100%);
margin: 90px auto 0;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 60px;
}Die Klasse .hero definiert den Hauptbereich im oberen Teil der Website. Mit width: min(1120px, 100%); wird die Breite auf maximal 1120 Pixel begrenzt, während kleinere Bildschirme die gesamte verfügbare Breite nutzen können. margin: 90px auto 0; erzeugt einen Abstand nach oben und zentriert den Bereich horizontal. Durch display: grid; und grid-template-columns: 1.1fr 0.9fr; wird ein zweispaltiges Layout erstellt, bei dem die linke Spalte etwas breiter als die rechte ist. align-items: center; richtet die Inhalte vertikal mittig aus und gap: 60px; sorgt für einen großzügigen Abstand zwischen den Spalten.
.eyebrow {
color: #e54558;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
}Die Klasse .eyebrow gestaltet eine kleine Überschrift oder Einleitung oberhalb der Hauptüberschrift. Die rote Farbe hebt sie hervor, während text-transform: uppercase; den Text in Großbuchstaben darstellt. Mit einer kleineren Schriftgröße, fetter Schrift und vergrößertem Buchstabenabstand entsteht ein moderner Akzent, der die Aufmerksamkeit des Besuchers auf wichtige Informationen lenkt.
.hero h1,
.features h2,
.platform h2,
.cta-box h2 {
margin: 14px 0 20px;
font-size: clamp(2.2rem, 5vw, 4.8rem);
line-height: 1.05;
letter-spacing: -0.06em;
}Der Regelblock für .hero h1, .features h2, .platform h2 und .cta-box h2 sorgt für ein einheitliches Erscheinungsbild wichtiger Überschriften. Die Funktion clamp() passt die Schriftgröße flexibel an unterschiedliche Bildschirmgrößen an. line-height: 1.05; erzeugt einen kompakten Zeilenabstand und letter-spacing: -0.06em; verringert den Buchstabenabstand leicht, wodurch die Überschriften kraftvoll und modern wirken.
.hero p {
max-width: 580px;
color: rgba(255, 255, 255, 0.78);
font-size: 1.15rem;
}Die Klasse .hero p gestaltet Absätze im Hero-Bereich. Die maximale Breite verhindert zu lange Textzeilen und verbessert die Lesbarkeit. Die leicht transparente weiße Schriftfarbe sorgt für einen angenehmen Kontrast zum Hintergrund, während die größere Schriftgröße den Einleitungstext hervorhebt.
.button {
display: inline-block;
margin-top: 22px;
padding: 14px 26px;
border-radius: 999px;
font-weight: 700;
}.glow-button {
color: #ffffff;
background: linear-gradient(135deg, #d82037, #8a0f1e);
box-shadow: 0 0 30px rgba(216, 32, 55, 0.8);
}Die Klasse .button definiert das Grunddesign von Schaltflächen. Durch display: inline-block; können Breite und Höhe beeinflusst werden. Der Innenabstand macht die Schaltfläche größer und leichter anklickbar. Die stark abgerundeten Ecken (border-radius: 999px;) erzeugen eine moderne, pillenförmige Optik. Die Klasse .glow-button erweitert dieses Grunddesign um einen Farbverlauf in verschiedenen Rottönen sowie einen Leuchteffekt (box-shadow), der die Schaltfläche besonders auffällig erscheinen lässt.
.hero-image {
display: flex;
justify-content: center;
}.hero-image img {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 30px rgba(180, 0, 0, 0.6);
}Die Klasse .hero-image dient als Container für das Bild und zentriert dessen Inhalt horizontal mit Flexbox. Im Regelblock .hero-image img wird das Bild responsiv gestaltet. Es passt sich der verfügbaren Breite an, bleibt aber maximal 400 Pixel breit. Mit border-radius: 50%; wird das Bild kreisförmig dargestellt. object-fit: cover; sorgt dafür, dass das Bild den Kreis vollständig ausfüllt, ohne verzerrt zu werden. Der Schatteneffekt (box-shadow) erzeugt zusätzlich einen dezenten roten Leuchtrand und hebt das Bild optisch vom Hintergrund ab.
📍 Aufgabe
Im HTML-Dokument haben wir ein HTML-Element erstellt, mit dem wir das Bild im Header anzeigen:
<div class="hero-image">
<img src="anwalt.jpg" alt="Rechtsanwalt">
</div>Speichere ein rechteckiges Bild mit einer Breite und Höhe von 1000 Pixeln in den Ordner mit den Dateien dieses Tutorials. Das Bild sollte im JPG-Format sein und anwalt.jpg benannt werden.
Öffne jetzt die Website im Browser bzw. aktualisiere diesen.
Der Header ist jetzt weitestgehend fertig und wir widmen uns dem Hauptbereich (Main).
Hauptbereich
Wir widmen uns nun dem größten Teil der Website, dem Main-Bereich:
.features,
.platform,
.site-footer {
padding: 90px 24px;
}
.features {
text-align: center;
background: #f7f3f1;
}.features h2,
.platform h2,
.cta-box h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
}Die Klassen .features, .platform und .site-footer erhalten mit padding: 90px 24px; großzügige Innenabstände, wodurch die Inhalte luftig und übersichtlich wirken. Die Klasse .features richtet den Inhalt mittig aus und verwendet einen hellen Hintergrund. Die Überschriften in mehreren Bereichen erhalten mit clamp() eine responsive Schriftgröße, die sich automatisch an die Bildschirmgröße anpasst.
.section-intro {
max-width: 680px;
margin: 0 auto 48px;
color: #5e5555;
}Die Klasse .section-intro gestaltet einen einleitenden Textabschnitt. Durch die maximale Breite von 680 Pixeln bleibt der Text gut lesbar, während margin: 0 auto ihn horizontal zentriert.
.card-grid {
width: min(980px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}Die Klasse .card-grid erstellt mit CSS Grid ein zweispaltiges Layout für Karten.
.card {
min-height: 260px;
padding: 36px;
text-align: left;
border-radius: 30px;
border: 1px solid rgba(139, 15, 30, 0.18);
background: #ffffff;
}Die Karten selbst werden durch .card gestaltet. Sie erhalten einen weißen Hintergrund, abgerundete Ecken, Innenabstände und einen dezenten Rahmen.
.glow-card {
box-shadow: 0 20px 60px rgba(139, 15, 30, 0.14), 0 0 28px rgba(216, 32, 55, 0.14);
}Die zusätzliche Klasse .glow-card ergänzt einen Schatten- und Leuchteffekt, der einzelne Karten stärker hervorhebt.
.card h3,
.feature-list h3 {
margin-top: 0;
color: #8a0f1e;
font-size: 1.5rem;
}.card p,
.feature-list p {
color: #5e5555;
}Die Klassen .card h3 und .feature-list h3 definieren das Aussehen der Überschriften innerhalb von Karten und Funktionslisten. Die rote Farbe passt zum Gesamtdesign und hebt wichtige Informationen hervor. Die dazugehörigen Absätze erhalten mit einer grauen Schriftfarbe ein angenehmes und gut lesbares Erscheinungsbild.
.platform {
background: #ffffff;
}.platform-content {
width: min(1120px, 100%);
margin: 0 auto;
}Der Bereich .platform besitzt einen weißen Hintergrund und enthält mit .platform-content einen zentrierten Inhaltscontainer.
.feature-list {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}.feature-list article {
padding: 28px;
border-radius: 24px;
background: #f7f3f1;
border: 1px solid rgba(139, 15, 30, 0.12);
}Die Klasse .feature-list erzeugt ein dreispaltiges Grid-Layout für einzelne Funktionsbeschreibungen. Jedes darin enthaltene erhält einen hellen Hintergrund, abgerundete Ecken und einen dezenten Rahmen. Dadurch werden die einzelnen Inhalte optisch voneinander getrennt und übersichtlich dargestellt.
.cta-box {
width: min(1120px, calc(100% - 48px));
margin: 90px auto;
padding: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
border-radius: 36px;
color: #ffffff;
background: radial-gradient(circle at top left, #7a111d, #090909 55%);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}.cta-box p {
max-width: 620px;
color: rgba(255, 255, 255, 0.76);
}Die Klasse .cta-box gestaltet den Call-to-Action-Bereich. Dieser Bereich wird mit Flexbox aufgebaut und richtet seine Inhalte horizontal aus. Die Kombination aus großem Innenabstand, stark abgerundeten Ecken, radialem Farbverlauf und Schatteneffekt sorgt für eine moderne und hochwertige Optik. Die enthaltenen Absätze werden mit einer leicht transparenten weißen Schrift dargestellt, um einen angenehmen Kontrast zum dunklen Hintergrund zu erzeugen.
.light-button {
white-space: nowrap;
color: #ffffff;
background: #d82037;
box-shadow: 0 0 28px rgba(216, 32, 55, 0.8);
}Die Klasse .light-button gestaltet schließlich eine hervorgehobene Schaltfläche. Durch die rote Hintergrundfarbe, den weißen Text und den Leuchteffekt wird der Button besonders auffällig dargestellt. Die Eigenschaft white-space: nowrap; verhindert dabei, dass der Text innerhalb der Schaltfläche auf mehrere Zeilen umbricht. Dadurch bleibt die Beschriftung auch auf kleineren Bildschirmen kompakt und gut lesbar.
Und wieder heißt es, die Website im Browser aktualisieren und die Veränderungen und den Fortschritt betrachten.
Mit dem Hauptteil sind wir auch fertig und gehen zum letzten Teil, dem Footer.
Wir haben bereits viel geschafft. Ich finde, dass wir uns ein Päuschen gönnen können. ☕️
Footer
Wir haben einiges geschafft und es fehlt nicht mehr viel bis zu einer fertigen Website.
Jetzt gestalten wir den Footer:
.site-footer {
background: #080808;
color: #ffffff;
}Die Klasse .site-footer definiert einen nahezu schwarzen Hintergrund und setzt die Standardtextfarbe auf Weiß. Dadurch entsteht ein deutlicher optischer Abschluss der Webseite und ein starker Kontrast zu den meist helleren Inhaltsbereichen darüber.
.footer-grid {
width: min(1120px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 40px;
}Die Klasse .footer-grid erstellt ein dreispaltiges Layout mit CSS Grid. Die erste Spalte ist doppelt so breit wie die beiden anderen Spalten und eignet sich beispielsweise für eine Unternehmensbeschreibung oder Kontaktinformationen. Mit gap: 40px; wird ausreichend Abstand zwischen den Spalten geschaffen.
.site-footer p,
.site-footer a {
display: block;
color: rgba(255, 255, 255, 0.68);
}.site-footer a {
margin-bottom: 8px;
}Die Regelblöcke für .site-footer p und .site-footer a gestalten Texte und Links in einem leicht transparenten Weißton. Zusätzlich werden Links als Blockelemente dargestellt und erhalten einen unteren Abstand, wodurch sie übersichtlich untereinander angeordnet werden können.
.copyright {
width: min(1120px, 100%);
margin: 60px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.9rem;
}Die Klasse .copyright gestaltet den unteren Bereich des Footers. Ein oberer Abstand trennt ihn vom restlichen Footerinhalt, während eine feine Linie (border-top) für eine zusätzliche optische Abgrenzung sorgt. Die etwas kleinere Schriftgröße eignet sich gut für Urheberrechtsvermerke oder rechtliche Hinweise.
Wenn wir jetzt auf die Ausgabe im Browser schauen, sehen wir eine von außen komplett fertige Website.
Dennoch sind wir noch nicht fertig und müssen ein paar wichtige Schritte vornehmen.
Responsives Design
Damit die Website auf jedem Gerät benutzerfreundlich dargestellt werden kann, müssen wir diese responsiv machen. Das machen wir mit Media Query.
Mit einer Media Query kannst du festlegen, dass bestimmte CSS-Regeln nur unter bestimmten Bedingungen gelten, z. B. für kleinere Bildschirme wie Tablets oder Smartphones.
Im CSS-Code geben wir Folgendes ein:
@media (max-width: 820px) {
.navbar,
.nav-links,
.cta-box {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
gap: 14px;
}
.hero,
.card-grid,
.feature-list,
.footer-grid {
grid-template-columns: 1fr;
}
.hero {
margin-top: 60px;
}
.cta-box {
padding: 40px 28px;
}
}Was haben wir hier umgesetzt?
Für die Elemente .navbar, .nav-links und .cta-box wird die Flexbox-Ausrichtung von der Standardrichtung auf column geändert. Dadurch werden die enthaltenen Elemente nicht mehr nebeneinander, sondern untereinander dargestellt. Gleichzeitig sorgt align-items: flex-start dafür, dass die Elemente linksbündig ausgerichtet werden. Bei den Navigationselementen wird zusätzlich mit gap: 14px ein Abstand von 14 Pixeln zwischen den einzelnen Menüpunkten eingefügt, damit diese auf kleinen Bildschirmen besser lesbar und leichter anklickbar sind.
Die Bereiche .hero, .card-grid, .feature-list und .footer-grid verwenden ein CSS-Grid-Layout. Mit grid-template-columns: 1fr wird festgelegt, dass diese Bereiche auf kleinen Bildschirmen nur noch aus einer einzigen Spalte bestehen. Inhalte, die auf einem Desktop möglicherweise in zwei oder drei Spalten nebeneinander angezeigt werden, erscheinen dadurch untereinander. Das verbessert die Lesbarkeit und verhindert horizontales Scrollen. Zusätzlich erhält der Hero-Bereich durch margin-top: 60px einen oberen Außenabstand von 60 Pixeln, wodurch mehr Platz zum darüberliegenden Inhalt entsteht.
Abschließend wird für die .cta-box ein Innenabstand von 40px 28px definiert. Das bedeutet, dass der Inhalt innerhalb der Box oben und unten 40 Pixel sowie links und rechts 28 Pixel Abstand zum Rand erhält. Dadurch wirkt die Box auf kleineren Bildschirmen luftiger und der Inhalt bleibt gut lesbar. Insgesamt sorgen diese Regeln dafür, dass sich die Website automatisch an kleinere Displays anpasst und auch auf mobilen Geräten benutzerfreundlich dargestellt wird.
Unterseiten erstellen
Am Anfang des ersten Tutorials habe ich angekündigt, dass wir eine mehrseitige Website erstellen. Die Hauptseite oder Homepage ist bereits fertig, jetzt erstellen wir noch drei Unterseiten: Impressum (dieses ist gesetzlich vorgeschrieben), Rechtsgebiete und Kanzlei.
Da wir bereits ausführlich mit dem HTML-Code gearbeitet haben, besteht keine Notwendigkeit an dieser Stelle alles von null aufzubauen und Schritt für Schritt zu erklären. Ich veröffentliche hier den HTML-Code für jede der drei Seiten und du erstellst jeweils eine neue HTML-Datei im Editor und benennst sie entsprechend: impressum.html, rechtsgebiete.html und kanzlei.html.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum - Rechtsanwalt Peter Maier</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header content-header">
<nav class="navbar">
<div class="logo">
<a href="index.html">Rechtsanwalt Peter Maier</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Start</a></li>
<li><a href="rechtsgebiete.html">Rechtsgebiete</a></li>
<li><a href="kanzlei.html">Kanzlei</a></li>
</ul>
</nav>
</header>
<main>
<section class="content-page">
<div class="container">
<div class="content-box">
<h1>Impressum</h1>
<p>
Angaben gemäß § 5 TMG
</p>
<p>
Rechtsanwalt<br>
Peter Maier<br>
Birkenalle 12<br>
74030 Limberlachen
</p>
<p>
Telefon: 01234 567890<br>
E-Mail: kontakt@kanzlei-limberlachen.de
</p>
<p>
Umsatzsteuer-ID:<br>
DE123456789
</p>
<p>
Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:<br>
Peter Maier
</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div>
<h2>Rechtsanwalt Peter Maier</h2>
<p>Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken.
Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht
und Mietrecht mit klarer Sprache und persönlicher Betreuung.</p>
</div>
<div>
<h3>Navigation</h3>
<a href="index.html">Start</a>
<a href="rechtsgebiete.html">Rechtsgebiete</a>
<a href="kanzlei.html">Kanzlei</a>
</div>
<div>
<h3>Rechtliches</h3>
<a href="impressum.html">Impressum</a>
</div>
</div>
<p class="copyright">© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rechtsgebiete</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header content-header">
<nav class="navbar">
<div class="logo">
<a href="index.html">Rechtsanwalt Peter Maier</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Start</a></li>
<li><a href="kanzlei.html">Kanzlei</a></li>
<li><a class="nav-button" href="impressum.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section class="content-page">
<div class="container">
<div class="content-box">
<h1>Unsere Rechtsgebiete</h1>
<h2>Arbeitsrecht</h2>
<p>
Das Arbeitsrecht regelt die rechtlichen Beziehungen zwischen Arbeitnehmern und Arbeitgebern. Ob
Kündigung, Abmahnung, Arbeitsvertrag, Aufhebungsvertrag oder Fragen zu Lohn und Urlaub – wir
beraten und vertreten Sie kompetent bei allen arbeitsrechtlichen Anliegen. Unser Ziel ist es,
Ihre Rechte zu schützen und gemeinsam die bestmögliche Lösung zu finden.
</p>
<h3>Mietrecht</h3>
<p>
Das Mietrecht betrifft zahlreiche Fragen rund um Wohn- und Gewerberaummietverhältnisse. Wir
unterstützen Mieter und Vermieter bei Themen wie Mieterhöhungen, Nebenkostenabrechnungen,
Kündigungen, Mietmängeln oder Streitigkeiten über Schönheitsreparaturen. Mit fundierter
rechtlicher Beratung helfen wir Ihnen dabei, Ihre Interessen erfolgreich durchzusetzen.
</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div>
<h3>Rechtsanwalt Peter Maier</h3>
<p>Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken.
Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht
und Mietrecht mit klarer Sprache und persönlicher Betreuung.</p>
</div>
<div>
<h3>Navigation</h3>
<a href="index.html">Start</a>
<a href="kanzlei.html">Kanzlei</a>
<a href="impressum.html">Kontakt</a>
</div>
<div>
<h3>Rechtliches</h3>
<a href="impressum.html">Impressum</a>
</div>
</div>
<p class="copyright">© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanzlei Peter Maier Limberlachen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header content-header">
<nav class="navbar">
<div class="logo">
<a href="index.html">Rechtsanwalt Peter Maier</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Start</a></li>
<li><a href="rechtsgebiete.html">Rechtsgebiete</a></li>
<li><a class="nav-button" href="impressum.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section class="content-page">
<div class="container">
<div class="content-box">
<h1>Unsere Kanzlei</h1>
<p>
<img src="kanzlei.jpg" alt="Kanzlei">
</p>
<p>
Die Rechtsanwaltskanzlei Peter Maier in Limberlachen steht Mandanten seit mehr als 15 Jahren mit
Erfahrung, Fachkompetenz und persönlicher Beratung zur Seite. Die Kanzlei hat sich insbesondere
auf die Rechtsgebiete Arbeitsrecht und Mietrecht spezialisiert und unterstützt sowohl
Privatpersonen als auch Unternehmen bei rechtlichen Fragestellungen. Ob Kündigungsschutzklage,
Arbeitsvertrag, Mieterhöhung, Nebenkostenabrechnung oder Streitigkeiten zwischen Mietern und
Vermietern – Rechtsanwalt Peter Maier begleitet seine Mandanten engagiert und lösungsorientiert.
</p>
<p>
Ein besonderer Wert wird auf eine individuelle Betreuung und eine verständliche Kommunikation
gelegt. Mandanten erhalten eine umfassende Beratung über ihre rechtlichen Möglichkeiten und
werden bei Bedarf konsequent außergerichtlich sowie vor Gericht vertreten. Die Kanzlei ist
bequem mit der Buslinie 95 erreichbar und verfügt über ausreichend Parkplätze direkt vor dem
Gebäude. Dadurch ist eine unkomplizierte Anreise sowohl mit öffentlichen Verkehrsmitteln als
auch mit dem eigenen Fahrzeug jederzeit möglich.
</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div>
<h2>Rechtsanwalt Peter Maier</h2>
<p>Peter Maier ist Fachanwalt für Arbeitsrecht und kann auf jahrelange Berufserfahrung zurückblicken.
Zusammen mit seinem Team bietet er in der Kanzlei in Limberlachen Rechtsberatung für Arbeitsrecht
und Mietrecht mit klarer Sprache und persönlicher Betreuung.</p>
</div>
<div>
<h3>Navigation</h3>
<a href="index.html">Start</a>
<a href="rechtsgebiete.html">Rechtsgebiete</a>
<a href="impressum.html">Kontakt</a>
</div>
<div>
<h3>Rechtliches</h3>
<a href="impressum.html">Impressum</a>
</div>
</div>
<p class="copyright">© 2026 Rechtsanwaltskanzlei Peter Maier. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>Für die Unterseite kanzlei.html brauchen wir noch ein Bild mit einer Breite von 700 Pixel. Das Bild legen wir in den Ordner mit den anderen Dateien ab.
Das Impressum habe ich nicht komplett erstellt, da es kein echtes und rechtsverbindliches Impressum ist.
Unterseiten mit CSS designen
Nachdem die Unterseiten fertig sind, wollen wir diese schön gestalten.
Wir geben in der CSS-Datei ein:
.content-page {
padding: 120px 0;
}
.content-header {
min-height: auto;
padding: 24px;
}
.content-box {
max-width: 900px;
margin: 0 auto;
padding: 50px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(180, 0, 0, 0.3);
border-radius: 20px;
box-shadow: 0 0 25px rgba(180, 0, 0, 0.15);
}
.content-box h1 {
margin-bottom: 30px;
font-size: 2.5rem;
}
.content-box p {
margin-bottom: 20px;
line-height: 1.8;
}
img {
max-width: 100%;
height: auto;
}Auch hier schauen wir uns den CSS-Code genau an.
Die Regel .content-page definiert den Außenabstand des Hauptinhaltsbereichs. Mit padding: 120px 0 wird oberhalb und unterhalb des Inhalts ein Innenabstand von jeweils 120 Pixeln erzeugt, während links und rechts kein zusätzlicher Abstand hinzugefügt wird.
Für den Bereich .content-header wird mit min-height: auto festgelegt, dass keine feste Mindesthöhe verwendet wird und sich die Höhe automatisch am Inhalt orientiert. Die Eigenschaft padding: 24px sorgt dafür, dass innerhalb des Bereichs auf allen Seiten ein Innenabstand von 24 Pixeln entsteht.
Die Klasse .content-box gestaltet den eigentlichen Inhaltscontainer. Mit max-width: 900px wird die maximale Breite auf 900 Pixel begrenzt, damit lange Textzeilen besser lesbar bleiben. Die Kombination aus margin: 0 auto zentriert den Container horizontal auf der Seite. Durch padding: 50px erhält der Inhalt einen großzügigen Innenabstand. Die Eigenschaft background: rgba(255, 255, 255, 0.03) erzeugt einen leicht transparenten Hintergrund, während border: 1px solid rgba(180, 0, 0, 0.3) einen dezenten roten Rahmen hinzufügt. Mit border-radius: 20px werden die Ecken abgerundet und box-shadow: 0 0 25px rgba(180, 0, 0, 0.15) sorgt für einen weichen Schatteneffekt, der die Box optisch vom Hintergrund abhebt.
Die Regel .content-box h1 formatiert die Hauptüberschrift innerhalb der Inhaltsbox. Mit margin-bottom: 30px wird ein Abstand von 30 Pixeln zum nachfolgenden Inhalt erzeugt. Die Eigenschaft font-size: 2.5rem vergrößert die Schrift auf das 2,5-fache der Standardschriftgröße und sorgt dafür, dass die Überschrift deutlich hervorsticht.
Für Absätze innerhalb der Inhaltsbox legt .content-box p einen unteren Abstand von 20 Pixeln fest. Dadurch werden die einzelnen Absätze optisch voneinander getrennt. Zusätzlich erhöht line-height: 1.8 den Zeilenabstand auf das 1,8-fache der Schriftgröße, was die Lesbarkeit längerer Texte deutlich verbessert.
Die abschließende Regel für img macht Bilder responsiv. Mit max-width: 100% kann ein Bild niemals breiter werden als sein umgebendes Element. Die Eigenschaft height: auto sorgt dafür, dass die ursprünglichen Proportionen des Bildes erhalten bleiben. Dadurch passen sich Bilder automatisch an verschiedene Bildschirmgrößen an und werden auf Smartphones oder Tablets korrekt dargestellt.
Letzter Code-Check
Wir sind fast am Ende des Tutorials und haben eine moderne und responsive Website für einen Rechtsanwalt erstellt.
Alle Verlinkungen funktionieren und die Website passt sich an jeden Bildschirm an. Zum Schluss wollen wir noch den Code überprüfen. Dazu rufen wir wieder im Browser den Markup Validator von W3C auf, laden die HTML-Dateien nacheinander hoch und überprüfen diese.
Meine Überprüfung ergibt: Document checking completed. No errors or warnings to show. 👍
Dann rufe ich den CSS-Validator auf und überprüfe den CSS-Code.
Das Ergebnis: Gratulation! Es wurden keine Fehler gefunden. 👍
Wir haben jetzt eine komplette, moderne und responsive Website mit einem sauberen Code.
Die Gegenüberstellung der Version vom Anfang des Tutorials mit dem Endergebnis zeigt, welchen Weg wir hinter uns haben. Vom einfachen Text zu einer modernen Website.
Im Header-Bereich habe ich den Text etwas geändert und das Alleinstellungsmerkmal des Rechtsanwalts Peter Maier hervorgehoben. Indem die Rechtsanwaltskanzlei eine Beratung vor Ort und online sowie eine schnelle Terminvergabe und rechtliche Unterstützung bundesweit anbietet, hebt sie sich von anderen Kanzleien in Limberlachen und der Region ab.
Das ist ein Alleinstellungsmerkmal der Rechtsanwaltskanzlei Peter Maier.
Speed-Check
Zum Schluss wollen wir noch die Website-Geschwindigkeit überprüfen. Der beste und schönste Webauftritt nützt nichts, wenn die Website zu langsam lädt und Besucherinnen und Besucher zu lange warten müssen und genervt die Seite verlassen. Daher ist die Ladegeschwindigkeit enorm wichtig.
Wir nutzen das Online-Tool PageSpeed Insights und geben dort die URL ein.
Nach einigen Sekunden erhalten wir die Ergebnisse:
Hervorragende Werte, sowohl bei Mobil als auch bei Desktop erhalten wir einen Leistungswert von 100. Dabei wurde nichts an der Website optimiert. Der Schlüssel liegt in der sauberen und sorgfältigen Arbeitsweise von Anfang an.
Ein einfacher und sauberer Code, der den Webstandards entspricht. Bei Website-Baukasten-Systemen hast du keine Kontrolle über den Code und oft erhält man Ergebnisse mit aufgeblähtem Code, was am Ende zu erheblichen Leistungseinbußen bei der Geschwindigkeit führen kann.
Der einzige Wert, der im Bereich Orange liegt ist die Suchmaschinenoptimierung der Website, doch das wurde in diesem Tutorial gar nicht gemacht.
Du kannst alle Dateien des Tutorials herunterladen und mit diesen bei dir zu Hause arbeiten:
Einstieg in CSS – Fazit
Wir sind am Ende des zweiteiligen Tutorials und haben eine Menge gemacht und gelernt. Entstanden ist eine moderne, mehrseitige und responsive Website, mit einem sauber umgesetzten Code und einer erstklassigen Geschwindigkeit. Das Tutorial ist als Einstieg in die Web-Auszeichnungssprachen HTML und CSS gedacht. Dabei wollte ich keine langweilige Auflistung von theoretischen Grundlagen, HTML-Elementen und CSS-Klassen, sondern ein lebendiges Tutorial zum Mitmachen und Nachmachen mit dem Endergebnis einer kompletten Website. Denn, wir lernen HTML und CSS nicht als Selbstzweck, sondern um bestimmte sichtbare Ergebnisse zu erreichen. Ob mir mein Ansatz eines lebendigen Tutorials gelungen ist, das entscheidet ihr.
Die Profis unter euch werden sicherlich festgestellt haben, dass bei Weitem nicht alles zum Thema HTML und CSS gezeigt wurde. Das ist auch nicht die Intension dieses Einsteiger-Tutorials und eine komplette Einführung in die beiden Auszeichnungssprachen würde den Rahmen dieses Tutorials sprengen. Die Webentwicklung ist ohnehin keine starre Thematik und ständig ändert sich etwas, sodass jede Einsteigerin und jeder Einsteiger sein Wissen durch praktische Arbeit selbst erweitern muss. Mit jedem Projekt wirst du ein wenig besser und entwickelst mehr Verständnis für die Webentwicklung. Ich hoffe, dass ihr aus dem Tutorial etwas mitnehmen konntet und freue mich, euch hier auf dem Blog weiterhin begrüßen zu dürfen.
![Einstieg in HTML: Wir bauen eine moderne Website für einen Rechtsanwalt [Teil 1] 🚀](https://www.webnumerus.de/wp-content/uploads/2026/06/Einstieg_in_HTML-300x169.jpg "Einstieg in HTML: Wir bauen eine moderne Website für einen Rechtsanwalt [Teil 1] 🚀")
![Was ist HTML? Die Sprache hinter jeder Website einfach erklärt [2026]](https://www.webnumerus.de/wp-content/uploads/2024/09/Webdesign-Grundlagen-300x168.jpg "Was ist HTML? Die Sprache hinter jeder Website einfach erklärt [2026]")
Schreiben Sie einen Kommentar