Sunnyside agency landing page using html, css and js

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  A lot of things needs attention in your project - check the report as well.

  • The display especially on small devices is not looking good and would encourage you to do a challenge of a lower level than this to get better with responsiveness
  • use semantic elements where possible , using a div in place of an interactive element will need extra coding to get it to work for people who uses keyboards. The following should have been a button

   <div class="nav__toggler">
                      <div id="open"><img src="images/icon-hamburger.svg" alt=""></div>                    
                  </div>
  

  • the following code has 2 issues

  1. the immediate child of a ul element should be an li element. A button can not immediately follow a ul element.
  2. the list items are supposed to be anchor elements

   <ul>
                      <li>about</li>
                      <li>services</li>
                      <li>projects</li>
                      <button class="nav__button">contact</button>
                  </ul>
  

  • duplication of code - having 2 menu list one for mobile and another for desktop, that is not best practice. The positioning can be done with css .
  • separation of concerns matters, keep your css separate from your html. <div class="avatar" style="background-image: url('images/image-emily.jpg');"></div>

  0

  ---

  

  Shiro•80

  @shironeko2707Posted about 3 years ago

  @ChamuMutezva Thanks you. I will fix it

  0
• 

  Magda•235

  @magdaszszPosted about 3 years ago

  There is no background on the navigation on mobile and it makes it barely visible. Also, on mobile, "stand out to the right audience" part isn't all visible.

  0

  ---

  

  Shiro•80

  @shironeko2707Posted about 3 years ago

  @magdaszsz That's my bad .I will fix it later . Thanks for your feedback

  0