Responsive land page of a frontend project using html and css

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Cephas, It looks good!...

  • I suggest you put the status of the preview card component into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

  <ul class="stats-preview__stats">
     <li>
        <span class="stat-number">10K+</span>
        <span class="stat-name">Companies</span>
     </li>
     <li>
        <span class="stat-number">314</span>
        <span class="stat-name">Templates</span>
     </li>
     <li>
        <span class="stat-number">12M+</span>
        <span class="stat-name">Queries</span>
     </li>
  </ul>
  

  Hope this is helpful to you... Keep coding👍

  Marked as helpful

  0

  ---

  

  Cephas•160

  @28cephasPosted over 2 years ago

  @Bayoumi-dev this is so helpful, thank you boss🙏🏻

  0
• 

  Usanase Makala•330

  @usanCodePosted over 2 years ago

  hello Cephas,

  How are you? This challenge is a bit difficult! I have taken a look on your webpage and github code. About how your webpage is displayed, I have zoomed it on Google Chrome on higher and smaller values. I have noticed you've started to design your webpage for mobile version for higher values and when zooming for very small viewports' widths , the desktop presentation is displayed while the contrary should have been presented.

  About the image's color of the right side, I advise you to choose an option that make the color to be more darker.

  I have noticed in your code you like using flex containers. Maybe I should introduce you to grid containers. Here are some helpful links to better understand the topic:

  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

  https://www.w3schools.com/css/css_grid_container.asp

  I really hope this help!
  Good luck!!

  Marked as helpful

  0
• 

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted over 2 years ago

  Hey Cephas. Great solution you have here! Congrats on completing the challenge. I love that it's responsive but you went into the mobile screen width a little too early. I think you could add a few media queries in between the 400px - 1149px screen widths. Forexample at a min-width 800px you could reduce the width of the main card component and then at around a min-width you could change the flex-direction to column. That will make the responsiveness a little smoother.

  Secondly, in order to resolve your HTML validation issue, you might wanna use a h2 tag inside your section tags... It's valid HTML for sections or articles to have heading tags. In your case, you could replace the <section> with <div> because there's not really a lot of content on the page.

  Happy Coding and keep up the good work.

  Marked as helpful

  0

  ---

  

  Cephas•160

  @28cephasPosted over 2 years ago

  @tesla-ambassador thanks for the feedback, I appreciate

  1