Fylo Landing page practice using HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Patrice! 👋

  Could you explain your problem in great detail? You've used the mobile-first approach when writing the CSS which is a good thing. But, based on the CSS, I noticed that you keep adjusting the sizes for the font-size, margin, and padding.

  For the margin and padding, I highly recommend using rem unit instead of viewport units. By using the rem unit, the result is more predictable because it's not changing based on users' screen size.

  That's the only thing that I can tell to you until you explain the problem. Meanwhile, I have some feedback on this solution.

  • Alternative text for images should not contain any words that are 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.
  • The label element requires a text content to be useful. I recommend making it invisible visually but still accessible by screen readers. You can search on the internet about sr-only styling.
  • input with type="submit" was used before the button element exist. It's best to avoid using legacy elements. So, I recommend using button element instead.
  • Not all images need alternative text. They are known as decorative images. Decorative images are images that don't contain any information (the only purpose it to make the site beautiful). For those images, I recommend leaving the alt="" empty.
  • There are no :hover effects on all the interactive elements. I would strongly recommend adding some :hover styling to them.
  • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍

  I hope this helps! Happy coding! 😄

  Marked as helpful

  1

  ---

  

  Anna Lemonade🍋•290

  @pbitonga17Posted over 2 years ago

  @vanzasetia Thank you so much! :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pbitonga17 You're welcome! 🙌

  1