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

#accessibility
imadβ€’ 3,310

@imadbg01

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


As always, I welcome any comments and suggestions you may have.

Community feedback

@elidrissidev

Posted

Hey Imad πŸ‘‹

Hope you're doing well. You did a great job on your solution! I usually see some common mistakes in most solutions, but not this one!

Here are my notes:

  • type="submit" is meant to be used with buttons inside a <form>, in this case there is no form so I'd suggest you set it to type="button".

  • The "Why Us" section is meant to be a list of features of this fictional website, therefore I think a <ul> will be more semantically correct instead of a <p>.

  • Some page elements are styled with their class names whereas others are styled by their tag name, this makes the CSS difficult to read as you'll need the HTML as a reference. Consider leaning more towards classes to style your elements, as they are re-usable and they make your code easier to understand.

  • The ch unit has some specific use cases, but generally I'd stay away from if not needed and just use other units like rems or ems.

Hope this helps you, if you have some questions feel free to reply. Good luck!

Marked as helpful

1

imadβ€’ 3,310

@imadbg01

Posted

Hey Mohamed πŸ‘‹, Thanks for the feedback it's really hope, I update the solution. I have struggles finding names for classes, so I end up mixing things for practice and learning reason.

0

@elidrissidev

Posted

@imadbg01 You're welcome! Indeed, coming up with class names can be difficult at times, but remember, practice makes perfect ;)

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