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: 3 Column Preview Card Component Main Solution
- Live Site URL: 3 Column Preview Card Component Main Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
In the beginning as I was working on this project, I was still a bit forgetful regarding the margins and padding of this project and how to get the final website to look just "right". As shown in the code snippet below, I continued to tweak the various properties in CSS of the parent container and the child containers until I was satisfied with what was created.
.main {
flex-direction: row;
max-width: 75rem;
height: 36rem;
margin: 7rem;
padding: 0rem 5rem;
}My continued development in CSS will focus on the box model and how the margins and padding interact with each other in a container element.
- The W3 Reference Guide (CSS) - As always, the "go-to" resource for all things CSS related. This proved invaluable in developing this project.
- Frontend Mentor - @AntonioHouTX
As always, I'd like to thank the team at Slack for providing me with valuable feedback and encouragement on this project. I would also like to especially thank Drull for his time and patience in assisting me with this project.