Frontend Challenge #3, Three Column Card Component
source link: https://dev.to/jcsmileyjr/frontend-challenge-3-three-column-card-component-3kik
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK