DOM-E5015 - Internet Technologies and Techniques, Lecture, 23.11.2021-10.12.2021
This course space end date is set to 10.12.2021 Search Courses: DOM-E5015
Lecture 5
Introducing media queries and incorporating it to your workflow
1. Take a look at how these websites scale https://mediaqueri.es/ Notice how mobile is again a first class citizen! Nice! A thing that we're going to discuss in the lecture is "mobile first design". Nicest booklet that I could find about the subject was adobe's one here. Take a look of it as well.
2. Look at this nice 5min video about media queries. (skip first 50s)
https://youtu.be/2KL-z9A56SQ?t=53
References (might come in handy):
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://css-tricks.com/css-media-queries/
Tasks (if you weren't in the lecture):
0. Inspect this example. It will help you out
1. Do a navigation that is vertical on mobile and horizontal on wider screen sizes. No need to hide it yet (that's some javascript!) Design the hover effects, pick a font, make it special. (approx time 45min)
2. What kind of creative approach you can take it to showing or hiding effects? Telling a story while resizing your browser? Hiding some info on landscape mode? No need to do a full site - a working concept of that desired feature is enough. (approx time 60min)
zip both tasks separately and name them as firstname_lastname_lecture4_task1.zip and firstname_lastname_lecture4_task2.zip
If you get stuck, don't hesitate to contact Pekka for help :) I promise to answer between 9 and 12, but it's fine to try to ask help afterwards as well.