social-links-profile

Oh dear the html in this needs rewriting I'm afraid. There are lots of fairly serious problems and the css could do with improvements too..

1. Remove all IDs. This is not what they are for. Also IDS must be unique on a page, they cannot be repeated on multiple elements. They will become extremely important later so you need to learn to use them correctly.
2. All content must be inside the body. You can't have a footer outside of it.
3. Remove the header element. That is a very important landmark that has an important purpose. The header sits outside of main as its own landmark and must contain repeating content across every page of a site (like navigation or logo). This design has no header.
4. The img does not need any element to wrap it.
5. The img should have proper alt text. "girl" does not describe this image. Read the excellent post on discord about how and when to write alt text (search the resources channel for "alt").
6. Don't add roles to divs.
7. The list of links should be in a list element.
8. The links must be anchors. They are not buttons. Make sure you understand the difference between these elements.
9. I think you are misunderstanding/misusing the section element. This design doesn't need sections at all. They will behave just like divs, there is no benefit to adding sections and role group anywhere.
10. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
11. This challenge does not need a media query at all, all of them should be deleted. But in future challenges, make sure you know how to use media queries well. The mobile styles should be the default, only override certain properties for larger screens, and media queries must be defined in rem or em not px. Theres more in the post.
12. The component should only have a max width in rem. No widths.
13. Children of the component don't need widths either, with the exception of the links which may need width 100% (or display block). Remove all of the widths on child elements.
14. Stop using percentages so much, especially for padding/margin. That removes all control of the layout because you don't know what percentages will equate to.
15. I'm not sure why you're using grid in this as there is no benefit. Perhaps if you were using the gap property that would make sense.
16. Text align inherits so can go on the component instead of individual child items.
17. The img is the onky element that should have an explicit width and height (eg in rem or px)

I hope this helps. Go back through pervious challenges and make sure you apply the same learnings.

Particularly focus on getting the html right as everything else stems from that. If the html is wrong, nothing in the solution can be right.

Hi, Consider using <a></a> tags instead of <button> for links. <button id="b">Frontend Mentor</button> <a id="frontend-mentor" href="https://www.frontendmentor.io">Frontend Mentor</a>

By employing <a></a> tags, you not only maintain consistency in your HTML structure but also ensure better accessibility and user experience for navigating to external resources. This approach aligns with web standards and enhances the semantic clarity of your code."