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

Kevin Douglasβ€’ 220

@qu3bin

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

xyzeezβ€’ 550

@xyzeez

Posted

Hello @qu3bin, Amazing lines !

Here are few things I would suggest:

  • Because of semantics, make the <h3> tag that contains the "30-days ..." a <h2> tag. You can read more on HTML Semantics Here

  • I can see that you've only used font-weight: 400; in your code. From the style guide, header tags are to have the weight 700. Consider using that in your code.

Happy coding :)!

Marked as helpful

0

@VCarames

Posted

Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

  • For improved accessibility πŸ“ˆ for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.
  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

  • The β€œ30-day, hassle-free money back guarantee” is not a heading. It should instead be wrapped in a paragraph element.
  • The button was created with the incorrect element. When users click on the button they should directed to a different part of your site; the anchor element will allow this to happen.

More Info:πŸ“š

MDN The Anchor element

  • The β€œWhy Us” list needs to be created using an unordered list element along with the list item element.

MDN Unordered List Element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!πŸŽ„πŸŽ

Marked as helpful

0

Kevin Douglasβ€’ 220

@qu3bin

Posted

@vcarames thank you very much, I will consider all of that :)

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