HTML 5 using CSS Flexbox

Community feedback

• 

  Bob•105

  @robakersonPosted over 3 years ago

  Hey Carlos,

  I know this is a small thing but you are missing

  cursor:pointer;

  on your active states for the payment & cancel buttons

  Marked as helpful

  1

  ---

  

  Carlos E Alford•285

  @webshurikenPosted over 3 years ago

  @robakerson It's not small, that was part of the challenge. My attention to detail let me down :(. I was only focused on the look of the active state that I didn't notice the mouse pointer. Thanks for this, I have now updated my solution.

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @robakerson technically, buttons are not meant to have cursor pointer. That was added to indicate navigation so isn’t meant to be used on buttons, but should be once they’ve been swapped for anchor tags.

  Personally though, I think they are always a good idea , like you. It helps something look clickable and that’s always a good thing with interactive elements IMO

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Well done on this, it looks good!

  A few suggestions

  • don't give alt descriptions to decorative images. If they are unimportant images, leave alt blank and add either aria-hidden true or role presentation.
  • change is an action so should probably be a button
  • proceed and cancel both imply navigation so should probably be anchor tags not buttons
  • remember you don't need to wrap everything in a div. That's just a block element, so if it only has one child element inside you can lose it and add display lock to the child if needed

  Good luck

  Marked as helpful

  1

  ---

  

  Carlos E Alford•285

  @webshurikenPosted over 3 years ago

  @grace-snow I understand about the decorative images not needing alt and it did feel like overused the divs. I have improved my solution with your suggestions:

  • Removed unnecessary DIVs
  • Updated HTML to separate nav and action elements.

  Thanks for the feedback.

  0
• 

  Quibble7s•130

  @Quibble7sPosted over 3 years ago

  Check out the BEM naming convention!

  Marked as helpful

  1

  ---

  

  Carlos E Alford•285

  @webshurikenPosted over 3 years ago

  @Quibble7s I have heard of BEM. Went through it and I can see its appeal so will start implementing it from now on. Thank you.

  1
• 

  Manoj Kumar Singh•530

  @manojks092Posted over 3 years ago

  Try to name the classes much relevant to the content of the element, this will help you remember what you are working on. You can think it as giving a title to a chapter.

  Marked as helpful

  1

  ---

  

  Carlos E Alford•285

  @webshurikenPosted over 3 years ago

  @manojks092 A title to a chapter? I like that!.. Thank you for you feedback. I will put it to practice on my next challenge.

  0

  

  Manoj Kumar Singh•530

  @manojks092Posted over 3 years ago

  @CarlosEAM All the best buddy, happy coding!! :D

  0