Diese Website basiert auf der Übungswebsite
Diese Website basiert auf den Techniken der Übungswebsite, die Sie sowohl im Buch als auch im Videokurs erstellen, und die ich Ihnen im Folgenden kurz vorstellen möchte.
HTML: die Übungswebsite in Teil 1
Im ersten Teil, HTML (mit einer Prise CSS), lernen Sie die wichtigsten HTML-Elemente kennen:
- Überschriften
- Fließtext und Listen
- Bilder, Audio und Video
- semantische Strukturelemente
- Formulare und Tabellen
Alle diese Elemente bekommen auch gleich eine grundlegende Gestaltung mit einfachen CSS-Regeln. Am Ende von Teil 1 erweitern Sie die Übungswebseite zu einer Übungswebsite mit vier Webseiten.
Die Übungswebsite am Ende von Teil 1 (Desktop)
Die mobile Version
CSS-Grundlagen: die Übungswebsite in Teil 2
In Teil 2, CSS-Grundlagen, geht es um grundlegende Konzepte von CSS:
- Syntax, Farbwerte und Einheiten
- Box-Modell
- Selektoren
- Kaskade, Vererbung, Standardwert,
- Schrift- und Textgestaltung
- Gestalten der Boxen und Abstände
Zum Abschluss gibt es dann noch ein paar Tipps zum Organisieren von Stylesheets.
Mit Ausnahme der Navigation bleibt die Übungswebsite in Teil 2 aber einspaltig, sodass die Breite der Desktop-Version erst einmal auf 600px begrenzt wird.
Die Übungswebsite am Ende von Teil 2 (Desktop)
Die mobile Version
Responsive CSS-Layouts: die Übungswebsite in Teil 3
In Teil 3, CSS-Layout, lernen Sie diverse Techniken zum Erstellen von responsiven Layouts per CSS kennen:
- Media Queries
- Flow und
position floatundclear- Flexbox
- CSS-Grid
Mit diesen Techniken erstellen Sie mehrspaltige Layouts für die Inhalte und eine responsive Navigation.
Die Übungswebsite am Ende von Teil 3 (Desktop)
Die mobile Version