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 agency landing page challenge hub

Luis• 930

@luis08201

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 everyone.

This is the second attempt at this challenge. Feel free to give any comment, I'll appreciate it.

Community feedback

Raymart Pamplona• 16,090

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks really good and very close to the design. It is responsive and the mobile layout looks really great as well.

Some suggestions would be:

  • You don't have to use figure on the website-logo-link, you could have just use div or just let the a tag be its element.
  • The alt value for the website-logo should only be alt="sunnyside", avoid adding words that relates to "graphic" such as "logo, icon, image..", it is already an image so no need to describe it as one.
  • The navigational links on the header should be inside a ul element, since those are "list" of links.
  • The alt values for the testimonial images as well should only be using their names, lose the "photo" word.
  • The position of the person shouldn't be a heading tag, the name being heading tag is enough and more suitable.
  • The alt values for the 4 images before the footer should be alt since those are only decorative, and there aren't any content that relates to the img.

FOOTER

  • The a tag for the logo-link should have an aria-label or an sr-only text inside it, describing where this link would take. For example, aria-label="homepage", since typically, website logo links to the homepage.
  • The svg for the logo-img should have a title element on the svg like:
<title> sunnyside</title> 

On svg, you use title element inside it, on img, alt value are used.

  • Again, nav links would be better inside ul element.
  • The social media links should be inside ul element as well since it is a "list" of links.
  • Each a tag that wraps the social media icon should have aria-label attribute on it or sr-only text inside the element, defining where this link would take, like aria-label="facebook". Also, do not use aria-hidden="true" on it, use it only on images or icons.

MOBILE

  • The menutoggle should be using button and not div element. When making interactive component, use interactive elements.
  • The button for the toggle will also have an aria-label or sr-only text, describing what the button will do, a text like "navigation menu dropdown" could be used. Also, it should be using a aria-expanded attribute, which will be changed by javascript.
  • The placement of the toggle and the dropdown is incorrect. The button should be placed before the dropdown. Swap those 2.

Aside from those, really great work on this one.

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