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

InduRajput 120

@InduRajput

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


Please do review and give suggestions to improve my code. I am new to coding. Thanks in advance :)

Community feedback

P
Dave 5,245

@dwhenson

Posted

Nice work! This is good going for your first challenge. Lovely use of grid rather than media queries and your solution responds well. Some thoughts/suggestions:

  1. You could add some :hover styles to the button so that it's clear that it's reactive (and curser: pointer is a nice touch too.
  2. Instead of setting the same padding on all your divs and the parent container you could try creating a container "utility class" with the padding you want and then add that class to the elements you want the padding on. This saves repetition and makes it easier to adjust padding later on if you want to.
  3. Lastly, I'd consider using an unordered list and list items in the final div (rather than the span and br approach you opted for). This is just a bit more semantic and helpful for screenreaders (list-style and padding set to none will help).
1

InduRajput 120

@InduRajput

Posted

@dwhenson, thank you so much for your feedback :) I will try to work on it .

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