CSS Aufgaben für KiberOne Schüler
Willkommen zu den CSS-Übungen! Hier findest du spannende Aufgaben, mit denen du deine CSS-Kenntnisse testen und verbessern kannst. Versuche, die Aufgaben der Reihe nach zu lösen.
-
1
Textfarben und Schriftgrößen
LeichtErstelle eine einfache Seite mit verschiedenen Textformatierungen.
- Erstelle eine Überschrift mit einer bestimmten Farbe (z.B. blau)
- Schreibe einen Absatz mit einer anderen Schriftgröße
- Mache ein Wort im Text fett und rot
- Füge einen weiteren Absatz mit einer anderen Farbe hinzu
Tipp: Nutze color für Farben und font-size für die Schriftgröße. -
2
Einfache Box gestalten
LeichtErstelle eine Box mit Hintergrundfarbe und Rahmen.
- Erstelle ein div-Element
- Gib der Box eine Hintergrundfarbe
- Füge einen Rahmen hinzu
- Setze etwas Abstand nach innen (padding)
- Schreibe einen Text in die Box
Tipp: Verwende background-color, border und padding. -
3
Zentrierte Liste
LeichtErstelle eine zentrierte Liste mit deinen Hobbys.
- Erstelle eine ungeordnete Liste (ul)
- Füge mindestens 3 Hobbys hinzu
- Zentriere die Liste auf der Seite
- Gestalte die Listenpunkte mit einer Farbe
- Füge etwas Abstand zwischen den Listenpunkten hinzu
Tipp: Nutze text-align: center für die Zentrierung und margin für Abstände. -
4
Gestalte deine Visitenkarte
LeichtErstelle eine digitale Visitenkarte mit deinem Namen, einem coolen Titel und deinen Interessen.
- Erstelle eine HTML-Datei mit einem div für deine Karte
- Gib der Karte eine Hintergrundfarbe deiner Wahl
- Zentriere den Text und wähle eine schöne Schriftart
- Füge Abstände (padding) und abgerundete Ecken hinzu
- Experimentiere mit verschiedenen Textfarben
Tipp: Nutze die Eigenschaften background-color, font-family, text-align, padding und border-radius. Beispiellösung ansehen -
5
Hover-Effekte für Buttons
LeichtErstelle drei coole Buttons, die sich verändern, wenn man mit der Maus drüber fährt.
- Erstelle drei Buttons mit verschiedenen Texten
- Gib jedem Button eine andere Grundfarbe
- Füge Hover-Effekte hinzu (z.B. Farbe ändern)
- Lass die Buttons größer werden beim Hover
- Füge Übergangseffekte (transitions) hinzu
Tipp: Verwende :hover und transition für sanfte Animationen. Beispiellösung ansehen -
6
Dein eigenes Profilkarten-Layout
MittelErstelle ein Layout mit drei Profilkarten für deine Lieblings-Videospielcharaktere.
- Erstelle einen Container für die Karten mit display: flex
- Gestalte jede Karte mit Bild, Name und Beschreibung
- Füge Schatten und Hover-Effekte hinzu
- Mache das Layout responsive (flexbox-wrap)
- Füge Abstände zwischen den Karten hinzu
Tipp: Flexbox macht das Ausrichten einfach. Nutze gap für die Abstände. -
7
Interaktive Bildergalerie
MittelBaue eine Galerie mit Bildern, die beim Hover einen coolen Effekt zeigen.
- Erstelle ein Raster mit mindestens 6 Bildern
- Bilder sollen gleich groß sein
- Füge Zoom-Effekte beim Hover hinzu
- Zeige einen Titel über dem Bild beim Hover
- Mache die Galerie für Handys responsive
Tipp: Nutze overflow: hidden für den Container und transform: scale() für Zoom-Effekte. -
8
Gaming-News Website
SchwerErstelle eine Seite für Gaming-News mit Header, Navigation und Artikelkarten.
- Gestalte einen auffälligen Header mit Logo
- Erstelle eine horizontale Navigation mit Hover-Effekten
- Füge Artikelkarten mit Bildern und Text hinzu
- Mache die Seite komplett responsive
- Füge eine "Zurück nach oben" Schaltfläche hinzu
Tipp: Teile die Aufgabe in kleine Schritte auf. Nutze position: fixed für den "Nach oben" Button. -
9
Dein Gaming-Profil
SchwerErstelle ein interaktives Gaming-Profil mit Statistiken und Achievements.
- Gestalte ein Profilbanner mit Hintergrundbild
- Füge einen Profilavatar mit Rahmen hinzu
- Erstelle eine Statistik-Sektion mit Fortschrittsbalken
- Füge eine Achievement-Galerie hinzu
- Mache alles interaktiv mit Hover-Effekten
Tipp: Nutze linear-gradient für Fortschrittsbalken und CSS Grid für die Achievement-Galerie.