Lerne CSS, indem du wunderschöne Zitate gestaltest

Name: Lerne CSS, indem du wunderschöne Zitate gestaltest
Rating: 4.4 (37 reviews)

Übe alle wichtigen CSS-Techniken und baue eine Gallerie mit deinen Lieblingszitaten

Created byAnna Prenzel

Last updated 6/2021

German

What you'll learn

Alle wichtigen CSS-Techniken zur Formatierung und Layoutgestaltung
CSS Klassen, IDs und Selektoren sowie Kombinationen von Selektoren
CSS Einstellungen für das Box-Modell: Margin, Padding, Border, Width
Automatische Anpassung der CSS Einstellungen an die Bildschirmgröße mit CSS Media Queries
Gestaltung ein- und mehrspaltiger Layouts mit CSS Flexbox
Schriftformatierung (einzelne Wörter hervorheben, externe Schriftarten wie z.B. Google Fonts verwenden, Icons einbinden)
Farbverläufe und Hintergrundbilder richtig einbinden und positionieren
DSGVO-Konforme Verwendung von externen Font- und Icon-Bibliotheken

Course content

4 sections • 16 lectures • 1h 57m total length

Vorbereitung0:21
Das erste Zitat mit HTML7:45
Wir erstellen eine einfache HTML-Seite, auf der das erste Zitat angezeigt wird.
Die ersten Formatierungen für Überschriften und Absätze7:05
Wir setzen zum ersten Mal CSS ein, um Schriftgröße, Schriftfarbe und andere Texteigenschaften einzustellen.
Nur bestimmte Absätze formatieren: Der Klassenselektor4:51
Wir lernen, wie wir CSS-Klassen einsetzen können, wenn eine Formatierung nur auf bestimmte Elemente angewendet werden soll.
Eine eigene Klasse für die Zitatboxen7:44
Die HTML-Abschnitte, die jeweils zu einem Zitat gehören, sollen mit Div-Elementen gruppiert werden. Wir weisen den Div-Elementen eine eigene Klasse zu, um die Zitatboxen einheitlich zu formatieren.

Rahmen und Abstände für die Zitatboxen festlegen6:04
Wir lernen die Eigenschaften des CSS Box-Modells kennen: Padding, Border und Margin. Damit lassen sich die Zitatboxen besser voneinander abheben.
Wir sprechen über den mobile-first-Ansatz in der Webentwicklung. Unser Layout sieht bei kleinen Bildschirmen (mobiles Layout) gut aus, weil die Boxen die ganze Bildschirmbreite ausfüllen. Bei großen Bildschirmen wirken die Boxen zu breit. Momentan kümmern wir uns aber nur um das mobile Layout.
Margins und Paddings perfekt aufeinander abstimmen14:39
Wir lernen die Eigenschaften border-radius und background-color kennen. Wir gestalten die Überschriften der Zitatboxen mit einer Hintergrundfarbe. Dabei stoßen wir auf Probleme mit vom Browser voreingestellten Margins. Mit Hilfe der Browser-Entwicklertools finden wir heraus, welche Einstellungen wir vornehmen müssen, um das Layout zu reparieren.
Kombinierte Selektoren und ID-Selektor13:56
Wir lernen, wie wir CSS-Klassen einsparen können, indem wir CSS-Selektoren kombinieren.
Außerdem beschäftigen wir uns mit dem ID-Selektor. Wir verwenden ihn, um eine Unterüberschrift für unsere Zitat-Webseite zu gestalten.
Ich zeige Ihnen, wie Sie die Browser-Entwicklertools zum Experimentieren mit verschiedenen CSS-Einstellungen nutzen können.

Zitate mit Hintergrundbildern19:28
Ich zeige Ihnen, wie Sie ein Zitat mit einem Hintergrundbild gestalten. Dabei diskutiere ich auch die verschiedenen Varianten zur Positionierung des Hintergrundbildes mit der Eigenschaft background-position.
Tricks: einzelne Wörter hervorheben, transparente Hintergrundfarben8:48
Wir verwenden span-Tags, um einzelne Wörter separat zu formatieren. Außerdem zeige ich Ihnen, wie Sie einen Text mit einer transparenten Hintergrundfarbe hinterlegen können.
Schriftarten von Google Fonts einbinden11:45
Wir verwenden eine Schriftart von Google Fonts. Um Problemen mit dem Datenschutz vorzubeugen, speichern wir die Schriftart lokal auf unserem PC ab. Ich zeige Ihnen, welche Schritte dazu notwendig sind.
Farbverläufe, Ausrichtung, Icons0:05
Ich zeige Dir, wie Du Farbverläufe als Hintergrund für die Zitate verwenden kannst. Außerdem werden wir dekorative Symbole, wie z.B. Herzchen und Smileys mit Hilfe der Bibliothek "Material Icons" von Google einbinden. Dabei achten wir streng auf eine datenschutzkonforme Einbindung (DSGVO).
Den Autor der Zitate angeben
Eine dekorative Rahmenlinie hinzufügen

Die Breite der Zitatboxen bei größeren Bildschirmen reduzieren10:21
Wir arbeiten zum ersten Mal mit media queries, damit die Zitatboxen bei größeren Bildschirmen nicht so langgestreckt aussehen.
Ich zeige Ihnen, wie Sie die Zitatboxen bei größeren Bildschirmen in der Mitte platzieren können.
Media queries für die Zitatboxen zum Thema "Leben"
Mit CSS Flexbox die Zitate nebeneinander anordnen0:04
In diesem Video erkläre ich Dir das Flexbox-System von CSS, welches Du in Verbindung mit CSS Media Queries dafür nutzen kannst, um ein mehrspaltiges Layout für größere Bildschirme zu erschaffen.
Ein weiteres Anwendungsbeispiel für die CSS Flexbox4:36
Wir verwenden die CSS-Einstellung display: flex, um auch die Überschriften nebeneinander anzuordnen.
Weiterführendes Material0:19
Für den Fall, dass Du noch mehr lernen möchtest...

Requirements

Du solltest Grundkenntnisse in HTML besitzen (einfache Überschriften, Absätze, Links und Aufzählungen).
Du kannst den Kurs ohne Vorkenntnisse in CSS absolvieren.

Description

Eine Webseite mit CSS zu gestalten, ist eigentlich nicht schwer. Allerdings bietet die CSS-Sprache eine fast unüberschaubare Fülle von Möglichkeiten und Einstellungen. Ich möchte Dir den Weg durch die vielfältigen CSS-Techniken weisen und Dir zeigen, worauf es ankommt.

In jeder Lektion wirst Du einen Deiner Lieblingssprüche formatieren, z.B. mit tollen Hintergründen und Schriften. Auf diese Weise hast Du immer ein kleines Erfolgserlebnis und am Ende kannst Du die Sammlung Deiner Sprüche stolz präsentieren!

Who this course is for:

Jeder, der seine Webseite mit CSS gestalten möchte.
Jeder, der CSS anhand von kleinen Beispielen kennen lernen möchte. Der Kurs ist zum Neueinsteigen oder Auffrischen gleichermaßen geeignet.

Lerne CSS, indem du wunderschöne Zitate gestaltest

What you'll learn

Explore related topics

Course content

Das erste Zitat5 lectures • 28min

Das mobile Layout gestalten3 lectures • 35min

Weitere Formatierungstechniken4 lectures • 40min

Anpassung des Layouts für größere Bildschirme4 lectures • 15min

Requirements

Description

Who this course is for: