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

@vicru5

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


Let me know what you think

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Victor,

Well done :D

A few tips from me below:

  • instead of this div class="container" use just the main tag;
  • creating clickable element by div it is not a good practice (accessibility) => use the tags dedicated to it like a link or button but in this project I'd suggest to use a link, why? check this article from the blog CSS-tricks: A Complete Guide to Links and Buttons;
  • names of classes are not readable and descriptive I'd recommend using BEM naming convention;
  • text "per month" is not in the middle of the price;
  • check your project by the inspector in your browser on different devices => it doesn't look well, margin, button, layout etc.
  • the same problem with the width and height (check my comment in four cards feature section challenge).
  • try to start building your project from the mobile first.

Ps. Please, don't forget to upvote any comments on here that you find helpful.

Greetings :D

1

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