eCommerce-Site-Lab

Developed at devCodeCamp

A responsive single-page e-commerce website inspired by the Cara Cara brand. This project includes both an Adobe XD wireframe and a live HTML/CSS Flexbox build, focusing on clean layout and modern design best practices.

---

Features

• Wireframe Design: High-fidelity Adobe XD layout, also available as a Figma draft
• Single-Page Website: Efficient navigation and streamlined browsing
• Responsive Layout: Built with CSS Flexbox for optimal appearance on any device
• Semantic HTML: Accessibility and SEO-friendly structure

---

Technologies Used

• HTML5 & Semantic HTML
• CSS3 (Flexbox)
• Adobe XD
• Figma

---

Installation

1. Clone the repository

   git clone https://github.com/thompsonmikej/eCommerce-Site-Lab.git
   cd eCommerce-Site-Lab
   

2. Open index.html in your favorite browser to view the site.

---

Usage

• Live Page: Open index.html to interact with the site in your browser

---

Challenges & Lessons Learned

• First time using Figma to create and iterate on website layouts
• Gained hands-on experience with CSS Flexbox for responsive design
• Learned the importance of visual consistency between wireframe and HTML build

---

Future Improvements

• Expand to a full-featured multi-page e-commerce template
• Integrate interactive product filtering and cart functionality with JavaScript
• Add accessibility enhancements and richer branding elements
• Experiment with design handoff tools between Figma/Adobe XD and code

? Author

Feel free to reach out or connect:

Michael Thompson
https://www.linkedin.com/in/thompsonmikej

Technologies

Other