Single price grid component - HTML and CSS

Community feedback

• 

  xyzeez•670

  @xyzeez

  Posted over 2 years ago

  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 :)!

  00

  Marked as helpful
• Account deletedPosted over 2 years ago

  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!🎄🎁

  01

  Marked as helpful