Social Links Profile Resolution

Hello @CarlosFujimoto!

Your solution looks great!

I have a suggestion for improvement:

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

📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

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!

Hello @CarlosFujimoto. Congratulations on completing this challenge!!!🎉

To answer your question, you should use less divs because your website isn't accessible for screen readers. Div is a non-semantic HTML tag.

You should read this Frontend Mentor article on 10 fundamental web accessibility tips for front-end developers

• Every website should have at least one landmark like a main tag
• Images must have descriptive alt text because screen readers will say the file image source path. Example:

<img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall" />

• For the social media content should be wrapped in ul because it is a list.
• Attribution should be wrapped in a footer because holds copyright and legal information.

More info📚:

• HTML Semantic Elements

CSS 🎨:

• Add CSS Reset to remove default styles
  • A (more) Modern CSS Reset by Andy Bell
  • Josh Comeau CSS Reset
• Font size shouldn't be pixels because pixels don't scale when users want to change their font size in preferred browser.
• Switch height: 100vh; to min-height: 100vh` on the body because it causes problems on mobile devices.

Here is my solution to this challenge - Social links profile

I hope you find this useful and don't hesitate to reach out if you have any questions