This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This challenge involves making a preview card component having 3 columns inside. All of the 3 columns have the exact same structure, with just different logos and text. The cards are horizontally aligned when viewed in desktop mode, but in mobile mode are vertically aligned.
I started with first applying what I learned from the last challenge. I applied CSS resets, imported globally the colors, fonts, etc.
Next I thought about the component structure.
Once the structure was in place, I started with putting in whatever needed to be shown, the image, the header, the description.
Next I styled them as close as possible to the design, like the colors, the size, the font, the border-radius, etc.
At the end I placed the button and styled it.
Testing the component on the mobile layout, made me recall 1 feedback point from my last challenge, I should let the content of the container decide it's height and not hard code the height, and width for that matter. So I applied this feedback, and got the results I wanted.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- VueJS - JS Framework
- SASS
- Mobile-first workflow
This was one of my first attempts to code something on my own with Vue, eventhough I have ~2 years of experience in it.
-
It's good to plan your application's structure before starting to code.
-
You'll always need to go back to the documentation once in a while, no matter how long you've been working with somtething, and you shouldn't be embarrassed to do so.
-
Seemingly simple concepts might seem hard when you're going through it for the first time, but it won't always remain so. So start learning and understanding them and you'll see the hard things become simple before you.
-
Don't underestimate consistency. I could have done this challenge a lot sooner only if I'd been more consistent. I relied on my extra motivation during weekends to complete everything related to this challenge, which costed me ~1 extra week. The actual coding part was done in just 1 day (the previous Sunday). I can cover more ground, if I stay more consistent.
- I tried using BEM syntax in this challenge eventhough I'm not fully confident with it. I will continue applying this in future challenges for practice. I could look into BEM alternatives once I get more comfortable with this.
- Eventhough, I've worked with Vue, I'm still not confident in it. I need to start more and more projects from scratch using Vue. I could look into React once I get more confident with Vue.
- VueJS - Class and Style Bindings - This helped me recall how to use JS objects for applying styles to elements/components.
- PX to REM converter - This is small and quick tool to convert px values to rem or vice versa.
- Frontend Mentor - @mehra-sourav
- Twitter - @Souravmehra