equalizer-landing-page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Josh! 👋

  Congratulations on finishing this challenge! 🎉

  Yeah, this challenge is hard for me too. I did even do a git revert because of the messy CSS code that I wrote on my first attempt. 😅 Fortunately, I was able to finish the challenge.

  First, you need to improve the HTML.

  • The header should only contain the logo. The h1 and the paragraph should live inside the main element.
  • 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.
  • I strongly recommend using pseudo-elements for the phone illustration and bg-pattern. This way, you can remove all the empty div. As a result the HTML can be more simple and cleaner.
  • There should not be text in span and div alone whenever possible; instead wrap the text with a meaningful element like paragraph element. In this case, $4/month should be wrapped by one p element and then you can wrap each text with span for styling purposes.
  • The download buttons should be link elements with download attribute, not a button element. Regardless, if you ever want to use the button element, always specify the type of the button. It's going to prevent the button from behaving unexpectedly
  • Those Android and iOS icons are decorative so I suggest leaving the alt empty.
  • For the email address, I recommend wrapping it with an anchor tag instead of strong tag. You can use mailto:[email protected] as the value of the href attribute.
  • Social media icons should be wrapped by anchor tags. They are the social media links for the company (if this is a real website).

  Then, you can improve the CSS.

  • 16px is the default font size so you don't need to specify it.
  • I recommend simplifying the media queries. I recommend only using the min-width media query (only one condition) because I had done this challenge only using min-width media query (mobile-first approach) and I think the media queries don't need to be this complex.
  • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍
  • I recommend adding max-width to the container (and making it horizontally center) to prevent the layout looks broken on wide screen.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  0
• 

  Josh•100

  @j-likes-spicyPosted over 2 years ago

  Thanks Vanza! These are all really great tips! I didn’t even think to use pseudo-elements 🤦‍♂️ lol. I plan to clean this up a bit over the weekend.

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @j-likes-spicy No problem! 👍

  P.S. Next time, I recommend replying to the comment by clicking the REPLY word (at the top right corner). This way, I will get a notification. I know this one by clicking the activity tab and seeing this reply. So, lucky for you. 😁

  0

  

  Josh•100

  @j-likes-spicyPosted over 2 years ago

  @vanzasetia Sounds good! I replied for the first time using my mobile device and the site had to re-authenticate me lol. Good to know, thanks again :D!

  0