Product preview card component with HTML and CSS (flexbox)
Design comparison
Solution retrospective
In this project I tried to practice a little of what I studied about flexbox. Unfortunately I still don't have the knowledge of media queries to be able to make the mobile responsive part, but it was a good challenge
Community feedback
- @Tux3er-IsmaPosted almost 2 years ago
Hi Levi!!!
I am Tux3erπ§, and I have reviewed your code. Congrats it looks nice π!!!
I will give you some tips for your next project and explain you a llitle media queries π:
-
In the button put the cursor as pointer no at grab. We use this when we do hover effects like changing the
background-color
also usetransition
to make a better user experience -
I recomend you a CSS Methodology called BEM css. I will put you the documentation if you like reading and a grat video explaining what is this. Documentation π Video πΉ
-
Also if you want to use a css reset you can use the normalize.css π¨ reset
-
The media queries are css styles to adapt your styles into diferent types of devices. The simple structure is this:
@media only screen and (max-width: Xpx){}
we are telling that the css styles we put into this block will change when we have X px, or rem, or em or %. For better explanation there is some W3Schools info and a video. W3S β¨οΈ Video πΉ
I hope this information will be helpful for you in the future πβ¨οΈ
Happy Coding ππ»β¨οΈππ»!!!!
Marked as helpful0@Levi-MartinsPosted almost 2 years ago@Tux3er-Isma Thank you for your feedback and your tips :)
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord