Web-Dev-For-Beginners/translations/de/3-terrarium/2-intro-to-css/assignment.md

CSS Refactoring Aufgabe

Zielsetzung

Verwandle dein Terrarium-Projekt, um moderne CSS-Layout-Techniken zu verwenden! Refaktoriere den aktuellen Ansatz mit absoluter Positionierung und implementiere Flexbox oder CSS Grid für ein besser wartbares, responsives Design. Diese Aufgabe fordert dich heraus, moderne CSS-Standards anzuwenden und dabei die visuelle Attraktivität deines Terrariums zu erhalten.

Zu wissen, wann und wie man unterschiedliche Layout-Methoden verwendet, ist eine entscheidende Fähigkeit für moderne Webentwicklung. Diese Übung verbindet traditionelle Positionierungstechniken mit zeitgemäßen CSS-Layout-Systemen.

Anweisungen zur Aufgabe

Phase 1: Analyse und Planung

1. Überprüfe deinen aktuellen Terrarium-Code – Identifiziere, welche Elemente derzeit absolute Positionierung verwenden
2. Wähle deine Layout-Methode – Entscheide, ob Flexbox oder CSS Grid besser zu deinen Designzielen passt
3. Skizziere deine neue Layout-Struktur – Plane, wie Container und Pflanzenelemente organisiert werden sollen

Phase 2: Umsetzung

1. Erstelle eine neue Version deines Terrarium-Projekts in einem separaten Ordner
2. Aktualisiere bei Bedarf die HTML-Struktur, um deine gewählte Layout-Methode zu unterstützen
3. Refaktoriere das CSS, um Flexbox oder CSS Grid anstelle der absoluten Positionierung zu verwenden
4. Erhalte die visuelle Konsistenz – Stelle sicher, dass die Pflanzen und das Terrarium-Glas an den gleichen Positionen erscheinen
5. Implementiere responsives Verhalten – Dein Layout sollte sich elegant an verschiedene Bildschirmgrößen anpassen

Phase 3: Testen und Dokumentation

1. Cross-Browser-Tests – Überprüfe, ob dein Design in Chrome, Firefox, Edge und Safari funktioniert
2. Responsives Testen – Prüfe dein Layout auf Mobil-, Tablet- und Desktop-Bildschirmgrößen
3. Dokumentation – Füge deinem CSS Kommentare hinzu, die deine Layout-Entscheidungen erklären
4. Screenshots – Erfasse dein Terrarium in verschiedenen Browsern und Bildschirmgrößen

Technische Anforderungen

Layout-Umsetzung

• Wähle EINE Methode: Implementiere entweder Flexbox ODER CSS Grid (nicht beides für dieselben Elemente)
• Responsives Design: Verwende relative Einheiten (rem, em, %, vw, vh) statt fester Pixel
• Barrierefreiheit: Bewahre eine korrekte semantische HTML-Struktur und Alt-Texte
• Codequalität: Nutze konsistente Benennungskonventionen und organisiere CSS logisch

Moderne CSS-Features, die enthalten sein sollen

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

Browser-Support Anforderungen

• Chrome/Edge: Die neuesten 2 Versionen
• Firefox: Die neuesten 2 Versionen
• Safari: Die neuesten 2 Versionen
• Mobile Browser: iOS Safari, Chrome Mobile

Abzugebende Ergebnisse

1. Aktualisierte HTML-Datei mit verbesserter semantischer Struktur
2. Refaktorierte CSS-Datei mit modernen Layout-Techniken
3. Screenshot-Sammlung zur Demonstration der Browser-Kompatibilität:
   • Desktop-Ansicht (1920x1080)
   • Tablet-Ansicht (768x1024)
   • Mobile-Ansicht (375x667)
   • Mindestens 2 verschiedene Browser
4. README.md Datei mit Dokumentation:
   • Deine Layout-Wahl (Flexbox vs Grid) und Begründung
   • Herausforderungen während der Refaktorierung
   • Hinweise zur Browser-Kompatibilität
   • Anweisungen zum Ausführen deines Codes

Bewertungskriterien

Kriterium	Hervorragend (4)	Gut (3)	In Arbeit (2)	Anfang (1)
Layout-Implementierung	Meisterhafte Nutzung von Flexbox/Grid mit erweiterten Funktionen; vollständig responsiv	Korrekte Umsetzung mit gutem responsive Verhalten	Grundlagen umgesetzt, kleinere responsive Probleme	Unvollständige oder fehlerhafte Umsetzung
Codequalität	Sauberes, gut organisiertes CSS mit sinnvollen Kommentaren und konsistenter Benennung	Gute Organisation mit einigen Kommentaren	Ausreichende Organisation mit minimalen Kommentaren	Schlechte Organisation; schwer verständlich
Cross-Browser-Kompatibilität	Perfekte Konsistenz in allen geforderten Browsern mit Screenshots	Gute Kompatibilität mit dokumentierten kleinen Unterschieden	Einige Kompatibilitätsprobleme, die Funktionalität nicht beeinträchtigen	Große Kompatibilitätsprobleme oder fehlende Tests
Responsives Design	Hervorragender Mobile-First-Ansatz mit fließenden Breakpoints	Gutes responsives Verhalten mit angemessenen Breakpoints	Grundlegende responsive Features mit einigen Layout-Problemen	Eingeschränktes oder fehlerhaftes responsive Verhalten
Dokumentation	Umfassendes README mit detaillierten Erklärungen und Einblicken	Gute Dokumentation, die alle wichtigen Punkte abdeckt	Basisdokumentation mit wenigen Erklärungen	Unvollständige oder fehlende Dokumentation

Hilfreiche Ressourcen

Leitfäden zu Layout-Methoden

• 📖 Ein vollständiger Leitfaden zu Flexbox
• 📖 Ein vollständiger Leitfaden zu CSS Grid
• 📖 Flexbox vs Grid – Wähle das richtige Werkzeug

Tools für Browser-Tests

• 🛠️ Browser DevTools Responsive Mode
• 🛠️ Can I Use – Feature Support
• 🛠️ BrowserStack – Cross-Browser Testing

Tools zur Codequalität

• ✅ CSS Validator
• ✅ HTML Validator
• ✅ WebAIM Contrast Checker

Bonus-Herausforderungen

🌟 Fortgeschrittene Layouts: Implementiere sowohl Flexbox ALS AUCH Grid in verschiedenen Teilen deines Designs
🌟 Animationsintegration: Füge CSS-Übergänge oder Animationen hinzu, die mit deinem neuen Layout funktionieren
🌟 Dark Mode: Implementiere einen auf CSS-Custom-Properties basierenden Theme-Switcher
🌟 Container Queries: Nutze moderne Container Query Techniken für komponentenbasiertes responsives Design

💡 Denke daran: Das Ziel ist nicht nur, es zum Laufen zu bringen, sondern zu verstehen, WARUM deine gewählte Layout-Methode die beste Lösung für diese spezielle Design-Herausforderung ist!

---

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle anzusehen. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen.