Basic HTML CSS Flexbox

Community feedback

• 

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  Wrap div with class attribution in

  <footer> <div class="attribution"> .... </div> </footer>

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @juuveria You can just swap the div with footer tag 😉.

  Marked as helpful

  0

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @vanzasetia Ok thank you guys!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Gavin Loo!

  I have some feedback on this solution:

  • Don't use design image size as your breakpoint for @media query. You should make sure that your website looks great on any screen size.
  • For any decorative image, you should leave the alt="" and add aria-hidden="true" or role="presentation" to make sure all screen readers ignore those images. In this case, all the car icons are decorative images.
  • Only use one h1 for every page. I recommend to change all h1 to h2.
  • The Learn More button should be a anchor tag, not button. In real website, it will navigate the user to certain page.
  • Use box-sizing: border-box for every element, to prevent unexpected behavior. Always add this CSS on every project that you create.

  * {
    box-sizing: border-box;
  }
  

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @vanzasetia Hey Vanza, thank you for your advice!

  0
• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Hey, website looks super good on desktop but one issue is that it is not mobile responsive.

  • Try to always write mobile responsive css.
  • I suggest to watch this video to start learning how to use media queries.

  3

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @hardy333 Okay, thank for your advice!

  0