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

Responsive news-homepage

Dagim Tizazuā€¢ 240

@DagimTizazu

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


šŸŽ’ Features: ā–Ŗļø Responsive (mobile-first) ā–Ŗļø Resemblance with the original design ā–Ŗļø Organized folder structure and code base well maintained with prettier

ā›ļø Build with: ā–Ŗļø React JS ā–Ŗļø Sass ā–Ŗļø Vite

Any feedback is appreciated šŸ™šŸ¾

Community feedback

@0xabdulkhaliq

Posted

Hello there šŸ‘‹. Congratulations on successfully completing the challenge! šŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

HTML šŸ·ļø:

  • The <main> element behaves like a main landmark role. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document.
  • Here you just declared role="main" for main element which is already a semantic element by default. Adding explicit role on a semantic element is just like a bloatware for no reason, We can follow up the efficient way which is simply the main element.
  • So you can refactor the <main role="main"> to <main>

.

I hope you find this helpful šŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

Dagim Tizazuā€¢ 240

@DagimTizazu

Posted

Thanks @0xAbdulKhalid , I just fixed it by adding the role attribute to the hero area container div. I think it makes more sense in this case I guess

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