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

Implemeted using flex-box (last commit) and inline-block (prev commit)

@younasBnHasainar

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did took this challenge for my learning purpose. I could practice layout specifications of css. Firstly I tried to implement using inline block. And then I re-implemented using flexbox when I learnt it. Feedbacks are welcome. :) I will help me to improve

Community feedback

@RaffayElahi

Posted

Hey @younasBnHasainar! I saw your code, it was great but some practices will greatly help you in your long-term web development journey. Those practices are:-

  • I saw that your HTML wasn't structured as you were using randomly h2 and h4 tags, try using heading tags according to the importance of heading and heading number. This practice will make your SEO friendly also use section tags for covering your whole main content instead of div. These look like small negligible mistakes but these make difference in readibility and access to your code.
  • Second, you could make the whole body a flex container in order to center out the main div instead of using out margins.
  • Try using ul and li for listing out things instead of listing out things in p tags. Also try to use flex containers as much as possible to make your content aligning out either in row or column or wither centering it or giving out space evenly. Flexbox is really helpful.

Hope these suggestion were helpful. Happing coding and regards.

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