Frontend Mentor Challenge - Social Links Profile

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  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

  @osmanbay90Posted 9 months ago

  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