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
- Solution URL: https://github.com/jotaprojects/product-preview-card-component
- Live Site URL: https://jotaprojects.github.io/product-preview-card-component/
Trying out both Tailwind css and Vite for development. The tailwind css has been hard to learn because of the number of css classes. But if I work with it more it should come naturally.
Vite was a buzz word that I wanted to test and it seems to work fine but together with tailwind it was hard to set up so tailwind would apply the utility classes that I had entered in the html. Sometimes the changes didn't appear and it took some time to get it working again.
I think I can try to use tailwind config a lot more in future projects.
- Continue investigating both Vite and Tailwind for future projects.
- Continue to try out grid instead of flex next time.
- Read up on github pages. How to set up a different branch to get a live version of the code. (This I found on information about on Vite. One thing I hade to change was the
baseconfig to not be the repo name but instead be./)
- Website - jotaprojects
- Frontend Mentor - @jotaprojects