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
- Solution URL: Add solution URL here
- Live Site URL: https://3colcard.liamsworkshop.repl.co/
- Semantic HTML5 markup
- CSS
- Flexbox
- Mobile-first workflow
- Media Queries for responsiveness
I learned a variety of things during this project.
- First of all, I learned new ways to use CSS Selectors. Such as:
.btn-text.sedan{
/* Properties */
}
.card-button:hover .btn-text{
/* Properties */
}
Which allow more specific selections on elements.
- Second, I learned that designing and coding mobile first allows for much easier time when creating breakpoints. And improving responsiveness on all devices!
Flex or "Flex Box" is always a good tool to use. When I started this project I thought I'd be using CSS Grid, but Flex was just the way to go. I plan to continue these challenges and improve my skills. As well as work with JS
- Frontend Mentor - @Cooly-o-Cats
- Github - @Cooly-o-Cats
Thanks to Frontend Mentor, as always for this amazing project. Enjoy the result!