News Homepage - HTML, CSS and JS

Community feedback

• 

  Kulyk-Volodymyr•660

  @Kulyk-VolodymyrPosted 10 months ago

  Nice solution, congrats!

  I have two independent ideas to make this page a little different)

  1. For header, main and .third-section apply max-width: 1150px; margin:auto.

  2. Add justify-content: space-between to .third-section and change item's styling.

  In terms of semantics, .third-section must be inside main. Also, you don't need to use article to make a burger menu. You can reuse ul of header.

  0

  ---

  

  Udaya Gupta•180

  @udayaguptaPosted 10 months ago

  @Kulyk-Volodymyr I will surely make the required changes but about the burger menu I have used aside not article tag. Here's the code for it

    <aside class="side-bar-section hidden">
      <nav>
        <div class="menu-close-div">
          <button class="menu-close" onclick="closeSideBar()">
            <img src="assets/images/icon-menu-close.svg" alt="">
          </button>
        </div>
        <ul class="side-bar clr-dark-grayish-blue ">
          <li class="item transition hover-clr-soft-red">Home</li>
          <li class="item transition hover-clr-soft-red">New</li>
          <li class="item transition hover-clr-soft-red">Popular</li>
          <li class="item transition hover-clr-soft-red">Trending</li>
          <li class="item transition hover-clr-soft-red">Categories</li>
        </ul>
      </nav>
    </aside>
  

  If you believe it needs changes, let me know

  Thank you!

  0

  

  Kulyk-Volodymyr•660

  @Kulyk-VolodymyrPosted 10 months ago

  I saw that it was aside but typed article)

  I suggest to reuse nav in header and don't make aside. On large screen are hidden burger button and nav with position: relative. On small screen nav has position: absolute and is controlled by button. There are different ways to control nav: with CSS or JS. In CSS burger button is label of hidden input type="checkbox". In JS this button can be button or div.

  Marked as helpful

  1