BananaMaster

6 Wie %, vw und vh in CSS funktionieren - ( HTML und CSS, Front End )

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

📘 Praktische Aufgaben: %, vw, vh

Erstelle für jede Aufgabe eigene Klassen in der Datei style.css und wende sie auf die passenden Tags an.

📌 Dateistruktur: index.html + style.css

✏️ Aufgabe 1

Reproduziere den Block. Schätze die Größe des Elternelements mit dem Auge:

✏️ Aufgabe 2

Reproduziere den Block. Schätze die Größe des Elternelements mit dem Auge:

✏️ Aufgabe 3

Reproduziere die verschachtelten Blöcke. Schätze die Größe des Elternelements mit dem Auge:

✏️ Aufgabe 4

Drei Kindblöcke stehen in einer Spalte und teilen sich die Höhe des Elternelements. Schätze die Größe des Elternelements mit dem Auge:

✏️ Aufgabe 5

Das Elternelement hängt vom Browserfenster ab, zwei Kinder stehen in einer Spalte. Schätze die Werte mit dem Auge:

✏️ Aufgabe 6

Das Elternelement hängt vom Browserfenster ab, drei Kinder stehen in einer Spalte. Schätze die Werte mit dem Auge:

✏️ Aufgabe 7

Das Elternelement richtet sich nach dem Browserfenster, das Kind nach dem Elternelement. Schätze die Werte mit dem Auge:

✏️ Aufgabe 8

Das Elternelement richtet sich nach dem Browserfenster, das Kind nach dem Elternelement. Schätze die Werte mit dem Auge:

✏️ Aufgabe 9

Drei Ebenen: Das Elternelement hängt vom Fenster ab, jedes Kind hängt von seinem eigenen Elternelement ab. Schätze die Werte mit dem Auge:

✏️ Aufgabe 10 — 🔥 Bonus

Drei Kindblöcke stehen in einer Spalte innerhalb des Elternelements. Schätze die Werte mit dem Auge:

📌 Wichtig:
Jede Klasse wird separat in style.css geschrieben.
Verwende nur HTML und CSS.
Übe die Einheiten: %, vw, vh.