Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Challenge: Die Kontaktseite per Grid gestalten
Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
Challenge: Die Kontaktseite per Grid gestalten
(Musik) In der Challenge zu diesem Kapitel geht es um die Kontakt-Seite, die ist bis jetzt noch relativ umgestaltet, was das Layout angeht. Sie sollen die Abschnitte für das Kontaktformular und für die Kontaktdaten ab einer Viewportbreite von ca. 600px nebeneinander platzieren. Das Kontaktformular soll so gestaltet werden, dass wenn genügend Platz dafür ist, die Beschriftung und die Eingabefelder nebeneinander stehen sollen, und nicht untereinander. Die Beschriftung soll rechtsbündig vor den Eingabefeldern stehen, also richtig dran. Und der Button zum Abschicken soll sich über die gesamte Breite des Formulars erstrecken. Im Browser sieht das Ganze momentan noch so aus, also relativ einspaltig. Und das tut es auch in der Desktop-Version. Und Sie sollen das so verändern, dass es jetzt etwa hier nebeneinander steht. Achten Sie drauf, dass das Formular links steht, und der Abschnitt mit den Kontaktdaten rechts. Die Beschriftung ist rechtsbündig am Feld, die Beschriftung und die…
Inhalt
-
-
-
-
-
-
-
-
-
(Gesperrt)
Ein Grid ist ein Raster und schafft Ordnung1 Min. 58 Sek.
-
(Gesperrt)
Mehrspaltige Layouts nur für moderne Browser: @supports2 Min. 21 Sek.
-
(Gesperrt)
Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.3 Min. 29 Sek.
-
(Gesperrt)
Das erste Grid-Layout: Die Infoboxen nebeneinander platzieren5 Min. 8 Sek.
-
(Gesperrt)
Flexbox und Grid sind ein gutes Team4 Min. 10 Sek.
-
Grid-Items manuell platzieren: 1. Mit nummerierten Linien4 Min. 48 Sek.
-
(Gesperrt)
Grid-Items manuell platzieren: 2. Mit benannten Bereichen5 Min. 10 Sek.
-
(Gesperrt)
Das Team: 1. HTML und grundlegende Gestaltung per CSS3 Min. 15 Sek.
-
Das Team: 2. Ein responsives Grid ohne Media Query4 Min. 51 Sek.
-
(Gesperrt)
Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen3 Min. 18 Sek.
-
(Gesperrt)
Die wichtigsten Grid-Eigenschaften auf einen Blick3 Min. 29 Sek.
-
(Gesperrt)
Challenge: Die Kontaktseite per Grid gestalten1 Min. 31 Sek.
-
(Gesperrt)
Solution: Die Kontaktseite per Grid gestalten3 Min. 8 Sek.
-
(Gesperrt)
-