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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
I usually code my container first, then the main section of my component, then I divided it into 3 columns using Bootstrap. A lot of margin and padding classes are used to make spaces for each content.
Somehow I started with desktop first, and then use @media
query to make it responsive.
- HTML5
- SCSS
- Bootstrap