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
- 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
- Site about BEM Recap of BEM naming conventions
- Free Code Camp tips on SVG images for guidance using an SVG image.
Top comments (2)
That’s a nice presentation of how you went about it…good job💪
Thank you!!!