Submitted 26 days ago

Responsive Social Media Links Page

Wilson Junior• 160

@willsf2021

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

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 am most proud of the clean and responsive design I was able to achieve with just HTML and CSS. The use of Flexbox allowed me to create a layout that adapts well to different screen sizes, ensuring that the profile page looks good on both desktop and mobile devices. Additionally, I’m pleased with the use of CSS transitions to add subtle hover effects, enhancing the user experience.

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

One of the main challenges I encountered was ensuring the layout remained responsive across different screen sizes. Initially, the sections and elements didn't align properly on smaller screens, causing the design to break. I overcame this by leveraging CSS Flexbox to create a flexible and adaptable layout. By experimenting with various Flexbox properties and adjusting padding, margins, and widths, I managed to create a layout that adjusts seamlessly to different devices.

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 26 days ago

Hi again, Wilson,

Nice project! I really like the hover effect on the profile picture—it’s a nice touch. I haven’t done this project myself, but you did a great job. (I would challenge myself with some different card sizes, but it’s not needed at all—just an extra challenge.)

One suggestion would be to add ARIA labels to make your site more accessible for people with disabilities. This would allow users who rely on screen readers to navigate your site more easily. Since this is essentially a marketing card(You are the product), SEO should also be a priority. For example, you could add an ARIA label in HTML like this:

<button aria-label="Click to hire me or whatever label">Hire me on LinkedIn</button>

Additionally, as a bonus, you might want to play around with meta / og tags to improve your SEO. This can help your site perform better when shared on social media and in search engine results.

Hope this feedback was helpful!

Best, Teodor

Please log in to post a comment

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