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

Responsive price component using CSS Grid & Flexbox

P
Matias 50

@matiaslagoevia

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


Happy to learn more from yet another fun challenge! Thanks to everyone in the community for creating the platform & engaging ways to continue to learn :)

What I found difficult

  1. I'd skipped some of the roadmap projects due to excitement and wanting to get to "bigger" things faster, and was reminded why that is not a good idea! When I came back to this project, the amount of learning was still there, but in a reasonable leap rather than too much too fast. Patience is important too!
  2. Learning about CSS Grid was interesting, and the equal column sizing and grid-template-areas were new concepts to wrap my head around that took a while for me to get, but happy I did it
  3. Initially, I thought getting the sign up button to have the horizontal padding to match available width without stretching it would be difficult, but then I arrived at making it's parent a flex container to get there on time

Areas of code I'm unsure of Nothing specific, open to any feedback! I'm already getting more and more convinced behind getting used to BEM, but I think that for this challenges' complexity how I structured HTML and CSS is okay?

Best practices questions

  1. Could I have used any semantic elements over div for .description, .sign-up and .why-us? I thought about it but I wasn't sure, and I followed Kevin's advice of "for semantic elements, as you're learning more about them, if you're not sure it's better not to put them than to put the wrong one". I'd love to learn from a more experienced dev what they would've went with here.
  2. Using the accessibility panel in the web console for Firefox, I see some warnings for contrast in text colors/etc. I followed the Figma spec as close as possible, but I'm unsure if this is somewhere I went wrong or a place where the spec could be more accessible. I would be happy to help in any case to arrive at better accessibility, whether the room for improvement is just on my solution or on the challenge as well.

Thanks again, and look forward to chatting in the comments and in future solutions!

Community feedback

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