Skip to content
Submitted almost 4 years ago

Single price grid component using flexbox

Jen•1,230
@En-Jen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my first solo project just testing out my skills with HTML and CSS (using flexbox). Any feedback about class naming, using margins vs padding or media queries would be helpful as I am still learning about the conventions for all of these things. I'm also not sure if it's ok to just use the <a> tag for the call-to-action button vs. the <button> tag. Thanks!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, Jen! 👋

    Good job! Your solution looks great and responds nicely! 👍

    Happy coding! 😁

    1
    Jen•1,230
    @En-JenPosted almost 4 years ago

    @ApplePieGiraffe thanks!

    0
  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hey, nice work there, clean code, well structured with semantic html tags. What do you mean by tag for the call-to-action button? A few options to fix:

    • add hover effect on a button (change of bg, color, box-shadow with transiton);
    • try to use relative units for margin, padding (em ,rem);
    • when project is bigger, it's usefull and more managable to use css custom properties for reusable values (study them if you done).

    Keep more practicing😉 Roman

    1
    Jen•1,230
    @En-JenPosted over 4 years ago

    @rfilenko thanks so much for the feedback! I'll try to apply your advice in making some tweaks to this project and in my future projects :)

    0

Please log in to post a comment

Log in with GitHub

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