news_homepage_main

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 4 months ago

  Hi there, congratulations on completing this challenge. You've done a great job with this one! 🎉

  I have visited your live site and your GitHub repository and I would like to share some of my suggestions regarding your solution that will help you improve it.

  • Use semantic tags in your HTML. This is a huge factor when developing a website. Make sure that your HTML does the job and it also keep it meaningful. I have found lots of issues with the semantic tags in your code. For example, the navigation bar itself is messed up.

  <div class="navb hidden1">
  <div class="nav">
  <h3>Home</h3>
  </div>
  <div class="nav">
  <h3>Trending</h3>
  </div>
  ....
  </div>
  

  hx tags are meant for headings not for links.

  You need to use the required tags for each of these.

  • For the navigation, use the nav element instead of div
  • The navigation links should be wrapped inside an unordered list ul tag where each link is an a wrapped inside an li tag.

  Something like this:

  <nav>
  <ul>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  ...
  </ul>
  </nav>
  

  • Don't use percentages for margins and paddings. Instead use rem or em units.
  • You have to swap the images provided for desktop and mobile using the picture element along with the srcset attribute.

  <picture>
  <!-- This is the desktop image -->
  <source media="(min-width: 50rem)" srcset="folder/image-desktop.jpg"/>
  <!-- This is the mobile image -->
  <img src="folder/image-mobile.jpg" alt="image" />
  </picture>
  

  • The "Read more" component is a link that is styled to look like a button. You need to change that from the p element to the a element.
  • Class-names are subjective. But, they should be able to express the meaning of the component or what they're meant to do. Instead of one, two, etc. use the name of the component you're trying to build as the class name for that element.

  For example, here is the Read more link in a better way.

  <a class="btn btn-orange" href="#">Read more</a>
  

  Give this article a read to get a better idea about HTML Semantics and how to use them

  I hope you find this helpful 😄

  0

  ---

  

  Yakkanti Mahendra Reddy•120

  @MahiYakkanti27Posted 4 months ago

  @Code-Beaker you're correct. Thankyou so much for your valuable feedback.

  1