Responsive Centered Profile

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

Here are some aspects that I am proud of:

• Building an organized structure and using the unordered list element `` to group the links together, which makes them easy to control.
• Using CSS variables for color management, which enhances maintainability and readability.
• Getting familiar with media queries, which I used several times in this project to implement responsive design and ensure the profile page looks good on various devices.
• Adding hover, focus, and active states for links, improving user interaction feedback.

As for what I would do differently next time:

I really don't know exactly, but I am open-minded to any suggestions if available.

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

• Horizontal Scroll Issue: Initially, a horizontal scrollbar was appearing due to the use of width: 100vw. This was resolved by changing it to width: 100%.
• Vertical Spacing: Adjusting the vertical padding to ensure the profile section was not too close to the top of the viewport, and maintaining consistency across different screen sizes.

What specific areas of your project would you like help with?

I just need some review on the link states styles to ensure this approach is correct: CSS .profile .profile-info ul li a:link, .profile .profile-info ul li a:visited, .profile .profile-info ul li a:focus { background-color: var(--grey); }

.profile .profile-info ul li a:hover { background-color: var(--light-grey); }

.profile .profile-info ul li a:active { background-color: var(--green); color: var(--off-black); }