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

Responsive landing page

Darya 160

@DHolets99

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Finally finished this challenge. There were difficulties with the positioning of the main image. Feedback is welcome

Community feedback

Eray 1,410

@ErayBarslan

Posted

Hey Darya, design is almost pixel perfect and responsive so nothing much to add, excellent work! Some suggestions:

  • Between 450-720px text and image overlaps. You can change the breakpoint for mobile to 720px. My general suggestion in this regard would be to take mobile first approach so you wouldn't be dealing overflows. Also desktop layouts are more complex than mobile. So you can achieve the same result with less code since mobile usually just 1 column layout. Although you'd still need to check desktop before styling for mobile to make the transition easier from simple layout to complex.
  • Sections aren't landmark elements by default. If you wish to use as one, you need aria-label or title attributes. Or you can simply use it inside <main>.
  • You can reduce the usage of <div>. If there is a semantic element it's always better to use one instead of div. In your case you can use <p> for texts. Also you can get rid of nested divs like in here:
<header>
    <div class="wrapper">
      <div class="header">
        /* content */
      </div>
    </div>
  </header>

All 3 containers are parent of the content and you can achieve the same by just using <header> without the need of divs. In regards of accessibility nested divs won't mean much because they're ignored, just there for styling purposes. Although not using unnecessary elements will keep your code more maintainable and easier to work on for others. Aside these everything looks great and happy coding :)

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