Single price grid component with HTML5, SCSS and CSS Grid

Community feedback

• 

  argel omnes•1,800

  @argelomnesPosted over 4 years ago

  Hi Natalie,

  Good job on this challenge. General advice is:

  1. never use outline: 0;
  2. if use it, be sure to style :focus to give users visual feedback that the element is selected.

  A good example is this site. Notice that if you navigate frontendmentor using your tab key, you'll see links and buttons outlined in dotted blue when focused.

  4

  ---

  

  Natalie Clamp•230

  @NatClampPosted over 4 years ago

  @argelomnes thanks for your feedback! I'll make the change, I agree with your comments, thanks for taking the time to give advice!

  0
• 

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  Hi Natalie, good to see you submit another solution! 😁 It's looking great again!

  There's just two small things I noticed, but other than that I think you did an awesome job!

  • Some of the colors seem a bit off. The price for example is a solid white in the design, but you're using the light blue color. Maybe have a look into that. I personally always open the design files (even if it's just the jpeg) in a tool like Photoshop to be sure I get the colors right.
  • Your button could really use a cursor: pointer; on hover and maybe also a slight change of background color or maybe shadow to indicate to the user it's clickable.

  Hoping to see more of your work soon! 😎

  2

  ---

  

  Natalie Clamp•230

  @NatClampPosted over 4 years ago

  @GerbenDol thanks for the feedback! Good point about the colour, I hadn't noticed, and I pretty much guessed at what colour was being used from what colour codes were given... Woops! Can't believe I forgot the cursor styles, woops!

  Thanks again for the advice, much appreciated :)

  0