Equalizer landing page, flex.

Community feedback

• 

  Jannie Hansen•110

  @Jawha3

  Posted over 3 years ago

  Hey Nazemrap - great work getting it done despite the struggles.

  I've recently learned myself to definitely use the mobile-first approach as it makes everything so much easier and you will end up with less redundant work.

  In terms of using rem, vh, vw - I personally use rem a lot especially for elements that are crucial such as font-size, margins and paddings. I am still learning to use vh and vw properly but from what I understand a vw length is relative to the full width of the browser window and of course a vh would then be the full height of the browser window.

  So if you used vw for font-size you could use calc() so the font-size doesn't scale drastically and becomes super small and unreadable. I reccomend checking this out: https://css-tricks.com/fun-viewport-units/ to learn more about it.

  I hope that shines some light on your difficulties. :)

  11

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  Greetings, Nazemrap! 👋 Good effort on this challenge! 👍

  Regarding your questions.

  • I would recommend writing the styling with the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
  • Like @Jawha3 said to you, the rem unit is going to be the main unit in the stylesheet. There's also em unit which is relatives to the font-size of the parent element. All things that commonly use px can be converted into rem units. I only use vh unit for the card component challenges, usually to make the card in the center vertically while using flexbox.

  Some feedback.

  • I notice that there are some font-family properties in the stylesheet. I would recommend putting the same styling once for the same elements. It's going to prevent you from writing the same styling. Even better, since this site only uses one font family, you can put the font-family property on the body element. Most elements inherit the styling from the body element so you don't have to keep specifying the font family for each element.

  h1,
  h2 {
    font-family: 'IBM Plex Sans', sans-serif;
  }
  

  • header element should only contain the logo and the nav element.
  • The alternative text for the logo should be the name of the company which in this case, Equalizer. Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
  • Not all images need alternative text. In this case, all the illustrations and social media icons are decorative which means that you can leave the alt empty. By doing this, you prevent the screen reader users from listening to unrelated content. For the illustrations, you can make them as background images or pseudo-elements if you want.
  • Use interactive elements (a) for the download buttons.

  That's it! I hope this information is useful! 😁

  02

  Marked as helpful