This is a solution to the Product 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 and focus states for interactive elements
- Live Site URL: Live Site
- Semantic HTML5 markup
- Mobile-first workflow
- Flexbox
- SASS
I took on this challenge to practice more with flexbox and SASS.
- I got more comfortable with how to work with parent-child flexbox relationships
For example, this makes it much easier to target a parent's children with the parent > * selector and then apply styles to a flex parent's children.
.card-content {
display: flex;
flex-direction: column;
padding: $card-padding;
& > * {
padding: $tb-padding-smll
}
}
- I learned about more recent SASS features like @use and @forward.
For example instead of something like this
@import 'abstract/variables';
It's better to use the following to prevent name-spacing conflicts.
@use '../abstract' as a;
or
@use '../abstract' as *;
- Website - Portfolio
- Frontend Mentor - @CodeSofty