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

html, css, css, javascript, viscose

Mukul Jain• 70

@mukul-1985

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

Community feedback

P
Chamu• 12,970

@ChamuMutezva

Posted

Greetings Mukul. So far so good on the project.

  • the site is looking good on mobile up to the 375px mark and desktop but for medium devices there is still work to be done.
  • Consider semantic html elements where possible to improve the accessibility of the site. For example use an ordered list for the navigation list items , something like
<ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
</ul>
  • look into responsive images , eg the picture element , at the moment you are having 2 separate img elements(one for mobile and another for desktop) and then hiding them using a css class - which is not the recommended way of displaying images. See the following article for some explanation responsive images

Happy coding

Marked as helpful

1

Mukul Jain• 70

@mukul-1985

Posted

thanks @ChamuMutezva for the review.

  • I created site only for two form factors (desktop and mobile) as per the specification given in the design. But in future I will take care to include medium devices too.
  • thanks for the review, I will consider semantic html elements to improve accessibility.
  • thanks for the article on responsive images, its really informative.
0
simret paulos• 100

@simretB05

Posted

hello Mukul Jani, nice work on your project, I have a question how did you figure out the size of the images on the desktop, mine works perfect for mobile but the size of the images for desktop is just not coming right for some reason. thank you

0

Mukul Jain• 70

@mukul-1985

Posted

@simretB05 images work differently, there are different ways to set size of images. Look for object-fit css property https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

0
simret paulos• 100

@simretB05

Posted

@mukul-1985 thank you for the reply!

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