Onboarding Pricing Component - Pure HTML & CSS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted almost 3 years ago

  All of the above feedback is GOLD! Definitely make those changes before moving on to any other challenges

  I'll only add

  • definitely sign up should be an anchor tag not a button
  • You need some padding on the body so content never hits the sides
  • I think the media query is switching a little late. There is definitely room for the desktop layout earlier than that as I enlarge the screen.
  • A hover effect that raises a button UP looks strange. It's not a natural movement to happen.

  Good job

  Marked as helpful

  2
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Najib!

  🎉 Congratulations on finishing your first challenge on Frontend Mentor! I hope that you learned something new while doing the challenge 😁.

  I would recommend doing the newbie challenges with HTML and pure CSS so that you have 💪 strong fundamentals on both.

  Regarding your question, I don't know if it is a good or bad practice, but it works well, so for me, there's nothing wrong with that.

  Some feedback:

  • Accessibility
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
    • Always use heading tags in chronological order. Also, the text below Join our community should not be a heading. It is more likely an emphasize, so you can strong instead.

  <p>
    <strong>
      30-day, hassle-free money back guarantee
    </strong>
  </p>
  

  • Tip: The heading tag is similar to the title on a document file.
  • Always wrap text content with meaningful tag (p). Only use span and div for strictly styling purposes only.

  <div class="pricing">
    <span class="pricing__value">$29</span>
    <span class="pricing__interval">per month</span>
  </div>
  

  • Also use $ dollar sign instead of $. UTF-8 supports special characters (including dollar sign) and even emojis. It's also good for SEO (Search Engine Optimization).
  • Best Practice (Recommended)
    • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it really well 👍.
    • If you are using a button element, always tell the browser the type of the button to prevent the browser from submitting any information. In this case, it should be a type="button".
    • In addition to the above feedback, why are you using a button element for the Sign Up button?
  • Styling
    • Add some padding-top and padding-bottom on the body element to prevent the card from touching the top and the bottom of the page.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  2
• 

  Najib Zuraiqat•60

  @nabzayPosted almost 3 years ago

  For the line heights, I decided to divide the ones given in the sketch file by the font size for that element. That's what I understood from the MDN docs :S

  Unfortunately they don't seem to be pixel perfect! Can anyone let me know what the best approach is to doing this?

  Thanks guys!

  0
• 

  Najib Zuraiqat•60

  @nabzayPosted almost 3 years ago

  Hey Guys!!

  I can't believe I missed the best feedback in the world yesterday lol (Sorry Vanza!!).

  You guys are amazing. I updated my project and hopefully everything should be all good now :)

  Please let me know if I missed anything!

  Changes:

  • Button no longer hovers and just has a simple box-shadow effect.
  • Button is switched out with an <a> tag
  • Adjusted media queries
  • Padding on body
  • Unitless line height!
  • <span> is replaced with <p> in pricing! Didn't end up using strong as the font weight did the trick I think :)

  Thank you Vanza & Grace!! Najib

  0