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

HTML and CSS with Flexbox

Samuel 35

@samprorender

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 still have not mastered it much. So I really appreciate your comments.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Sam,

Well done :D

I have checked mainly your HTML structure, a few tips from me:

  • instead of div container you can use the main tag;
  • I think the header doesn't need to be here. I'd recommend using the section tag and inside three divs (here divs are perfect for generic groupings of content);
  • you did great with h1 tag but also there is another way to use it: h1 and inside of it two spans (main-heading: Join our community and sub-heading: 30-day, hassle-free money back guarantee);
  • instead of <h3>$29 <span>per month</span></h3> I'd recommend to use the p and inside of it two spans for the price and per month;
  • instead of h4 put the p tag;
  • remember: move headings down the levels gradually;
  • well done with the link, but also you can add additional attribute title,
  • in the last box instead of p will be better to use ul > li;
  • text per month should be in the middle of the price;
  • something wrong with this effect on :hover (check it out).

In the end, I'd recommend reading about semantic tags and headings => it is very easy to overuse them.

Greetings :D

2

Samuel 35

@samprorender

Posted

@SzymonRojek Thank you very much for your reply and your time. I will keep it in mind. Sometimes I don't know which tag is the most appropriate. But I guess with a lot of practice I will get better. Regards.

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@samprorender

Thanks 🙏 yes it is not easy to choose a tag but it is very easy to overuse them.

Have a nice time :)

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