DEV Community

Cover image for Frontend Challenge #3, Three Column Card Component
JC Smiley
JC Smiley

Posted on • Updated on

Frontend Challenge #3, Three Column Card Component

This is a brief description of the third frontend project I've completed from Frontend Mentors, 3-column preview card component. Frontend Mentors is a online platform that provide front-end challenges that include professional web designs. You can play with the solution here.

Step 1

Setup the general layout of the application with Flexbox. The three sections need to translate responsively from rows in mobile view to centered columns in desktop view.
setup layout

Step 2

Intentionally practicing using the BEM naming convention of block, element, modifier while adding styles to the content.
BEM's HTML example

Step 3

My biggest issue was making the design responsive. I'm still not sure why my try didn't work, but I had to add lots of style breakpoints to get responsiveness I desired.
GIF of responsive designing

Step 4

The final task is to add hover styles to the buttons. DONE!!!!
Hover state for one of the buttons

Final Outcome

final version

What I learned

  1. Retouched the BEM naming conventions
  2. Brief reminder of how to utilize a SVG image.
  3. Realized how much more practice I need with responsive designs

Resources I used

Discussion (2)

Collapse
burinious profile image
Akomolafe Ayoyinka

That’s a nice presentation of how you went about it…good job💪

Collapse
jcsmileyjr profile image
JC Smiley Author

Thank you!!!