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

sunnyside using react & sass

zhiwei• 55

@softmagnet

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi every one, this is my very first challenge on frontend mentor. It is written with sass. I am also a beginner with sass, would be very grateful if someone points out anything that's glaringly wrong or gives any advice on my project. Good day! :)

Community feedback

P
Chamu• 12,970

@ChamuMutezva

Posted

Things that needs addressing are as follows:

  • this <img src={burger} alt="burger" onClick={() => setMenuOPen(prev => !prev)}/>, is acting as you menu to control the opening and closing the modal on mobile. Nicely done it is working, but now an image is not an interactive element and users who rely on assistive technology will not be able to know that the image is representing a button. You can either make the image a child of a button or see what aria attributes you have to add.
  • the list items are supposed to be anchor elements as they are supposed to be links to external pages.
  • write your content in lowercase and use css to uppercase it , accordingly <li className="lastli">CONTACT</li> . That won't work well with screen readers.
  • headings are important in a site , you need to check your html structure again for elements that are suitable for headings - a handful of them are currently divs. Do not use divs if there is a proper element that can do the job. As an example, the following element should be your h1
  <div className="slogan" >
          WE ARE CREATIVES
        </div>

Happy coding

Marked as helpful

1

@ah-naf

Posted

  1. Use hover effect in links and button.
  2. In grid section, you are displaying images in wrong order on mobile version. You can use order property to fix that.

In spite of that, everything looks great.

Marked as helpful

1

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