Frontend Mentor - Product preview card component solution
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.
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
Screenshot
Links
- Solution URL: Github
- Live Site URL: Gihub Pages
My process
- First, I See the design then thought, how do I lay that out in html
- Then I wrote the HTML
- Second, how can i use CSS to achieve the layout
- Then I wrote the CSS for layout
- Third, how should each element be styled
- Then I wrote CSS for each element
Built with
- Semantic HTML5 markup
- CSS
- Flexbox
- Mobile-first workflow
What I learned
- Screen Reader - Visually hide
- How to add img/icon on button
Continued development
- CSS Grid
- In depth CSS
Useful resources
- Image replace using css content property - This helped me for image replacement in media query.
Author
- Website - Abhishek Baliyan - Coming soon
- Frontend Mentor - @abhishek-baliyan-dev
- Twitter - @Abhi___baliyan
Acknowledgments
The stackoverflow guide of image replacing by css solved my problem.
Top comments (0)