Difference between revisions of "Web - Übung 9, HTML & CSS - Responsive Design"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
===Übung 9 - Website Travel Destination Erweiterung - Teil 3=== | ===Übung 9 - Website Travel Destination Erweiterung - Teil 3=== | ||
* | |||
*Nutze das Gridsystem (z.B.: generelle Layoutstruktur/ Seitenaufbau) und Flexboxen(z.B.: Navigationselemente)für das Layout | |||
*Erstelle verschiedene Breakpoints (Media Queries) in deiner Seite, für eine unterschiedliche Darstellung auf Tablets und Smartphones | *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. | *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 | *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 | *Binde für die unterschiedlichen Displaygrößen unterschiedliche Fotos ein | ||
*Baue eine '''Keyframe Animation''' | *Baue eine '''Keyframe Animation''' | ||
*nutze '''Custom Properties''' um die Farben oder sich wiederholende Maßeinheiten als Variable abzuspeichern | *nutze '''Custom Properties''' um die Farben oder sich wiederholende Maßeinheiten als Variable abzuspeichern | ||
*baue | *baue bei deinen Bildern einen '''Filtereffekt''' ein | ||
Revision as of 11:45, 20 June 2023
Übung 9 - Website Travel Destination Erweiterung - Teil 3
- Nutze das Gridsystem (z.B.: generelle Layoutstruktur/ Seitenaufbau) und Flexboxen(z.B.: Navigationselemente)für das Layout
- 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
- nutze Custom Properties um die Farben oder sich wiederholende Maßeinheiten als Variable abzuspeichern
- baue bei deinen Bildern einen Filtereffekt ein