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 using HTML, SASS, JS and BEM.

#sass/scss#bem

@stebanc

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


I'm trying to write clean HTML and CSS code, so any feedback will be appreciated.

Community feedback

@pikapikamart

Posted

Hey, really nice work on this one. The desktop layout looks really great I think and the site is responsive which is really nice. The mobile state looks great as well.

Here are some suggestions on the site:

  • body tag has a font-size: 400 which is an invalid value, check that one out.
  • Removing the position: absolute from the footer would be really nice so that it won't get in the screen's way. If you try to inspect the site from dev tools at the bottom, the footer is stuck in front of the main-content.
  • Remember that for every page of a site, a single h1 is needed. For this one, you could replace the first h2 to an h1 so that it would be present in the dom. Just remember to change the second text below it to a higher heading tag level or just use p tag on it.

Those only since the site looks really nice to be honest. Again, awesome work on this one.

Marked as helpful

0

@stebanc

Posted

@pikapikamart Thank you for your comment and suggestions! This helps me write better code.

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