đ Wrap it up
Erfolgreiche Umsetzung!
Du hast jetzt all die Elemente umgesetzt:
â Erfolgreich implementiert:
- Textgrössen inklusive Ăberschriften etc.
- Video oder Bild als Slide
- Rubrik
- Weitere Bilder
- Buttons
- GefÀllt mir Bereich
- Blog Page Preview inklusive Ansicht fĂŒr "weitere spannende Artikel"
Dabei sehr vieles gelernt:
| Technologie | Was du gelernt hast |
|---|---|
| CSS Variablen | Wartbare, skalierbare Styles |
| Flexbox | Moderne Layout-Techniken |
| Responsive Design | Mobile First Entwicklung |
| Font-Management | Custom Fonts korrekt einbinden |
| Utility-First CSS | Wiederverwendbare Klassen |
đ Gratulation - du bist jetzt ein CSS-Profi!
Erweiterte Challenges
Wenn du jetzt ungebremst noch weiter machen möchtest, dann kannst du folgende offene Elemente versuchen schön zu gestalten:
Noch zu implementieren:
- Autor*innen Bereich
- Tabellen
- Fazit Box
- Produkt Kachel
- Autor*innen Box mit Folgen-Button
- Thema mit Folgen-Button
Schwierigkeits-EinschÀtzung
Von "einfach bis komplizierter" vorgehen:
| Element | Aufwand (0-10) | BegrĂŒndung |
|---|---|---|
| Beschreibung Bilder | 2 | Optional: Beschreibungstext unter den Bildern. Benötigt noch etwas HTML (figure, figurecaption) sowie CSS fĂŒr die Darstellung |
| Produkt Kachel | 3 | Sehr Ă€hnlich wie Blog Page Preview (verzichte besser auf die VerfĂŒgbarkeits-Anzeige) |
| Fazit Box | 4-6 | Tabelle besser gestalten (pro/kontra). Herausforderung: CSS-Umsetzung. Eventuell CSS Grid lernen â macht Aufwand grösser |
| Thema mit Folgen | 5 | Elemente wie bei Blog Page Preview wiederverwendbar. Neue Herausforderungen: EinrĂŒcken und Button rechts vom Text. CSS Grid könnte helfen |
| Autor*innen Box | 6 | Analog "Thema mit Folgen", plus korrekte Darstellung/Grösse des Autor*innen-Bilds. Grid zum Angleichen mit "Thema folgen" |
| Tabellen | 8-10 | Je nachdem wie "schön" die Tabelle aussehen soll, kann dies enorm aufwÀndig werden |
Empfohlene Reihenfolge:
- ** Beschreibung Bilder** (Quick Win)
- Produkt Kachel (Flexbox-Wiederholung)
- Fazit Box (CSS Grid Lerneffekt)
- Thema mit Folgen (Layout-KomplexitÀt)
- Autor*innen Box (Bild-Optimierung)
- Tabellen (Master-Challenge)
Fertige Lösung
Die "fertige" Blog Page mit dem ganzen CSS findest du unter: GitHub - Completed Blog Page
đĄ Hinweis: Du findest unter dem Link allenfalls auch CSS, HTML-Elemente/Lösungen, die nicht Teil des Tutorials direkt sind. Falls du konkret Fragen hast oder es Ă€hnlich machen willst, frage am besten einfach im Kurs nach.
Du hast eine solide CSS-Basis geschaffen - jetzt wird experimentiert! đ