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
-
Live Site URL: card-preview-component.matiaslagoevia.com
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- Flex approach to center main content and footer helped on this too
- Flex items' images have
align-self: start
implicitly, stretching them - Font-sizes in
rem
, everything else (padding, margins, etc) inem
- Styling buttons with
:hover
pseudoclass - Controlling flex containers' direction & wrap with
flex-flow
- Specifying
max-width
alongsidewidth
for containers to prevent them growing too much - Using
margin: 0 auto
to center content horizontally - VSCode "wrap with component" snippet helped me be more productive
I'm happy I'm continue to explore flexbox and it's usage, and look forward to doing so. Also, the ability to visually determine how I want to split up the HTML markup and apply styles, differentiating between margin/padding/etc., and continuing to grow my experience in this.
- Conquering Responsive Layouts - Helping me understand how to create responsive layouts as simply as possible
- MDN โ flex-flow - Helped me understand and visualize the concepts of
flex-direction
alongsideflex-wrap
- Website - Matias Lago Evia
- Frontend Mentor - @matiaslagoevia