Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsinve Grid Layout - BEM Mobile First

chucksterv 180

@chucksterv

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

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

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

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

More Info:📚

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

Happy Coding!🎄🎁

Marked as helpful

1

chucksterv 180

@chucksterv

Posted

@vcarames Hey mate, thanks a bunch for the feedback. Both definitely valid points and I'll be altering my code and considering the elements I'm using as well as accessibility moving forward.

Thanks for taking the time to leave feedback!

1

@MelvinAguilar

Posted

Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

HTML:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.
  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">3-column preview card component</h1>

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding! 🎄

Marked as helpful

1

chucksterv 180

@chucksterv

Posted

@MelvinAguilar Hey mate, thanks a bunch for the feedback. Don't believe I used a <div> tag to wrap the section but I see what you mean about using a <main> tag. Thank you for letting me know about the heading. Will keep that in mind moving forward!

Thanks for taking the time to leave feedback!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord