Responsive Social Link Profile

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 1 year ago

  This is missing landmarks. There should be a main wrapping the component and a footer for the attribution.

  It also

  • is missing a heading
  • needs properly written alt text on the image
  • needs a list
  • should not have divs inside the links. It could have spans but these are still unnecessary in this.
  • should have fonts linked in the html for better performance not css imports
  • should not have width 100vw anywhere. The body is already full width and viewport units don't account for scrollbar widths so all that can ever do is cause unwanted horizontal scroll
  • must not limit the height of any elements that contain text, including the body. You can use min height but not height. There are several other elements that also must not have height, and especially not in px.
  • font size must never ever be in px
  • make sure you understand the difference between padding and margin
  • the links should have width 100% or be display flex or even block. They must not have width or height. You do not need different classes for every link either. One class will do, they're all styled the same as each other.
  • mobile styles should be the default. But this challenge doesn't even need a media query
  • when you do need media queries in other challenges they should be defined in rem or em not px and should be set at the point where the layout needs to change. You will never need to set a media query at 375px.

  10

  Marked as helpful
• 

  P

  Daniel 🛸•44,780

  @danielmrz-dev

  Posted about 1 year ago

  Hello @Kyl67899!

  Your solution looks great!

  I have a suggestion (about semantic HTML) for improvement:

  📌 Second: Use <h1> to <h6> for the main title instead of <p>.

  The tag <p> is meant for paragraphs. For titles, we have the HTML headings (the tags <h1> to <h6>).

  Here's a quick guide on how to use them:

  Unlike what most people think, it's not just about the size and weight of the text.

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
  • Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

  All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  01