Beispielprojekte: HTML und CSS lernen Schritt für Schritt anhand Nachbaus von Websites

Vorstellung der Projekte

Anhand des Nachbauens der Beispiel-Websites lernt man die einzelnen HTML-Befehle und CSS-Anweisungen im Zusammenspiel (quasi in freier Wildbahn) und sieht die Umsetzung im HTML-Tutorial.

HTML5 und CSS3 lernen durch Nachbau von Beispielwebseiten

Nachdem am besten das Lernen durch ein eigenes Umsetzen erfolgt, wird im Folgenden das bisherige Wissen praktisch umgesetzt. Dazu werden komplette Beispielprojekte von verschiedenen Websites Schritt für Schritt nachgebaut.

  • einfaches einspaltiges Layout (mit Responsiven Design) mit der Website "Säulenbauten ..."
  • 2-Spaltiges Layout anhand Website "Tübingen im Winter"
  • 3-Spaltiges Layout mit der Fennek-Website

Die Schritt für Schritt Anleitung für das 2- und 3-spaltige Design findet sich in den Videos. Alle notwendigen Einzelteile wie Grafiken und Bildern können von hier heruntergeladen werden.

Sie können sich natürlich auch ein eigenes Projekt überlegen in dieses ähnlich der Beispielprojekte umsetzen: z.B. eine Website für den (eigenen?) Verein.

Wenn Sie dieses Kapitel vollständig durchgearbeitet haben, haben Sie eine eigene Website, die Sie nach Belieben auch noch erweitern können. Hier werden alle grundlegenden Schritte nacheinander vorgestellt und sofort umgesetzt.