Modern Webdesign

Wie Websites funktionieren

In dieser Lektion lernst du, woraus Websites im Kern bestehen: HTML, CSS und JavaScript. Du verstehst, welche Aufgabe jeder dieser Bausteine hat und warum dieses Grundverständnis wichtig ist, bevor du selbst Websites baust oder KI-generierten Code verwendest.

Jede moderne Website besteht im Kern aus drei Bausteinen: HTML, CSS und JavaScript. Diese drei Technologien arbeiten im Browser zusammen und bilden die Grundlage fast jeder Website.

Ziel dieser Lektion

In dieser ersten Lektion geht es noch nicht darum, viel Code zu schreiben. Stattdessen sollst du verstehen, wie Websites grundsätzlich aufgebaut sind und warum dieses Wissen wichtig bleibt – auch dann, wenn KI oder Baukastensysteme sehr schnell fertigen Code erzeugen können.

HTML: Struktur und Inhalt

HTML beschreibt, was auf einer Website vorhanden ist. Dazu gehören zum Beispiel Überschriften, Texte, Abschnitte, Navigationen, Buttons oder Formulare. HTML ist also das inhaltliche Grundgerüst einer Seite.

CSS: Design und Layout

CSS bestimmt, wie eine Website aussieht. Farben, Schriftgrößen, Abstände, Rahmen, Positionierung und responsive Anpassungen für verschiedene Bildschirmgrößen werden mit CSS gestaltet.

JavaScript: Verhalten und Interaktion

JavaScript macht eine Website interaktiv. Klicks auf Buttons, das Öffnen eines mobilen Menüs, Formular-Feedback oder ein Dark Mode sind typische Beispiele dafür. JavaScript sorgt also dafür, dass auf einer Website etwas passiert.

Warum diese Grundlagen wichtig sind

Auch wenn KI heute sehr schnell Code erzeugen kann, bleibt das Grundverständnis entscheidend. Nur wer weiß, welche Rolle HTML, CSS und JavaScript spielen, kann Code lesen, bewerten, anpassen und Fehler sinnvoll beheben.

DevTools als Blick hinter die Kulissen

Mit den Developer Tools im Browser kannst du echte Websites untersuchen. Du öffnest sie meistens mit F12 oder über Rechtsklick → Untersuchen.

Dort findest du zum Beispiel den Bereich Elements. Hier siehst du die HTML-Struktur der aktuellen Website. Im Bereich Styles kannst du direkt erkennen, welche CSS-Regeln auf ein Element wirken. Die Console ist wichtig, wenn du später mit JavaScript arbeitest oder Fehlermeldungen prüfen willst.

Genau deshalb sind die DevTools ein wichtiges Werkzeug im Webdesign: Sie helfen dir beim Verstehen, Testen und Debuggen.

Diese Lektion bildet das Fundament für den restlichen Kurs. Danach bauen wir Schritt für Schritt ein eigenes Webprojekt auf.

Beispiel 1

Der folgende HTML-Ausschnitt zeigt die Struktur und den Inhalt einer sehr einfachen Website. Mit HTML legst du fest, was auf der Seite vorhanden ist.

<h1>Meine erste Website</h1>
<p>Willkommen auf meiner Seite.</p>
<button>Klick mich</button>

Beispiel 2

Mit CSS wird festgelegt, wie die Inhalte aussehen. Hier bekommen die Überschrift und der Button ein erstes einfaches Styling.

h1 {
  color: darkblue;
}

button {
  padding: 10px 16px;
  border-radius: 8px;
}

Beispiel 3

Mit JavaScript kannst du Verhalten und Interaktion ergänzen. Dieses Beispiel zeigt nur ganz einfach, dass JavaScript im Hintergrund ausgeführt werden kann.

console.log("JavaScript läuft");

Merksatz

  • HTML = Struktur und Inhalt
  • CSS = Design und Layout
  • JavaScript = Verhalten und Interaktion

Aufgabe

Öffne im Browser eine beliebige Website und starte die Developer Tools mit F12.

  • Suche im Bereich Elements ein HTML-Element, zum Beispiel eine Überschrift oder einen Absatz.
  • Schau dir im Bereich Styles an, welche CSS-Regeln auf dieses Element wirken.
  • Ändere testweise eine sichtbare Eigenschaft, zum Beispiel eine Farbe, eine Schriftgröße oder einen Text.
  • Erkläre danach in 2 bis 3 Sätzen, welche Aufgabe HTML, CSS und JavaScript jeweils auf einer Website haben.

Wichtig: Änderungen in den Developer Tools sind nur vorübergehend und gelten nur in deinem Browser.

Nach oben scrollen