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

#jss#sass/scss

@aminaNBA

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


I used HTML 5 / SCSS / JS in toggle button the website is responsive any insight on this, it would be great.

Community feedback

@LitPreet

Posted

Hey , Amina I think due to some issue your logo image is not showing. check it out.

Marked as helpful

1

@antonADev

Posted

Hi Amina... First of all congratulations for finishing the challenge 🎉. The overall work is not bad on desktop size, but there are some issues and the mobile-layout isn't working at all, so I will try to give you some advices:

  • It's best practice to use HTML5 semantic elements for accessibility reasons. Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them. Like those below
<body> 
     <header>HEADER CONTENT</header> 
     <main>MAIN BODY CONTENT</main> 
     <footer>FOOTER CONTENT</footer> 
</body> 

So I would suggest to refactor your code and use the semantic tags. You could also use divs giving them a role attribute, that is perfectly fine. But a semantic element like your <nav> doesn't need a role attribute, but if you use a div as a landmark purpose, then you have to use the role attribute.

  • As for the design, even if on desktop it doesn't look bad, the mobile-layout is missing completely. I've took a look at your code and you've used media queries, and thats amazing. Go inspect your site and with the existing media queries, just making some changes, you will achieve it.

  • Check for your font styling, because you're using only the regular variant.

  • The navbar logo isn't showing, check your src attribute.

Overall it's an amazing try, this challange is not easy at all and you have to be proud of your achievement.

Hope my answer will help you to improve your skills and keep coding 😊

1

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