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 880

@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

Reports

Accessibility report (14)
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

Ensures landmarks are unique

<nav class="header__topDesktop--nav">
Learn more
error

Links must have discernible text

<a href="#" class="footer__brand">
          <img src="assets/img/logo-white.svg" alt="" class="footer__brand--img">
        </a>
Learn more
error

Links must have discernible text

<a href="#" class="footer__socialnetwork--sc">
Learn more
error

Links must have discernible text

<a href="#" class="footer__socialnetwork--sc">
Learn more
error

Links must have discernible text

<a href="#" class="footer__socialnetwork--sc">
Learn more
error

Links must have discernible text

<a href="#" class="footer__socialnetwork--sc">
Learn more
error

Links must have discernible text

<a href="#" class="footer__socialnetwork--sc">
Learn more
warning

All page content should be contained by landmarks

<section class="about">
Learn more
warning

All page content should be contained by landmarks

<div class="testimonial__top">
      <h2 class="testimonial__top--secondheading">
        What they’ve said
      </h2>
    </div>
Learn more
warning

All page content should be contained by landmarks

<div class="testimonial__middle--main swiper-wrapper" style="cursor: grab; transform: translate3d(-1300px, 0px, 0px); transition-duration: 0ms;" id="swiper-wrapper-5359d0c382cb10397" aria-live="off">
Learn more
warning

All page content should be contained by landmarks

<div class="testimonial__middle--pagination swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
Learn more
warning

All page content should be contained by landmarks

<div class="testimonial__bottom">
      <a href="#" class="testimonial__bottom--cta">get started</a>
    </div>
Learn more
warning

All page content should be contained by landmarks

<section class="career career--bg">
Learn more

Luis’s questions for the community

Hi everyone.

I remade this challenge, but now using SCSS.

Feel free to give any feedback.

Happy coding :D.

Community feedback

Ken 975

@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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!