Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Social Links Profile Page

@mujawarmsahil

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm most proud of creating a visually appealing and responsive social links profile page project. The use of CSS variables and a consistent naming convention made the code easy to follow and maintain. I'm also proud of the layout and styling, which are both responsive and visually appealing.

If I were to do this project again, I would focus more on accessibility and semantic HTML. I would also consider adding more interactive elements to the page, such as animations or hover effects.

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

One challenge I encountered was getting the layout to work correctly on different screen sizes. I overcame this by using media queries to adjust the layout and styling for smaller screens.

Another challenge was getting the hover effect to work correctly on the links section. I overcame this by using the :is pseudo-class to target both the :active and :hover states.

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

I would like feedback on how to improve the accessibility of the page, particularly with regards to semantic HTML and ARIA attributes. I would also appreciate feedback on how to optimize the code for better performance.

Additionally, I would like suggestions on how to add more interactive elements to the page, such as animations or hover effects, without compromising the overall design and layout.

Community feedback

Adriano 36,890

@AdrianoEscarabote

Posted

Hi Sahil Mujawar, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader.

Learn the differences between decorative/meaningless images vs important content.

The rest is excellent.

I hope you find it useful. 👍

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord