Responsive landing page using CSS Grid

Greetings, Chris! 👋

Congratulations on finishing this challenge! 🎉

I have some feedback on this solution:

• Accessibility
  • Well done on using landmarks! 👍
  • Don't use article for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content. In this case, div would be fine.
  • <div id="sub-2">$29 <span id="sub-3">per month</span></div> Always wrap text content with meaningful element like p element in this case. Only use div and span for styling purposes.
  • Also, I would recommend using the $ (dollar sign) instead of using character entity reference. The UTF-8 character set supports all symbols and even emojis.
  • The Sign-up button should be either a link or button element, depending on what do you think is going to happen after the user clicks it. It's definitely not a submit input.
  • For your information, input with type="submit" is a browser legacy. Use button with type="submit instead.
  • Don't use br elements for presentational purposes. Read what MDN documentation says about it.
  • For the why us section, I would recommend making it as a ul and wrapping each item with li.
• Best Practice (Recommended)
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

That's it! Hopefully, this is helpful! 😁

Good. But <article> should have <h1-6> tag. If it doesn't just use <div>

You're using article:first-child but why, just use <article class="community">

.grid-container has <width: 36%>, but you can just set value like 30em and if you worry you can set max-width:80%