Four card feature section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • The main element should only ⚠️ be wrapping the card section since that is the main content of your page.

  • The intro heading and paragraph ⚠️ should be wrapped inside a header element.

  • The article element is not the best choice ❌ for wrapping these cards. In order to use the article element the component needs to be able to make sense on its own and be independently distributable (can be used in on another site).

  More Info:📚

  MDN Article Element

  • Along with the blank alt tag, you also want to include the aria-hidden=“true” ⚠️ to your “icons” to fully remove them from assistive technology.

  More Info:📚

  [MDN Aria-Hidden] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description)

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

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  • Using CSS Grid with Grid-Template-Areas will make things way easier 💯 when building the layout; it will give you full control of the layout.

  Here is an example of how it works: EXAMPLE

  • 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

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

  Marked as helpful

  1

  

  Ahmed Hany•220

  @ahmedhanyhPosted almost 2 years ago

  @vcarames Thanks a lot! Your feedback is immensely appreciated! I applied your advice. I've used <div>s instead of <articles>, do you think <div>s are a better choice?

  The solution provided as an example is super awesome, really great work!

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @ahmedhanyh

  Glad I could help! 😁

  For this challenge, that would be the best option.

  Thank you!

  1