Lab 4 - Responsive webdesign
Goals of exercise
Summarise the goals of the exercise in bullet points.
- Goal:
Master Media Queries for Responsive Webdesign (RWD) and Responsive Images. - Setup:
Start with Lab 3 files; create menu links for Ex 1-4 - Ex 1 (RWD):
Make provided site responsive. Breakpoint at 40em. Site stops scaling at 80rem. - Ex 2 (Cards):
Use <picture> element for responsive images (breakpoint 600px). Create 5 fluid cards. Max 3 cards/row (min width 18rem). - Ex 3 (Type):
Add readable Google Font. Set text size 1.125rem and correct line-height. Headings scale 1.5x. Use max-width for line length. Use logical properties for margins. Style h3 after h2 uniquely. - Ex 4 (UI):
Style link/button. Ensure sufficient contrast (Axe validation!). Use :before pseudo-element for link icon.
Description
Describe the exercise in a few sentences. What is important? What do you need to use?
→ This assignment focuses on mastering Responsive Web Design using a mobile first approach. The core is implementing Media Queries to create adaptive layouts, optimizing images with the <picture> element, and ensuring proper typography and high-contrast UI elements for accessibility across all devices.
Related links
What were the websites that you used?
→ Mozilla and the Copilot that comes up every time you search something on Google.
Reflection
Woaw!
Describe what went well. Describe what you did good.
→ Well, at first I didn't understand the media queries, but now I think I'm starting to get the hang of it.
Aauuw!
Describe what was difficult. Where did you spend most of the time?
→ Responsive images are like super hard. I cannot do it without searching for the answer for at least an hour.
Not sure?
Describe what you are unsure about or what you're doubtful about.
→ Fluid layouts are a bit hard, but I think I can learn it by studying it more thoroughly.