https://github.com/dpkreativ/responsive-product-showcase
https://github.com/dpkreativ/responsive-product-showcase
ighub-web-dev
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dpkreativ/responsive-product-showcase
- Owner: dpkreativ
- Created: 2024-11-15T10:24:03.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-19T11:03:09.000Z (7 months ago)
- Last Synced: 2024-11-19T12:29:54.696Z (6 months ago)
- Topics: ighub-web-dev
- Language: HTML
- Homepage: https://dpkreativ.github.io/responsive-product-showcase/
- Size: 1010 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🧙♂️ Quest: Build a "Responsive Product Showcase"
### Objective:
Design and build a responsive webpage that showcases products. This project will help you practice essential front-end skills such as HTML, CSS, and responsive design techniques.
### Project Requirements:
- **Product Layout**:
- Create a webpage that displays at least 3 products.
- Each product should have an image, a title, and a short description.
- Products should be arranged in a grid or card layout that adapts to different screen sizes.
- **Responsive Design**:
- Use responsive techniques (media queries, flexible layouts) to ensure the product showcase looks good on various devices (desktops, tablets, and mobile phones).
- Ensure the design scales well for smaller screens, with readable text and properly displayed images.
- **Styling**:
- Apply CSS to style the product cards, making them visually appealing.
- Focus on a clean, simple design that highlights the products.
### Design Inspiration:
Use the following [Figma design](https://www.figma.com/design/0NbqhrPUVo3c5gKP6SXwQ6/IGHub-Web-Projects?node-id=316-2) as inspiration for your layout and styling. You can adapt the design as needed, but ensure that your final product is fully responsive.
### Technical Specifications:
- **Tools**:
- HTML5 for content structure.
- CSS3 for styling and responsive behavior.
### Submission Format:
Submit your project as a GitHub repository link containing your HTML and CSS files. Optionally, you can host your project using GitHub Pages or another hosting platform to share a live version.