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

Mobile First Card Component using React

#react

@jchapar

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using React. Still a lot to learn to make this component fully functional. Will continue working on this as I continue to learn React. Any feedback would be greatly appreciated!

Community feedback

@caarlosdamian

Posted

Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

Happy coding! 🚀

Marked as helpful

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