Responsive Landing Page using Bootstrap

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  Greetings Yaungni-Linn-Latt. You did an amazing on this project, your site is responsive . Here are a few of my observations:

  • the hamburger button has an image which has an alt="facebook", it does sound misleading to assistive tech users . In this case i would expect an alt value that is related to the purpose of the button. Alt values are there to allow assistive tech users get the meaning that is being put across by an image. If the image is decorative as in this case the an empty value is advisable to use.
  • For the path in urls <img src="images\icon-hamburger.svg" alt="facebook">, use the forward slash / instead of the backslash. Try using a validator - the backslash will not pass.
  • do not nest interactive elements <button type="button" class="button"><a class="nav-link btn-contact" href="#">CONTACT</a></button>. Use an anchor element for navigation - it will direct you to another page or a section within the same page, whereas a button triggers an actionlike opening or closing something or sending a form.
  • heading elements must ascend in order without skipping, h1 ,h2, h3 etc.
  • an inline element like a span should not be used to nest block elements, better to use a div

   <span class="align-middle text-tran">
                  <h2 class="title-tran">Transform your brand</h2>
                  <div class="tran-text">We are a full-service creative agency specializing in helping brands grow fast.
                    Engage your clients through compelling visuals that do most of the marketing for you.
                  </div>
                  <h5><a href="#" class="learn-tran">LEARN MORE</a></h5>
                </span>
  

  • text that is written in uppercase is read letter by letter when using a screen readers, use css to transform the words to uppercase.
  • the tran-textin the code above i would prefer to have it as a p element rather than a div.
  • the footer spans should have been a navigation as well same as the header navigation.
  • the social media icons has to be anchor elements in an unordered list

  Marked as helpful

  0
• 

  Yaungni•100

  @Yaungni-Linn-LattPosted about 3 years ago

  Thank you so much. This is really helpful.

  0