Responsive Social links profile page

What are you most proud of, and what would you do differently next time?

One key thing I am proud of from this project was the practical use of CSS transitions and transforms. I applied these to enhance interactivity—such as subtle hover and focus effects on the social links—making the profile card feel more dynamic and engaging.

Another valuable lesson was learning to build responsive designs without relying heavily on media queries. Instead, I used the clamp() function for widths, paddings, margins, and font sizes, allowing the layout to adapt fluidly across screen sizes with minimal code.

Additionally, I discovered the benefit of using CSS custom properties (variables). Defining global variables improved code maintainability and reusability, especially when working with consistent color schemes and spacing values throughout the project. Specifically, I defined color variables in the :root selector at the top of my CSS file. This allowed me to store commonly used color values in one place and reference them consistently throughout the stylesheet.

What challenges did you encounter, and how did you overcome them?

A key challenge I faced during this project was understanding and applying CSS custom variables and pseudo-classes effectively. Initially, I found it difficult to grasp how these features work and how to use them correctly in a real project.

However, by referring to helpful resources such as W3Schools, I was able to overcome this challenge. Their explanations and examples provided me with the clarity I needed to implement custom variables for styling and use pseudo-classes like :hover and :focus-visible to enhance interactivity and accessibility.

This learning experience has strengthened my CSS skills and boosted my confidence in writing more scalable and user-friendly stylesheets.