Three-column Preview Card solution

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Scott, congrats on finishing the challenge, you did a pretty good job, your site looks responsive for both, desktop and mobile widths!

  If you don't mind I would like to give you a little suggestion.

  To increase a bit the user experience on your web page, I would probably add some little transitions on your hover effect, it would give a smoother effect on your buttons hover and is easy to get, just add transition: all 0.5s ease; to your button selector and thats it!

  Hope my feedback helps you in future challenges!

  Marked as helpful

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @DavidMorgade Yeah, I am testing some of the transition effects by myself now to make it more special - thanks David!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello again Phuc, congratulations for you solution!

  I saw your repository and you code and I've some tips for you.

  You've used one class different for each card, something thst mskes a lot easier this work is having a general class to manage the elements that are the same in the 3 cards to have the control of them using a single class and otber class to manage what is different in each one. Trust me this makes a lots of difference if you need to change something in future.

  About the cards semantics you can replace the div with and article to make the accessibility specs better.

  Hope this helps, happy coding!

  Marked as helpful

  0

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @correlucas Thanks Lucas!

  I used the article tag for each cards already actually xD I think you misread that.

  I'll see what I can do to create a general class for a card without creating 3 different ones like what I did there. I personally feel like, for a simpler challenge in the Newbie level, it shouldn't really matter that much anyway.

  Maybe if I redo this using a more modern framework/tool - then that's definitely what I would do since it's a very good practice for modern front-end developments.

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Phúc (Scott) Nguyễn,

  Congratulation on completing this challenge. Excellent work! I have few suggestions regarding your solution, if you don't mind:

  HTML

  • In this challenge, the images are much likely to be decorative. For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.

  • What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.

  • Add border-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set it to individual corners.

  Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @PhoenixDev22 Decorative images are something I always forget somehow lol.

  And yes, I was thinking about using either the button or the a tag too. Thanks!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @NationsAnarchy

  Glad it was helpful. Happy coding!

  0