msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6295d99723'
${ noResults }
Web-Dev-For-Beginners/translations/de/3-terrarium/2-intro-to-css/assignment.md

3.0 KiB
Raw Blame History Escape

CSS-Refactoring-Aufgabe

Ziel

Überarbeiten Sie das Terrarium-Projekt, um Flexbox oder CSS Grid für das Layout zu verwenden. Aktualisieren Sie HTML und CSS nach Bedarf, um ein modernes, responsives Design zu erreichen. Sie müssen keine verschiebbaren Elemente implementieren – konzentrieren Sie sich nur auf Layout und Styling.

Anweisungen

  1. Erstellen Sie eine neue Version der Terrarium-App. Aktualisieren Sie das Markup und CSS, um Flexbox oder CSS Grid für das Layout zu verwenden.
  2. Stellen Sie sicher, dass die Kunst und die Elemente wie in der Originalversion vorhanden sind.
  3. Testen Sie Ihr Design in mindestens zwei verschiedenen Browsern (z. B. Chrome, Firefox, Edge).
  4. Machen Sie Screenshots Ihres Terrariums in jedem Browser, um die Kompatibilität zwischen den Browsern zu demonstrieren.
  5. Reichen Sie Ihren aktualisierten Code und die Screenshots ein.

Bewertungskriterien

Kriterien Vorbildlich Angemessen Verbesserungswürdig
Layout Vollständig überarbeitet mit Flexbox oder CSS Grid; visuell ansprechend und responsiv Einige Elemente überarbeitet; teilweise Verwendung von Flexbox oder Grid Wenig oder keine Verwendung von Flexbox oder Grid; Layout unverändert
Kompatibilität Screenshots für mehrere Browser bereitgestellt; konsistentes Erscheinungsbild Screenshots für einen Browser; kleinere Inkonsistenzen Keine Screenshots oder größere Inkonsistenzen
Codequalität Sauberer, gut organisierter HTML/CSS; klare Kommentare Teilweise organisiert; wenige Kommentare Unorganisierter Code; keine Kommentare

Tipps

  • Überprüfen Sie die Flexbox und CSS Grid Anleitungen.
  • Verwenden Sie die Entwickler-Tools des Browsers, um die Responsivität zu testen.
  • Kommentieren Sie Ihren Code für mehr Klarheit.

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 ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.