Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page using Bootstrap

Yaungni 100

@Yaungni-Linn-Latt

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is it possible to change image sources using JS? I used it but it was not flawless.

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

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-Latt

Posted

Thank you so much. This is really helpful.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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