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
I thought in this project as two divisions. One for the image and the other one for title, description and button cart. So i started typing the html code for the image first and then i given the styles. The same for the other side, i continued for html sintaxis and then the styles.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
i have learn how affects seman i have learnt how really works display flex i have learnt more about responsive design
I want to continue this project to improve it. Actually this why i have update the project with the name "alpha version". What i pretend it's mostly improve my skills with using new technich that i haven't learn yet but i want to.
-
Example resource 1 - The official documentation of mozilla helped me out to understand and remember some concepts that i've forgotten
-
Example resource 2 - Always helpful! Whatever you need...you will find a proper example here that fits with the solution that you are looking for.
- Frontend Mentor - @yourusername
- Twitter - @yourusername