Web - Übung 9, HTML & CSS - Responsive Design

From Coders.Bay Wiki
Revision as of 07:47, 13 February 2023 by Titzi (talk | contribs) (Undo revision 2140 by 23.106.219.66 (talk))
Jump to navigation Jump to search

Übung 9 - Website Travel Destination Erweiterung - Teil 3

  • 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
  • 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