Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using Flex

@JosephAbuchi

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Dipesh 430

@Dipesh-sapkota1

Posted

Congratulation @JosephAbuchi for completing challenge👏🎊

I would like to give few suggestions to improve your code

  1. Learn to structure your page semantically, in your case you used <footer> to encapsulate your main content of your page. Use <main> element instead
  2. Use at least one <h1> heading on your page.
  3. Use rem units for font-size, rem unit is directly related to the font-size of the root element and changing font-size in the browser setting will directly affect the font-size of your webpage.
  4. Use grid for two dimension layout, it will help you precisely align elements.
  5. Don't define height for your elements unless necessary, let height of the elements be auto.
  6. Don't use position property for making layout, the response of page render will differ according to device. Instead stick to grid or flex-box for layout.
  7. Make a good use of inheritance by defining global CSS properties and proper reset.
  8. Use CSS variables to pre-define your properties, this will make your code clean.
  9. Follow mobile first approach, to make user friendly design.

You did great, keep coding and happy coding 🙂

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord