Skip to content
Submitted almost 2 years ago

front-end mentor news homepage exercise

andy•170
@monstermaash
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

great challenge to do as a beginner! did have some trouble with the collapsible sidebar hamburger menu for the mobile version which required some javascript. any help is appreciated!

PS: I also noticed that i should have used css grid instead of bootstrap columns in order to have a more accurate version of the layout.

Community feedback

  • Yehan Nilanga•670
    @Yehan20Posted almost 2 years ago

    Hey Congratulations on Completing the challenge. The Solution Looks neat. you can focus on the accessibility issues on the issues to make your improve your solution. For the mobile menu you just need to create a button and set the display: none in large screen and then make it visible in small screens using display: block. and you need to make the mobile menu get full height of the view port . I used fixed position for this and. I assume if you are using flex box. you could make the nav links to column using flex direction Coolum. and in order to make the nav bar full height just set the top , left , bottom values to 0 and. set the width to x% depend on the layout. after that create a class that would make Tthe nav bar hide , you can use transform:translateY(100%) to archive this then. from your JS you need to make an event that would toggle the classes of the nav bar when you click so your functionality. works. I hope this helped .

    Marked as helpful
    0
    andy•170
    @monstermaashPosted almost 2 years ago

    @Yehan20 this is super helpful, will try this out!

    1
    Yehan Nilanga•670
    @Yehan20Posted almost 2 years ago

    @monstermaash best of luck

    0
  • Adriano•38,230
    @AdrianoEscarabotePosted almost 2 years ago

    Hello andy, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

    to solve this problem do this:

    <a href="/" class="button">READ MORE</a>

    We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    The remainder is excellent.

    I hope it's useful. 👍

    Marked as helpful
    0
    andy•170
    @monstermaashPosted almost 2 years ago

    @AdrianoEscarabote that button advice is a great one, you're absolutely right! i'll definitely keep that in mind next time!

    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