Testen Sie Ihre Fähigkeiten: Responsives Webdesign und Media Queries
Ziel dieses Fähigkeits-Tests ist es, Ihnen zu helfen, zu beurteilen, ob Sie verstehen, wie man Media Queries verwendet und Sie mit responsivem Webdesign durch eine praktische Aufgabe vertraut zu machen. Alles, was Sie wissen müssen, um diese Aufgabe zu erledigen, wird in den Layout-Lektionen im CSS-Layout-Modul behandelt.
Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Leitfaden zur Nutzung der Testen Sie Ihre Fähigkeiten. Sie können uns auch über einen unserer Kommunikationskanäle kontaktieren.
Aufgabe
Da Sie Ihr Design auf mehreren Bildschirmgrößen testen müssen, haben wir auf dieser Seite keine interaktiven Editoren.
Um zu beginnen:
- Laden Sie den Ausgangspunkt für diese Aufgabe herunter.
- Öffnen Sie die heruntergeladene HTML-Datei in Ihrem Browser und Sie finden eine drahtgerahmte Site, die auf einem mobilen Gerät lesbar geladen wird.
- Ziehen Sie Ihr Fenster kleiner oder verwenden Sie die ansicht für responsives Design in den Firefox DevTools, um dies so anzuzeigen, als ob es auf einem Telefon wäre.
Ihre Aufgabe besteht darin, eine Desktop-Version dieses Layouts zu erstellen, die angezeigt wird, wenn genügend Bildschirmbreite hierfür vorhanden ist. Ihr Endergebnis sollte wie das folgende Bild aussehen:
Es gibt verschiedene Möglichkeiten, das Desktop-Layout zu erstellen — genießen Sie es, zu experimentieren. Sie könnten auch einen zweiten Breakpoint hinzufügen, um möglicherweise ein Layout zu erstellen, das gut auf einem Tablet im Hochformat funktioniert.