Html css and bootstrap solution of huddle landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, good work on this another challenge. The layout in desktop seems fine as well as the mobile state. Responsiveness is fine as well.

  Some suggestions would be:

  • header image could have used alt="huddle as its value and not alt="logo". Also, avoid adding words to the alt attribute, that relates to the word "graphic".
  • Adding min-height: 100vh to the body tag, so that when you resize the browser's screen, the background-image will still occupy the whole height of the screen, if you try to resize the screen's width, you will see that the image does not fill up the height.
  • The main img could have used only alt="" empty, because the image is just a vector illustration and does not really add content.
  • Removing the position: absolute on the .icons selector will be really good. Right now, if you inspect the layout in dev tools at the bottom, you will see that the .icon element is overlapping the text in the main tag. Removing the position will be good.
  • The social media link should have an aria-label. It would be like <a aria-label="facebook">{ the i tag i inside here}</a>. This will be really helpful for screen reader users, because they will be guided to where this link would take them, hence, facebook. Add those aria-label to the three different social media link.
  • You don't need to add aria-hidden in the i tag, I think? I don't know if aria-hidden is used in elements other than svg or img. Hmm

  Aside from those, great job. Your html structuring as well is good and that is great.

  Marked as helpful

  0