Responsive Flyo-landing-page using Grid and flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Busoalmi! 👋

  Good effort on this challenge! 👍

  Here are some suggestions for improvements.

  • The alternative text for the logo should be the company name. Also, since it is wrapped by an anchor tag, the alternative text should indicate that it is a link. So, a good example is "Fylo - Home".
  • Avoid using br elements for presentational purposes. Let lines wrap where they need to. Read what MDN documentation says about it.
  • The "Get Started" button should be a submit button (not an anchor tag).
  • For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
  • The phone number and the email should be links. Use mailto for email and tel for the telephone number.
  • Wrap each social media icon with an anchor tag. They are the social media links of the company.
  • The logo in the footer should have alternative text. It is an important image for the site.
  • Use body element as the main element to style the website. html element can overwrite the user's browser's setting.
  • Code your font size in rem, not pixels. This means the text size will be responsive if people want to adjust the size.
  • I highly recommend writing the styling using 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.

  That's it! I hope you find this useful!

  Marked as helpful

  0