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.
It was so much faster this time! Apparently having an organized plan works better than just letting yourself be carried by the wind! Who knew!
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: https://www.frontendmentor.io/solutions/responsive-product-card-with-css-grids-bQbx7CbNTt
- Live Site URL: https://tortaruga.github.io/product-preview-card/
I started by observing the design and taking notes and sketching out a general plan of action so that I could then work faster without having to refer back to the design file for every little thing.
I also wrote down a list of the minor things to do (like adding the href for the attribution link), because I usually forget and have to go back to edit after having submitted the solution.
I focused on the mobile version first, while I usually go from desktop to mobile, and I think it made the styling easier.
- Semantic HTML5 markup
- CSS
- CSS Grid
- Mobile-first workflow
I learned to approach tasks in a more organized way and to think about the project more organically, as one entity and not as different parts to be coded separately. Having a clear vision of the whole project from the beginning meant coding from the start with the result in mind, and not having to go back to fix things later on.
CSS Grids are still a bit confusing to me, that's why if I can I try to use Flex instead. I want to keep practising in the future because I think grids can make responsive designs much easier and better looking. (Tables, grids—I think I have issues with anything structured and apollonian...)
- Frontend Mentor - @tortaruga