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

Equalizer Landing Page | Flexbox

Nick ODā€¢ 270

@NickODxyz

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all,

Please let me know your thoughts.

Thanks, Nick

Community feedback

Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey NickODxyz good job completing this challenge. Keep up the good work

Your solution looks great, it's similar to the design in my opinion.

In terms of your accessibility issues

  • links need text, you can overcome this by using aria-label attribute and specifying a value

  • Wrap all your content around <main> tags to get rid of the other accessibility issues.

In terms of your validation errors

  • CSS: transform: too few values for the property transform. I suggest reading on the css transform property and understanding the values needed for it to work

  • CSS: Unknown pseudo-element or pseudo-class :host. I recommend doing some research on what exactly you want to use this for just to ensure that you are using it correctly.

I hope this helps

Cheers Happy coding šŸ‘

Marked as helpful

1

Nick ODā€¢ 270

@NickODxyz

Posted

@TheCoderGuru Thank you very much for the aria-label tip, I've been wondering how to get around that issue for links with no text.

And of course thank you for the rest as well, I will look into all the points you have made.

Nick

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