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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: Add solution URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
This was one of my first hands on practice doing css and html for the first time and i found it difficult but later on i got casual and confortable with it and gradually recalled all the important concept at ones and doing some googling along with doing this challenges was the best part but the biggest achievement was building something on my own not copying a tutorial was a good feeling, in terms of learningn it was a simple project in terms of learning some concept, but helped me boosting my confidence in doning the projects.
With this project i got handson experience with the layous in css and i still need to improve my layouts particularly flex and grid and i also want to improve my skills in animations.
- W3schools - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Github - Washdil Baloch
- Frontend Mentor - @yourusername
- Twitter - @washdildm
I want to acknowledge the frontend mentor platform to help out beginner web dev doing real world projects and getiing handson expericence