OrganicGoods is a responsive e-commerce website project built with HTML, CSS, and JavaScript. This project was created for my Web Page Design class and represents my first complete multi-page website project.
OrganicGoods started as a school project for my Web Page Design class. At the beginning of the project, we researched different website ideas and chose a concept to build from scratch.
I chose to create an e-commerce website because I wanted to build something practical that could be useful in the future. The concept focuses on health, wellness, organic products, and clean lifestyle branding.
Before writing code, I planned the website through wireframes and mockups. This helped me think through the layout, navigation, product sections, page structure, and user experience before building the site with HTML and CSS.
I also designed the OrganicGoods logo, banners, and visual assets in Canva, including promotional graphics and a small video-style slide for the project.
The project started with visual planning before development. I created mockups for different screen sizes and pages, including desktop, laptop, tablet, and mobile layouts.
The mockups helped guide the final website design, including:
- Health and wellness visual branding
- Homepage layout
- About page structure
- Shop/product section layout
- Contact page layout
- FAQ/return policy layout
- Responsive design planning for multiple screen sizes
- Multi-page e-commerce website
- Home, About, Shop, FAQ, Contact, and Cart pages
- Responsive navigation
- Product card sections
- E-commerce style cart page
- Newsletter signup section
- Custom logo and banners designed in Canva
- Organic and wellness-inspired visual branding
- Basic JavaScript for mobile navigation
index.html— Home pageabout.html— About pageshop.html— Product listing pagefaq.html— FAQ and return policy pagecontact.html— Contact page with form layoutcart.html— Shopping cart page
- HTML
- CSS
- JavaScript
- Canva
- GitHub Pages
Through this project, I learned how to turn a website idea into a working front-end project. I practiced planning a website, creating mockups, organizing project files, writing HTML structure, styling with CSS, using images and banners, and publishing a static website online with GitHub Pages.
This project helped me understand how design, layout, branding, and code work together in web development.
- Add individual product detail pages
- Add functional cart behavior
- Add product filtering and categories
- Improve mobile responsiveness
- Improve accessibility and SEO
- Connect the website to a backend or database
This project is currently a front-end static website created for learning and portfolio purposes. Product detail pages, cart functionality, checkout, and backend/database integration are planned as future improvements.