Responsive landing page

Community feedback

• 

  Eray•1,410

  @ErayBarslan

  Posted over 2 years ago

  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 :)

  00