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.
Created Responsive Product Review card component with using HTML5 semantics & CSS Flexbox model.
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: Solution URL is here
- Live Site URL: Live site URL is here
I create html template first after that I started stylin components one by one.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned media queries via solving this challenge as it has different layout for mobile screen & desktop screen. So yeah it's amazing I learned new things how to use media queries using different screen widths. I really liked this pattern and will use it going forward.
To get a local copy up and running, follow the steps in Setup below.
Basic knowledge of HTML, CSS.
If you installed git you can clone the code to your machine, or download a ZIP of all the files directly.
Download the ZIP from this location, or run the following git command to clone the files to your machine:
git clone https://github.com/Fatima-hub333/Google_clone.git-
Once the files are on your machine, open the Portfolio folder in Visual Studio Code.
-
With the files open in Visual Studio Code, press the Go Live button at the bottom of the window to launch the files with Live Server.
The following tools help make easier to work with sample code.
- git: A tool for managing source code
- Visual Studio Code: A source code editor
- Live Server: A simple web server utility for Visual Studio Code
👤 Fatima Zahir
- GitHub: @githubhandle
- Twitter: @twitterhandle
- LinkedIn: LinkedIn
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
This project is MIT licensed.