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 in CSS and HTML

Zack• 70

@Mastza28

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


This was my first time creating a grid with CSS. I probably could've set the grid up better than I did. I also put a class on almost everything, I'm not sue if this was done correctly. To me It seems like I could've combined some stuff together or even wrote inline so I don't have so many lines in CSS. Let me know what I could do different that would be more efficient or correct. Thank you!

Community feedback

P
Kent O'Sullivan• 1,870

@12Kentos

Posted

Hey @Mastza28,

Nice job on completing this challenge! It looks great. :)

While it's definitely more cumbersome to give everything a class name, I think in general it's better than using a direct selector like

P{ font-size: 1.6rem; }

I noticed you did this a couple of times in your css, and I would suggest you avoid doing that for the most part, as that will effect every single element on the page, and this Will cause headaches for you on larger projects.

Also, you mentioned thinking about doing some in-line styles. I would try to avoid using in-line styles as much as you possibly can. Honestly there should hardly ever be a situation where you should/need to use in-line style. It is really, really bad practice, and makes code infinitely harder to maintain and understand.

Here is a good video by Kevin Powell on specificity and best practices.

Kevin Powell Specificity

Hope that helps, let me know if you have any other questions!

Marked as helpful

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