CSS Flexbox

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! AditNovadianto Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  Marked as helpful

  1

  ---

  

  AditNovadianto•1,040

  @AditNovadiantoPosted over 2 years ago

  @Crazimonk thankyou so much for your advice!!!

  1
• 

  Heli0s•670

  @zeerobitPosted over 2 years ago

  Good work tackling this challenge and completing it, here are a few pointers:

  • you should wrap the ".container" class in a main tag and not div, this would also eliminate the accessibility issues
  • The illustration-hero image should be added as a background and not in the html
  • Try to use more meaningful name for your classes, example: "lower-main-one" could be named "pay-button" and "lower-main-two" could be named "cancel-button" . Check this link to read about BEM which will help you structure your class names BEM
  • Annual Plan should be wrapped in h2 since you can only have one h1 tag on a website. Check this link to read more about it h1 tag.
  • Proceed to Payment and cancel order are buttons thus they should be wrapped in an anchor tag , you could also remove the div tags around them since they're not really needed
  • you missed to add the background-color in your "main-content" class
  • The position property is not needed in your "main-content" class, use flexbox instead
  • be careful where you use max-width: max-content; i noticed you used it a lot instead of defining the width size
  • You missed to add the hover effect for the buttons.. check this link to read more about hover hover effect

  Hope these help, happy coding 😎

  Marked as helpful

  1

  ---

  

  AditNovadianto•1,040

  @AditNovadiantoPosted over 2 years ago

  @zeerobit Wow!!! thankyou so much for your advice, your comments really really help me, thankyouuu!!!!

  0
• 

  Bhremada Fevreano•1,395

  @boedegoatPosted over 2 years ago

  Great work AditNovadianto. You've done fantastic job

  In order to fix your accessibility issue, you can add <main> tag to be the wrapper of your entire app.

  Other than that, stay code and happy coding

  Marked as helpful

  1

  ---

  

  AditNovadianto•1,040

  @AditNovadiantoPosted over 2 years ago

  @boedegoat thankyou for your advice, next i will fix the issues

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted over 2 years ago

  Nice work. Keep it up

  1

  ---

  

  AditNovadianto•1,040

  @AditNovadiantoPosted over 2 years ago

  @Phalcin thankyou so much!!!

  0