Testen Sie Ihre Fähigkeiten: Responsives Webdesign und Media Queries
Ziel dieses Skill-Tests ist es, zu beurteilen, ob Sie verstehen, wie Media Queries verwendet werden und mit einem praktischen Beispiel im responsiven Webdesign arbeiten können. Alles, was Sie wissen müssen, um diese Aufgabe zu erfüllen, wird in den Layout-Lektionen des CSS-Layout-Moduls behandelt.
Hinweis: Da Sie Ihr Design in verschiedenen Bildschirmgrößen testen müssen, haben wir auf dieser Seite keine interaktiven Editoren. Laden Sie den Code herunter und arbeiten Sie lokal, oder verwenden Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch.
Wenn Sie stecken bleiben, können Sie sich in einem unserer Kommunikationskanäle melden.
Aufgabe
Laden Sie den Ausgangspunkt für diese Aufgabe herunter. Öffnen Sie die heruntergeladene HTML-Datei in Ihrem Browser und Sie werden eine skizzierte Website finden, die auf einem mobilen Gerät in lesbarer Weise geladen wird. Sie können Ihr Fenster kleiner ziehen oder die Ansicht für responsives Design in Firefox DevTools verwenden, um dies wie auf einem Telefon anzusehen.
Ihre Aufgabe ist es, eine Desktop-Version dieses Layouts zu erstellen, die angezeigt wird, wenn ausreichend Bildschirmbreite vorhanden ist, um es zu beherbergen. Ihr Endergebnis sollte wie das folgende Bild aussehen:
Es gibt mehrere Möglichkeiten, das Desktop-Layout zu erstellen, viel Spaß beim Experimentieren. Sie könnten auch einen zweiten Breakpoint hinzufügen und ein Layout erstellen, das im Hochformat auf einem Tablet gut funktioniert.