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.
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.
Intentionally practicing using the BEM naming convention of block, element, modifier while adding styles to the content.
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.
The final task is to add hover styles to the buttons. DONE!!!!
What I learned
- Retouched the BEM naming conventions
- Brief reminder of how to utilize a SVG image.
- Realized how much more practice I need with responsive designs
Resources I used