Videokurs

CSS-Grundlagen lernen und in der Praxis anwenden

Lerne praxisnah, wie du mit der Stylesheet-Sprache CSS die visuelle Darstellung einer Website definierst

LERNZIELE

Du verstehst was CSS ist und wofür es eingesetzt wird
Du lernst die CSS-Syntax und CSS-Selektoren kennen
Du weißt, wie du Text formatierst und den Hintergrund veränderst
Du lernst die Eigenschaften des CSS-Box-Modells kennen
Du verstehst, wie du die Position und Sichtbarkeit deiner Elemente steuerst
Du lernst CSS-Flexbox und CSS-Grid kennen, um das Layout deiner Website zu definieren
Du erhältst einen Einblick in Übergänge und Animationen
Du passt mit Media Queries deine Website an verschiedene Endgeräte an

INHALT

CSS zählt zu den Grundtechnologien des Webs und ist daher zwingend erforderlich, um die visuelle Darstellung einer Website zu definieren. In diesem Kurslernst du Schritt für Schritt die Stylesheet-Sprache kennen. Wir werfen dabei einen genauen Blick auf die einzelnen CSS-Eigenschaften, die du zum Beispiel benötigst, um die Hintergrundfarbe und Position einzelner Elemente zu verändern.

Die Lektionen enthalten neben dem theoretischen Wissen auch praktische Übungen, damit du das Gelernte direkt in der Praxis ausprobieren kannst. Falls du bereits Vorwissen in HTML mitbringst, ist dieser Kurs genau richtig für dich, um nun auch das Design zu bestimmen.

ALLE LEKTIONEN IM ÜBERBLICK

CSS Grundlagen

Intro
Einführung in Visual Studio Code
Einführung in die Browser-Entwicklungstools
Vorbereitung der Arbeitsumgebung
Was ist CSS?
Deine erste Zeilen in CSS
CSS-Selektoren kennenlernen
CSS-Selektoren verbinden, kombinieren und gruppieren
Schriften darstellen und Texte formatieren
Mit dem CSS-Box-Modell Höhe, Breite und Abstände festlegen
Hintergrund mit Farben, Bilder oder Schatten gestalten
Mit der Display-Eigenschaft definieren, wie der Browser Elemente rendert
Elemente positionieren und ausrichten
Überlaufverhalten, Sichtbarkeit und Deckkraft
Mit CSS-Flexbox layouten
CSS-Grid kennenlernen
CSS-Grid in der Praxis
Elemente animieren und Übergänge definieren
Website mit Media Queries für unterschiedliche Geräte optimieren
CSS-Kaskade verstehen
Quiz: CSS-Grundlagen

SO LERNST DU MIT DIESEM KURS

In den Videokursen der heise academy lernst du IT-Themen anschaulich und verständlich. Du siehst den Experten bei der praktischen Arbeit zu und lässt dir dabei alles genau erklären. Das Wissen ist in kompakte Lerneinheiten unterteilt, sodass du den Kurs Schritt für Schritt durcharbeiten oder gezielt zu Lektionen springen kannst, die dich interessieren. Die persönliche Lernumgebung der heise academy hält viele Funktionen für dich bereit, die dich beim Lernen unterstützen:

Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten
Wissensquiz zur Lernkontrolle
Lernhistorie und Lernfortschritt
Lesezeichen und Notizen
Volltextsuche in den Videos
Übungsmaterial zum Mitmachen
Responsive Web-App und Videostreaming für alle Endgeräte

TECHNISCHE VORAUSSETZUNGEN

Für diesen Videokurs wird lediglich ein aktueller Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.

DEIN EXPERTE

Fabian Hiller

Open Source Webentwickler

Fabian Hiller ist TypeScript-Experte und Open-Source-Entwickler. Er ist Creator von Valibot (einer modularen, typsicheren Schema-Validierungs-Bibliothek) und Formisch (einer schema-basierten, framework-agnostischen Formular-Bibliothek für React, Solid, Vue, Svelte und mehr) sowie Co-Creator von Standard Schema, einer Spezifikation für interoperable TypeScript-Schema-Bibliotheken. Heute lebt und arbeitet Fabian in New York, wo er als Founding Engineer bei einem Startup tätig ist. Daneben pflegt und entwickelt er seine Open-Source-Projekte weiter, die inzwischen unter dem Dach der Open-Circle-Organisation gebündelt sind.