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

News homepage

@kaoutar-ouadih

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


What are you most proud of, and what would you do differently next time?

I'm proud of completing this challenge!

What challenges did you encounter, and how did you overcome them?

.

What specific areas of your project would you like help with?

Anything that can help me improve.

Community feedback

P

@srijanss

Posted

  • header landmark is used properly with nav and links within it, however the nav content is duplicated for desktop and mobile view. You can use CSS to make one nav content work for both mobile and desktop
  • main element is used for the content, however the headings are not used properly. heading order goes from h2 to h4
  • rather than using div for the content , you can look for section or article landmark element. These elements are accessibility friendly and gives purpose for the wrapped content
  • layout looks good on all the screen sizes
  • code is well-structured, readable and reusable
  • solution differs a bit from the design, like the menu drawer in mobile devices is not full height, on large desktop screen content spans full width. With minor changes you can make your solution match the design
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