Single Price Grid Component (CSS Grid + Flexbox)

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • There are only three headings ⚠️ in this component; “Join our community”, “Monthly Subscription”, and “Why us”. Everything else would be wrapped in a paragraph element.

  • The headings are being used incorrectly ❌. You can only use the <h1> heading once per page ⚠️. So For this component, you will only use the <h1> for “Join our community” and <h2> for “Monthly Subscription” and “Why us.”

  • 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

  • ALWAYS Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

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

  Happy Coding! 👾

  Marked as helpful

  0

  ---

  

  P

  Adham El Samahy•250

  @AdhamElSamahy909Posted almost 2 years ago

  @vcarames I have a concern about your comment on the "Mobile First" approach. I think that the content appears in a good way on all mobile devices so, I would like you to demonstrate how website is faulty when it comes to small screens.

  0

  

  P

  Adham El Samahy•250

  @AdhamElSamahy909Posted almost 2 years ago

  @vcarames Beside, I find your other advices very helpful. Thans a lot for your consideration.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @AdhamElSamahy909

  That feedback is regarding the fact you built your content desktop first, which employers do not like and do anymore. Websites are now built mobile first using min-width.

  0

  

  P

  Adham El Samahy•250

  @AdhamElSamahy909Posted almost 2 years ago

  @vcarames So, you mean that "min-width" should be used in media queries to specify the styles at larger screens when the "Mobile-First" approach is implemented??

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @AdhamElSamahy909

  Correct ✅

  Marked as helpful

  0