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

Frontend Mentor Challenge - Social Links Profile

mrockcodesā€¢ 50

@mrockcodes

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


I have problems estimating the pixels in the original designs. Also, I have problems with creating media queries because it is my first time doing it. I tried understanding media queries before hand to make sure my design will be responsive as much as possible. Overall, I somehow manage to make it responsive and have the design as close as possible with the original design.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @mrockcodes!

Your solution looks great!

I have a suggestion for improvement:

  • Use <main> to wrap the main content instead of <div>.

šŸ“Œ Think of <div> and <span> in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Marked as helpful

0
Osman Bayā€¢ 690

@osmanbay90

Posted

Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

1. Consolidate Common Styles: You have repeated styles for .hero-card-links ul li button and .hero-card-links ul li a button.` Instead of repeating them, you can merge them into a single rule since they share most of the properties.

2.Simplify Media Query: In your media query, you're repeating some styles unnecessarily. You can simplify it by only specifying the properties that need to change at the specified viewport width.

3.Use Semantic HTML: Consider using more semantic HTML elements where applicable. For instance, you can use <header>, <nav>, <main>, <footer>, etc., to provide more meaning to your markup.

4. Avoid Overusing <strong> Inside Buttons: Using <strong> inside buttons is not recommended for styling purposes. It's better to apply the necessary styles directly to the button element or use appropriate HTML elements for emphasis.

5. Optimize Flexbox Usage: You're using flexbox in several places. While it's a good approach for layout, ensure you're using it effectively and not overcomplicating the layout unnecessarily.

6. Accessibility: Ensure your website is accessible by using proper alt text for images, providing keyboard navigation, and ensuring color contrast for better readability.

Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! šŸš€

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