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

Manage landing page

Luis• 930

@luis08201

Desktop design screenshot for the Manage landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone.

I remade this challenge, but now using SCSS.

Feel free to give any feedback.

Happy coding :D.

Community feedback

Ken• 935

@kenreibman

Posted

Hey @luis08201 ! Great submission. I love how you pushed yourself in using SCSS. Some suggestions from an industry standpoint:

  • Check your accessibility report that Frontend Mentor offers you, you have quite a few accessibility and HTML issues.

  • Your BEM naming is a little off. You're giving modifier classes too often; Usually to every third word in your element class name. the double hyphen -- are for modifier events like btn__large--active or photo__img--highlighted in your case, header--nav or --link should be __link or main-header__nav simply put, you should rarely have to use --

  • I see you're using section elements which is a great step into a well-structured page. However, you're lacking a main element that surrounds those section tags to make it semantically correct. You could wrap all your content inside the body tag with a main element.

  • I also suggest you put a nice descriptive alternative text alt="" whenever you use an image for accessibility purposes. Same goes for your anchor links as well. I see you're getting a lot of those errors in your footer.

  • If your image is purely decoration and you absolutely believe that it doesn't need descriptive text for accessibility, you can hide that from screen readers by putting an aria-hidden="true" in your img tag. You can read more about that here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

I hope this helps, you're doing great!

Marked as helpful

1

Account Deleted

I think it looks very good!

Marked as helpful

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