GS7-shopify is an educational project designed for students at Gabi School GS7. This project demonstrates how to create a simple e-commerce product showcase using HTML, CSS, and JavaScript. It fetches product data from an API and displays it in an attractive card layout.
- Fetches product data from the Fake Store API
- Displays products in a responsive card layout
- Shows product image, title, price, and category
- Includes a simple "Add to Cart" button functionality
- HTML5
- CSS3
- JavaScript (ES6+)
- Axios for API requests
-
Clone the repository: ``` git clone https://github.com/miirshe/GS7-shopify.git ```
-
Navigate to the project directory: ``` cd GS7-shopify ```
-
Open the `index.html` file in your web browser.
- `index.html`: The main HTML file
- `styles.css`: Contains all the styles for the project
- `script.js`: JavaScript file with the logic for fetching and displaying products
- Understanding API integration in web applications
- Practicing HTML5 semantic elements and templates
- Implementing responsive designs with CSS Flexbox
- Using modern JavaScript features like async/await and fetch API
- Handling and displaying data dynamically in the DOM
- Add product filtering by category
- Implement a functional shopping cart
- Create individual product detail pages
- Add a search functionality
This project is open source and available under the MIT License.