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

sunnysideprojectsolution

@admase

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


Any feedback is much appreciated. I still need more practice with responsive design and media queries for CSS3.

Community feedback

P

@gsterczewski

Posted

Hello Danny 👋, my name is Grzegorz.

Your work is ok, there is some work to do, but it's a good starting point.

Here's my suggestions, I hope they will be useful to you

  • On desktop there is a not enough space for Stand out... heading, increasing width in this rule should help :

section .container { width: 55% }

  • I would add some hover and focus states on anchors in nav to improve a11y

  • I would also add focus state on .brand-link so hovering and navigating with keyboard would have the same effect.

  • Consider using inline svg instead of img in social media links, so you can apply better hover and focus effects with adjustingfill property.

This are the things you can fix pretty fast, later we can focus on improving layout and general responsiveness.

Keep up the good work! 💪

See you on the coding trail 😉

Cheers!

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