See full Kanban in GitHub projects
Table of Contents
E.CO simulates a real responsive, accessible e-commerce web application focused on sustainable and affordable shopping. Users can browse products, view details, register, log in, manage a cart, and complete a mock checkout process.
This page is meant to show my progress in designing and creating a front end product using what we have learned of web design, Figma, HTML, CSS and JavaScript during our first year.
E-co is a modern, sustainability-focused e-commerce brand founded in 2018 to simplify online shopping by offering a curated selection of high-quality products across electronics, lifestyle, home, and wellness—all in one place. Committed to environmental responsibility, E-co combines data-driven product choices, eco-friendly logistics, and carbon offset initiatives to deliver a seamless, climate-conscious shopping experience for today’s discerning consumers.
See the brand client profile for more details.
- GitHub Repo: https://github.com/larstp/larstp.github.io
- GitHub Project: https://github.com/users/larstp/projects/8/views/1
- Live Site (GitHub Pages): https://larstp.github.io
| Style Guide | Mobile Prototype | Desktop Prototype |
|---|---|---|
| View Style Guide | View Mobile Prototype | View Desktop Prototype |
Or visit the entire Figma Project
You can also see screenshots of every design page located in the Figma folder
- Clone repo and open
index.htmlin your browser using Live Server or NPM, or visit the deployed site: larstp.github.io (available until exam is graded) - No build steps required; all code is static and client-side.
| Username | Password | |
|---|---|---|
| eco-admin@stud.noroff.no | eco_admin | Password123 |
| Username | Password | |
|---|---|---|
| Email does not need to be real. Must end in @stud.noroff.no | Make your own username. Username can only contain letters, numbers, and underscores! | Password must contain 8 characters or more. |
- HTML5, CSS3 (no frameworks)
- JavaScript (ES6 modules, no frameworks)
- Figma (design & style guide)
- GitHub Projects (planning)
- NOROFF E-commerce API (online-shop)
/public/— Static assets (images, icons, etc.)/src/— Source code/css/— Stylesheets/script/— JavaScript modules/pages/— HTML pages/components/— JSON files for mockup storage
/docs/— Documentation, Figma- and assignment files
- Product feed with carousel and grid
- Product detail page with shareable link
- User registration and login (with validation)
- Cart management (add, remove, adjust quantity)
- Checkout flow (address, shipping, payment selection)
- Success/confirmation page
- Responsive design for desktop and mobile
- Accessibility features (labels, contrast, keyboard navigation)
- SEO meta tags and semantic HTML
- Loader overlay for async actions
- Wishlist is working (mocked)
- Fetches product data from the NOROFF online-store API
- Uses endpoints for registration and login
- All forms have labels and validation feedback
- Visually hidden labels for screen readers
- Sufficient color contrast and focus states
- Semantic HTML structure
- Meta tags for SEO and social sharing
- Error handling
See screenshots of validation-tools used in the validation folder
- Checkout/payment is a mockup (no real transactions)
- No persistent user address/payment storage (mocked in localStorage or JSON)
- Some features (e.g., wishlist, colour filters) are non-functional or for demo only
- The "Wishlist", "About" and "Contact" page is hastily added to not have empty links in the header, and should not be considered a real part of the overall design.
- Icons: Iconify License: MIT. No attribution required. Commercial use is allowed
- Stars: W3.org
- Images: Unsplash and Pixabay. Free to use under the Unsplash License and Free for use under the Pixabay Content License
- Loader CSS: Pure CSS Loaders - loading.io
- Only other code resource I've used is help from GitHub Copilot (AI coding assistant) for code suggestions and explanations.
- Design: The majority of the inspiration for my websites design comes from this netlify example page. I really liked the layout of the product page, and the simple yet stylish design of the landing page. I did not, however, like the animations as much. They became too... much, so you'll se little of that in my design.
- Author: larstp