Huddle Landing Page DESKTOP - with HTML&CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @renanjdev 👋, good job completing this challenge! 🎉

  I like this solution for the challenge. I am not an expert but I have some suggestions you might consider to improve your code:

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.

  • Not all images should have alt text. In my opinion, the Illustration-MockUp is for decoration only, it has no additional meaning to the component, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty: <img src="images/illustration-mockups.png" alt aria-hidden="true">

  • Some links, such as those used for social networks in the footer, do not have visible text, only icons. Therefore, it is advisable to add an "aria-label" attribute to describe what that button does. This is done so that screen readers can understand the purpose of the link. You can read more about this here.:

  <a class="wrapperSocial -ico" aria-label="Facebook" href="#"><img src="./images/ico_facebook.png" alt=""></a>
  

  • The background properties would be better used directly on the body element. Currently, if you use the inspect element option in your browser and set a 4K screen size, your solution does not cover the whole screen.

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  0

  ---

  

  Renan Januário•30

  @renanjdevPosted almost 2 years ago

  @MelvinAguilar Hello !! thank you very much for the feedback! about the Font-size units I understood and already refactored.

  about the aria-label, I still haven't learned it in the course, but I understood and added it as you said.

  About the background, I have a real difficulty, because I used the body to align my entire page in the center, if I used the body as the main background, how would I align the entire page?

  Note: I still don't know responsiveness.

  Thank you for your attention, I'm still here in the studies!

  0