WV-H2 - Responsiivinen Design
Tässä harjoituksessa opimme toteuttamaan responsiivisen web-sivun käyttäen CSS:n media query
-määrityksiä.
Käy läpi tämä materiaali ja tee sen mukana esimerkkiharjoitus: https://internetingishard.com/html-and-css/responsive-design/
Tallenna esimerkkiharjoitus itsellesi ja hostaa se joko student-palvelimelle, tai gitlab pagesin päälle, omaan kansioonsa. Palauta Optiman palautuslaatikkoon tekstitiedosto (.txt) jossa on linkki sekä itse hostattuun sivuun, että lähdekoodiin.
Hyödyllistä luettavaa
- Opettajan luentoslaidit
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
- https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/responsive_design_building_blocks
- https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/Mobile_first