Testen Sie Ihre Fähigkeiten: Responsives Webdesign und Media Queries
Ziel dieses Fertigkeitstests ist es, zu beurteilen, ob Sie verstehen, wie man Media Queries verwendet und Sie mit einer praktischen Aufgabe im responsiven Webdesign arbeiten zu lassen. Alles, was Sie wissen müssen, um diese Aufgabe zu erfüllen, wird in den Layout-Lektionen im CSS-Layout-Modul behandelt.
Hinweis: Da Sie Ihr Design in mehreren 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.
Sollten Sie auf Schwierigkeiten stoßen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Aufgabe
Laden Sie den Ausgangspunkt für diese Aufgabe herunter. Öffnen Sie die heruntergeladene HTML-Datei in Ihrem Browser und Sie werden eine strukturierte Seite finden, die auf einem mobilen Gerät in einer lesbaren Weise geladen wird. Sie können Ihr Fenster kleiner ziehen oder den Ansicht für responsives Design in den Firefox DevTools verwenden, um es zu betrachten, als ob es auf einem Telefon wäre.
Ihre Aufgabe ist es, eine Desktop-Version dieses Layouts zu erstellen, die angezeigt wird, wenn genügend Bildschirmbreite dafür vorhanden ist. Ihr Endergebnis sollte dem Bild unten entsprechen:
Es gibt verschiedene Möglichkeiten, das Desktop-Layout zu erstellen, genießen Sie das Experimentieren. Sie könnten auch einen zweiten Breakpoint hinzufügen, um vielleicht ein Layout zu erstellen, das gut auf einem Tablet im Hochformat funktioniert.