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.
- Solution URL: (https://github.com/ehtachi/projects)
- Live Site URL: (https://ehtachi.github.io/projects/)
I created a main container first inside which I divided into 2 containers with the help of the flex property. Then in the first container I made it for the prodsuct image and in the second container I used it for product info and stuff. I used the flex property in the info container as well in order to position the components properly and style it. At last, I used media queries to make it responsive and adjustable!
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I had forgotten how to use Media Queries and this project helped me revise those core concepts!
I will continue building more and more websites as I still feel uncomfortable at times even though I know the concepts and I will learn more stuff in order to make the websites more complex and interesting!
- Example resource 1 - Youtube is the one who has helped me from Day 1.
- Twitter - @dellgona
I would like to acknowledge the community of FrontendMentor for letting people do projects for free.