HTML & CSS Hands On

Die folgenden Übungen kannst du direkt online in JSFiddle machen. Du brauchst dafür kein installiertes Tool. Für jede Übung wird das gewünschte Ergebnis dargestellt und du findest jeweils einen Link zur Ausgangsbasis für das Beispiel.

HTML

Basic Tags

Im ersten Beispiel werden die am häufigsten verwendeten HTML Element verwendet.

Startprojekt öffnen

Formatierung mit Tags

In diesem Beispiel geht es um die verschiedenen Optionen, um Text direkt durch HTML Elemente zu formatieren.

Startprojekt öffnen

Zitate, Abkürzungen, Adressen

Hebe Zitate, Abkürzungen und Adressen hervor.

Startprojekt öffnen

Code

Füge die richtigen HTML Tags ein um Code, Variablen und den Ergebnisbereich zu kennzeichnen.

Du kannst auch noch CSS Styles für die entsprechenden Tags hinzufügen, um das Ergebnis wie unten darzustellen.

Startprojekt öffnen

Weitere Übungen für HTML

https://www.w3schools.com/html/exercise.asp

CSS

Selektoren

Mit den Selektoren bestimmt man, welche Elemente aus dem HTML gestylt werden sollen. Wir wollen in diesem Beispiel folgende Styles:

section1: gelber Hintergrund
alle Überschriften: rote Schrift
alle Absätze: blaue Schrift
alle Elemente mit der Klasse important: fett
alle Absätze in section2: Schriftart Courier New
jeder erste Absatz pro Section: alles in Großbuchstaben
jedes span das direkt in einem Absatz vorkommen (nur 1. Ebene): unterstrichen

Startprojekt öffnen

Units

Füge im CSS die Styles für Breite und Höhe der div Elemente hinzu.

Startprojekt öffnen

Display

Das display Property steuert das Anzeigeverhalten von Elementen. Verwende jeweils das korrekte display Property und ergänze wo nötig noch Höhe und Breite der Elemente im CSS.

Startprojekt öffnen

Box Model

Ändere den Rahmen, Innen- und Außenabstand und den Umriss der div Elemente.

Startprojekt öffnen

Position

Setzte die Styles für die div Elemente so, dass sie sich wie in der angegebenen Lösung verhalten.

Startprojekt öffnen

Overflow

Ändere das overflow verhalten der drei div Elemente.

Startprojekt öffnen

Float

Lass den Text um die div Elemente fließen.

Startprojekt öffnen

Alignment

Versuche das gewünschte Alignment auf verschiedene Arten zu erreichen.

Startprojekt öffnen

Columns

Verwende im folgenden Beispiel die CSS Multi-Column Properties um ein drei-spaltiges Layout zu erreichen.

Startprojekt öffnen

Variables

Verwende im folgenden Beispiel Variablen mit den Namen bg-color-light, bg-color-dark, font-size-small und font-size-large, um den div Elementen die richtigen Farben und Größen zuzuweisen.

Startprojekt öffnen

Calc

Im folgenden Projekt sollen Header und Footer je 50px hoch sein, das Menu soll 20% der gesamten Bildschirmhöhe einnehmen und der Content-Bereich bekommt den Rest.

Startprojekt öffnen

Media Queries

Das folgende Bespiel besteht aus einem Header, einem Menu, dem Contentbereich und einem Footer. Folgende Styles sollen abhängig von Größe und Medientyp gesetzt werden:

default

Die Überschriften sind blau.
Header und Footer sind grau hinterlegt.
Die Position von Header und Footer ist oben bzw. unten fixiert und somit immer sichtbar.
Das Menu wird mit 25% und der Content mit 75% der verfügbaren Breite angezeigt.

max-height 500px

Die Position von Header und Footer ist nicht mehr fixiert sondern statisch (default Verhalten).

max-width 500px

Menu und Content werden je mit 100% Breite untereinander angezeigt.

print

Die Überschriften werden schwarz dargestellt.
Header, Footer und Menu werden nicht angezeigt.

Startprojekt öffnen

Flexbox

Eine Flexbox besteht aus einem Container und Items im Container. Damit die Items im Container als Flexbox dargestellt werden, muss am Container folgendes CSS Property gesetzt werden:

display: flex | inline-flex;

CSS Properties für den Container

Richtung

flex-direction: row | row-reverse | column | column-reverse;
Richtung, in der die Items angeordnet werden (Zeile oder Spalte)
flex-wrap: nowrap | wrap | wrap-reverse;
Zeilen- bzw. Spaltenumbruch

Abstand (nur Firefox und Safari)

column-gap: <length> | <percentage>;
Abstand zwischen den Spalten
row-gap: <length> | <percentage>;
Abstand zwischen den Zeilen
gap: <'row-gap'> <'column-gap'>?;

Ausrichtung

justify-content: flex-start | flex-end | center | space-between | space-around;
Anordnung entlang der Hauptachse
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Anordnung entlang der Kreuzachse
place-content: <'alignContent'> <'justify-content'>?;
justify-items: start | end | center | stretch | ...;
setzt das justify-self Property für alle Elemente im Container
align-items: flex-start | flex-end | center | baseline | stretch;
setzt das align-self Property für alle Elemente im Container (nur bei wrap)
place-items: <'align-items'> <'justify-items'>?;

CSS Properties für die Items

order: <integer>;
Reihenfolge des Items
align-self: flex-start | flex-end | center | baseline | stretch;
Alignment entlang der Kreuzachse
flex-grow: <number>;
gibt an, wie viel das Item im Verhältnis zu den anderen Items wachsen darf - Ausgangsbasis ist width oder height oder flex-basis
flex-shrink: <number>;
gibt an, wie viel das Item im Verhältnis zu den anderen Items schrumpfen darf - Ausgangsbasis ist flex-basis bzw. width oder height
flex-basis: content | <width>;
initiale Größe des Elements
flex: [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];