Frontend Mentor | Sunnyside Agency | Technologies uses : HTML CSS JS coding challenge solution

Community feedback

@BurritoDoggie

Posted almost 3 years ago

Hello adarshivilasakavi!

I love your effort! It looks really good and and the effects are amazing! I have a small screen but it still fits and works perfectly. I'm not good enough to see any major mistakes, but if you want to improve you can look at the 'report' located above 'adarshivilasakavi's questions for the community'.

Keep Coding!

                           (•‿•)

Marked as helpful

Chamu• 12,970

@ChamuMutezva

Posted almost 3 years ago

Greetings adarshvilasakavi

Good job. I have one question , why are you using an old version of html when this can be simplified by using html5? I am referring to this declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

You could have then made use of semantic html elements like (header, nav, main, footer).
the li tag holding the hamburger icon is not in the ordered list which i believe is not correct. See the code below

<div class="navbar" role="navigation">
      <a href="index.html" class="active"><img src="images/logo.svg" class="nav-logo" alt="logo"></a>
      <ul>
        <li class="nav-item">About</li>
        <li class="nav-item">Services</li>
        <li class="nav-item">Projects</li>
        <li class="nav-item1">CONTACT</li>

      </ul>
      <li class="icon"> <img src="images/icon-hamburger.svg"  alt="toggler" onclick="myFunction()"></li> 
    </div>

alt values must provide meaning to assistive technology . Values like logo, image-header , image - are not clear or do not assist those who rely on assistive technology. You can either leave it as alt="" if the image is just for decorative purposes.
For the images , look into responsive images . Among other methods , you can use srcset or picture.
The items in the footer - i would recommend them to be in an unordered list

Happy coding

Marked as helpful

Sunnyside Agency | Technologies uses : HTML CSS JS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community