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.

Step 2

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

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.

Step 4

The final task is to add hover styles to the buttons. DONE!!!!

Final Outcome

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

• Site about BEM Recap of BEM naming conventions
• Free Code Camp tips on SVG images for guidance using an SVG image.