Landing page with single section (HTML, CSS)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout looks great in desktop, it is responsive and the mobile layout looks great as well.

  Some suggestions would be:

  • You don't really need to use display: flex on the body tag in here with the flex-direction: column since the general layout is already a one-straight-column.
  • The website-logo should have used alt="huddle" lose the word "logo", when using alt avoid adding words that relates to "graphic" such as "logo, image, icon.." it is already an image so no need to describe it as one.
  • The alt for the hero-sections image should be left empty alt="" and add aria-hidden="true" as an extra attribute on the img. When an image acts only as decoration, like this since it is just a vector image, you use the mentioned method, but if the image adds content, then use a meaningful alt value.
  • register would be better to use a tag since it is more likely to be a "link" to a register page.
  • Those social media links should be inside their own a tag because those are links right.

  ASSUMING a TAG IS USED

  • Since those are "list" of links, you may want to wrap the anchor tags inside a ul element.
  • Each a tag that wraps the social-media-icon should have either aria-label attribute or an sr-only element inside the a tag, the value for the mentioned method is the name of the social-media. For example, the a tag that wraps the facebook will look like:

    <a href="facebook.com" aria-label="facebook">
      <i class="fab fa-facebook-f"></i>
    </a>
  

  This way, users will know where this link would take them. But using the sr-only method is more preferable. You can look up sr-only usage on the net.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Anna•140

  @AnnaUlianovaPosted about 3 years ago

  @pikamart Thanks a lot for your priceless help, i've tried to inclue all the suggestion you made. Could you, please, help me with one more issue: How can i get rid of the scrolling element using the desktop version? For example, if i choose overflow: hidden, it also removes scroll in other versions (such as mobile) where it should be. Thanks again, really apperciate your help!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @AnnaUlianova Hmm, I can't actually help you with that since if you use overflow: hidden maybe like on the body tag, then the whole layout becomes unusable because you can't scroll on it.

  Only layout which the total height is the same as the screen's height are only layouts which scrollbars won't appear since the content is not really large at all. But for this kind of cases, you don't really want that :>

  1