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

GO4ITJB 30

@GO4ITJB

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


Any pointers on the structure of the code and best practises??

Cheers :)

Community feedback

@simeon4real

Posted

First things first, Congratulations on your solutions 🔥 I'm yet to submit a solution to this challenge btw. Here are a few pointers, You can use BEM methodology for making your HTML more semantic. That way, instead of using generic class names like txt-box1 you can use intro, subscription or even card

Also, Instead of using generic divs everywhere, you can use semantic tags like section, nav, article etc

Finally, I would suggest that you give class names to some of your tags like h1. So you don't repeat yourself by using same declarations for many tags. For instance

.text-box-1 h1 { 
Styles here
} 

// and later doing this : 
.text-box-3 h1{
styles here
} 

You can do it better, like this:

.heading__primary { 
styles
} 

Now you can use that single class for both text-box1, text-box-2 etc. Hope that helped.

Don't forget to upvote my feedback. Will be appreciated :)

3

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