Responsive Huddle Landing Page using HTML5, CSS3

Community feedback

• 

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  Hi Abdul, here are a few helpful suggestions I can give you, hopefully.

  • Use position: absolute when you want to take a content out of the normal flow. You're not using it correctly. I think you couldn't get the background image to cover the header so you resorted to this. Containing the hero as part of the header and adding the background image to the header instead of the hero should solve this for you.
  • The logo at the footer should be a link.
  • If you're providing an alt text to images, they should be descriptive so that visually impaired users can understand what the image is about.
  • For a/link elements that don't have text within them, you should add an aria-label attribute or an sr-only text, again for visually impaired users.

  0

  ---

  

  Abdul Basit•70

  @Zer0-07Posted about 2 years ago

  @Yemisrach15 I did that for semantics there wasn’t any other choice except positioning it absolute😅

  0

  

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  @Zer0-07 There is actually, as I said, put the content that has the same background in the same container. It's really simple.

  0

  

  Abdul Basit•70

  @Zer0-07Posted about 2 years ago

  @Yemisrach15 I know but it will not be semantically correct

  0

  

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  @Zer0-07 Why do you think that?

  1

  

  Abdul Basit•70

  @Zer0-07Posted about 2 years ago

  @Yemisrach15 maybe because i don’t think hero section should be part of header? it should only contain navigation?

  0

  

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  @Zer0-07 You might be right. It all comes down to preference I think. I checked out three websites and some contain the hero inside the header while other inside the main element. In this case though, I would give writing a maintainable css main priority and put the hero in the header.

  1