Exercise – Lab 4

Goals

Creating a mobile-first, responsive portfolio using modern CSS techniques, ensuring correct structure, accessibility, validation and full online availability

Description

In this lab, I worked on making a website responsive using CSS. The goal was to make the layout adapt to different screen sizes by using a mobile-first approach, media queries, fluid layouts, and responsive images. First, I made an existing mobile website responsive by adding a breakpoint at 40em and limiting the maximum width of the layout. This part was pretty easy because the base code was already provided, and it helped me better understand how breakpoints work. Next, I created responsive cards. I added five cards, used the given responsive images, and made sure the cards scaled with the screen size. I also limited the layout to a maximum of three cards per row. This exercise was a bit more challenging, but it clearly showed how flexible layouts work in practice. After that, I focused on typography. I added a Google Font, adjusted font sizes, line height, margins, and maximum line length. This part required attention to detail but was not very difficult. Finally, I styled a link and a button with enough color contrast and added an icon using a pseudo-element. Overall, this lab helped me to understand responsive web design and made me more confident working with CSS.

Reflection

This lab helped me better understand how responsive websites work. Some parts were challenging at first, especially the cards layout, but by testing and adjusting the CSS I improved my skills.