Skip to content
Submitted about 2 years ago

Responsive News-homepage

AMINA MADAT•230
@aminaNBA
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

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

  • Preet bhardwaj•60
    @LitPreetPosted about 2 years ago

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

    Marked as helpful
    1
  • Antonio Aurello•230
    @antonADevPosted about 2 years ago

    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

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