Testen Sie Ihre Fähigkeiten: Responsive Webdesign und Media Queries
Ziel dieses Fähigkeitstests 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 bewältigen, wird in den Layout-Lektionen des CSS-Layout-Moduls behandelt.
Hinweis: Da Sie Ihr Design auf 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.
Wenn Sie nicht weiterkommen, können Sie sich über einen 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 finden eine drahtgerahmte Seite, die auf einem mobilen Gerät in einer lesbaren 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 anzuzeigen.
Ihre Aufgabe ist es, eine Desktop-Version dieses Layouts zu erstellen, die angezeigt wird, wenn genügend Bildschirmbreite vorhanden ist, um es unterzubringen. Ihr Endergebnis sollte wie das unten stehende Bild aussehen:
Es gibt mehrere Möglichkeiten, das Desktop-Layout zu erstellen, genießen Sie das Experimentieren. Sie könnten auch einen zweiten Breakpoint hinzufügen und ein Layout erstellen, das im Hochformat auf einem Tablet gut funktioniert.