3 column preview card using HTML and CSS

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted almost 4 years ago

  Hi there, Marcus! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👏

  One or two things I suggest are,

  • Switching to a mobile-friendly layout sooner to prevent a horizontal scroll bar from appearing along the bottom of the page when the width of the screen decreases in the desktop layout. It's important to make your solution look good on all screen sizes so that as many people as possible can view and enjoy your work.
  • Adding the light-grayish background color from the original design to the page.
  • Perhaps using anchor tags (rather than <button> elements) for the "Learn More" elements in the card (since they seem like they will take the user somewhere when clicked). 😉

  Also, +1 to what Vanza suggested about considering using flexbox and CSS grid in your CSS—they certainly make laying out things a whole lot easier! 😅

  Keep coding (and happy coding, too)! 😁

  00

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 4 years ago

  👋Hi Marcus! My name is Vanza!

  In my opinion, the way you use CSS display and position properties aren't in the right circumstances.

  Even though, it is working, but keep repeating yourself is not efficient, like keep adding width and height properties (because it is set to position: absolute) on .*-card.

  For this challenge, try to use CSS Grid and CSS Flexbox, to complete this challenge again or another challenge using those technologies. It will make your CSS much cleaner and simple.

  That's it! Happy Coding!

  01

  Marked as helpful
• 

  Marcus Hugo•365

  @marcus-hugo

  Posted almost 4 years ago

  Thanks for the suggestions!

  00