1st attempt - 3 column Preview Card Component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  A few issues you need to address on this

  • use interactive elements for interactive behaviour. Not paragraph tags
  • once those elements are updated make sure you always give interactive elements a focus-visible style. This is usually a bold outline and it's purpose is to help keyboard users know where they are on the page and be able to interact with the elements
  • use min height 100vh not height
  • this is unreadably small on mobile. 60% width and tiny rem values is no good for readability. Instead I suggest using max-width in rem on your component and never going smaller font size than equivalent of about 13px. (The style guide actually tells you what size the body font should be on this, and that is for mobile as well)
  • it doesn't matter for this one now but next time work mobile first. Code is more performant that way, usually shorter too, and it is an established best practice

  Marked as helpful

  3

  ---

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @grace-snow I have been learning alot from your comment, keep up the good work 😘.

  1

  

  Sean Williams•10

  @willise414Posted over 2 years ago

  @grace-snow Terrific feedback - I really appreciate it!

  Thank you!!

  0

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @grace-snow Hello, How're you doing?

  I'll very much like you to help review minetoo.

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="container"> instead of <div class="container">.
  • You can wrap your attribution section in a footer tag to avoid accessibility issues.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  1

  ---

  

  Sean Williams•10

  @willise414Posted over 2 years ago

  @Samadeen Yes! Thank you!!

  0
• 

  Jon Hill-Upperton•150

  @JonhilluppertonPosted over 2 years ago

  Hello Sean,

  Great job, as well as what Grace and Abdul said also to include the font family in the design file as well as it looks like it’s default font.

  Keep on coding you do fine.

  Thanks

  Jon

  1

  ---

  

  Sean Williams•10

  @willise414Posted over 2 years ago

  @Jonhillupperton Agreed - I will ensure that for the next challenge!

  0
• 

  Jon Hill-Upperton•150

  @JonhilluppertonPosted over 2 years ago

  That’s great, if you struggle with importing the Google font then you can always message me on slack, couple of people have needed help.

  Thanks

  Jon

  0