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

@Aditya798-create

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


Any feedback is welcomed

Community feedback

Davide 1,725

@Da-vi-de

Posted

Hi, i get a sense you put all your effort to accomplish this challenge, i compliment to you, the result is nice!

  • Without seeing your code first and just moving back and forth a couple of times the window in the console i figured out this was not a mobile first responsive website. Then i saw the code... I want to encourage you to change approach and start the mobile version, trust me you won't need 1000 lines of css code the next time.

  • I also suggest to not underestimate the report, for each html issue there's a link, you can read what that is about and learn important things that help you to evolve and improve as a developer.

  • The html file is hard to follow, nearly unreadable; it's better writing some text as a comment rather than numbers and leave some more space. I tell you what i do but it's not a mandatory way of working. Usually when i have a huge block of code in which i have many nested <div></div> elements and those divs are just for styling i tend to leave a space, up to an important block of code like so:

<div class="...">

     <div class="...">

         <div class="...">

              <article>
                 <h2>.....</h2>
                 <h2>.....</h2>
                 <p>.......</p>
             </article>
          </div>
       </div>
   </div>

so that if someone needs to take a look at your code can easily understand what is what!

Hope it helps, keep coding :-)

Marked as helpful

1
T
Chamu 13,110

@ChamuMutezva

Posted

  • <div class="menuToggle" onclick="toggleMenu();"></div>, using a div as a button is not beneficial to assistive technology users - semantics matters. You can add aria attributes to improve in that matter.
  • <h3 class="service__item--number">01</h3> , a heading should be something that gives a description of the content to follow. 01 does not in my opinion give any hint on what to expect. That could just be a span
  • <input type="email" name="" id="email" placeholder="Updates in your inbox…" class="input__form"> , input elements must be associated with a label to improve with accessibility.
  • good job with slider and responsiveness, it is working perfectly. well done
0

@Shahab-Malikk

Posted

@ChamuMutezva Thank You so much for your feedback i'll try to improve my code

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