Skip to content
Submitted about 2 years ago

Mobile First Card Component using React

react
Jose Chaparro•455
@jchapar
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Carlos Damian Perez•1,930
    @caarlosdamian

    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

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