Difference between revisions of "Web - Übung 9, HTML & CSS - Responsive Design"

Revision as of 12:04, 13 February 2023

Erstelle für deine Reisedestination-Webseite ein Print Layout ohne Bilder. Der Text soll über die gesamte Breite gehen, die Navigation ausgeblendet. Bei Verlinkungen muss die Linkadresse angezeigt sein (siehe Buch: HTML & CSS für Dummies)
Erstelle verschiedene Breakpoints (Media Queries) in deiner Seite, für eine unterschiedliche Darstellung auf Tablets und Smartphones
Erstelle (falls noch nicht vorhanden) ein Kontaktformular für deine Reisedestination Seite bei der du mittels Dropdown eine Destination auch auswählen kannst plus ein paar anderer Formularfelder. In der mobilen Ansicht sollen die Labels für die Inputfelder darüber stehen, auf großen Screens daneben.
Baue eine Klappnavigation (Burgermenue) z.B.: anhand der Vorlage: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
Binde für die unterschiedlichen Displaygrößen unterschiedliche Fotos ein
Baue eine Keyframe Animation ein
nutze Custom Properties um die Farben oder sich wiederholende Maßeinheiten als Variable abzuspeichern
baue irgendwo einen Filtereffekt ein
Nutze das Gridsystem (z.B.: generelle Layoutstruktur/ Seitenaufbau) und Flexboxen(z.B.: Navigationselemente)für das Layout

@@ Line 7: / Line 7: @@
 *Baue eine '''Keyframe Animation''' ein
 *nutze '''Custom Properties''' um die Farben oder sich wiederholende Maßeinheiten als Variable abzuspeichern
-*nutze zum Beispiel als Headerbild den '''Überblendeffekt'''
 *baue irgendwo einen '''Filtereffekt''' ein
 *Nutze das Gridsystem (z.B.: generelle Layoutstruktur/ Seitenaufbau) und Flexboxen(z.B.: Navigationselemente)für das Layout