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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I am just proud of the fact that despite toggling with HTML and CSS for over a year, I have never really built something like this.
Today, I managed to apply a few skills I've learned and the biggest moment was when I managed to use the media queries to adopt the responsiveness; that was huge. A very large portion of this credit goes to a very silent Internet warrior, the Interneting Is Hard admin who created a wonderful HTML and CSS tutorial but for some reason has gone quiet of late; huge thanks to him.
This is just my first project, so of course I want to keep doing more projects to get a better understanding of CSS especially, because it's quite complex, especially around the flexbox area. Of course, I also want to learn and apply more attributes to get more wonderful effects.
- Interneting Is Hard - This helped me understand in depth the principles of CSS especially, not to forget semantic HTML.
- The Odin Project - This is an amazing website that offers novices the opportunity to learn to code, FOR FREE. Big up, guys.
- Website - Abdul Varvany
- Frontend Mentor - @avarvany
- Twitter - @avarvany
- Interneting Is Hard
- The Odin Project
- Kawsar Ahmed Fahad - for reviewing my project and guiding me with a few tips to make this project even better!