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

Single Price Grid Component Master

Art 420

@Art-wdt

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


Hey! This is my third work. I would be glad to any advice:)

Feedback definitely appreciated!

Community feedback

P
Dave 5,245

@dwhenson

Posted

Hi @Art-wdt nice job on this one - the page looks good and you've some nice responsiveness working there. Some suggestions:

  1. You don't need to wrap everything in a <div>. You could try removing some of the div wrappers around your heading tags. If you want to keep the class names just add them onto these elements directly. They are all block level elements so should work the same way.

  2. Similarly when you just have some text use a <p> rather than a div. Again these are also block level elements so will work the same way. This will make your code simpler, easier to read, and more semantic. The use of the <ul> in your code is a good example of this. The best element for the job. It's just a good habit to get into.

Lastly if you really wanted to explore flexbox some more you could try doing the layout with one flexbox rather than two... You would need to add different flex-basis to the top element and the following two, but you might have fund trying....

Nice work. Keep up the good coding!

2

Art 420

@Art-wdt

Posted

Hi @dwhenson Thanks for your detailed advice. This is important to me.

I will gladly study the theoretical part. To be able to put your advice into practice.

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