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

Social links profile

Valperā€¢ 150

@ValperDev

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


Another completed challenge!

All feedback is welcome!

Community feedback

Joseph Haddadā€¢ 220

@joehaddad1000

Posted

Here's my feedback on your solution:

  1. Semantic HTML: Your HTML is well-structured and makes good use of semantic elements. The main tag is used to wrap the main content, and the div tags are used appropriately for grouping elements. The img tag is used for the image, and the a tag is used for the links. Good job!

  2. Accessibility: The img tag is missing an alt attribute, which is important for accessibility. Screen readers use the alt attribute to describe the image to users with visual impairments. Consider adding a descriptive alt attribute to the img tag.

  3. Responsive Design: Without seeing the CSS for different screen sizes, it's hard to say how well the layout would adapt to different devices. Consider using media queries to ensure your layout looks good on a range of screen sizes.

  4. Code Structure: Your code is well-structured and readable. The CSS is organized with clear, descriptive class names, which makes it easy to understand what each style rule is doing. The use of CSS variables for colors is a good practice as it improves maintainability.

  5. Improvements: Consider adding :focus styles to your links for better keyboard accessibility. Users who navigate with a keyboard or other input device should be able to see which element has keyboard focus.

Overall, your solution is well-implemented with a few areas for improvement. Keep up the good work!

Marked as helpful

1

Valperā€¢ 150

@ValperDev

Posted

@joehaddad1000 I will keep that in mind for future projects thanks!

1
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello there! šŸ™‹šŸ½ā€ā™‚ļø

Your solution looks excellent!

I have a suggestion about your code that might interest you:

šŸ“Œ If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

I hope it helps you in future projects! šŸ˜Š

Other than that, great job!

Marked as helpful

1

Valperā€¢ 150

@ValperDev

Posted

@danielmrz-dev Thanks! I will check that out.

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