HappyToes is a responsive ecommerce website created by Yash Magane, Louise, and Yorick.
The project was part of TFS – Challenge 4: Company Website, where the goal was to design and develop a website for a fictional business selling socks.
Our aim was to build a polished, modern website using HTML, CSS, and JavaScript, while following best practices such as BEM naming conventions, JavaScript modules, and collaborative version control through GitHub.
🔗 View HappyToes on GitHub Pages
Create a company website that sells a chosen product to a target market, based on a supplied Figma design.
We decided to build a website for HappyToes, an online sock company offering fun, stylish, and comfortable socks.
The project included:
- A Home page
- An About page
- A Product listings page
The design was inspired by the provided Figma mockup, adapted to suit our own branding and theme.
- Fully responsive for both desktop and mobile viewports
- Consistent font and colour scheme throughout
- Based on the provided Figma design but customised for brand identity
- Used CSS variables for easy theming and consistent styling
- Split CSS files per page for better structure and maintainability
- Tabs implemented with JavaScript modules
- Review section animation on the Home page
- Search bar on the Product listings page, search bar filters products dynamically as the user types
- Contact form on the About page user input is validated and displays a thank you message upon submission
- Hosted and version controlled via GitHub Pages
This project was a collaborative effort between Yash, Louise, and Yorick. We adopted a professional development workflow using GitHub’s built in tools to manage tasks and avoid merge conflicts.
- GitHub Projects (Kanban board) for task management
- Issues & Pull Requests to track progress and review code before merging
- Feature branching for isolated development and conflict free merging
- Frequent commits and rebasing to maintain clean, up to date branches
- Improved team coordination
- Practiced collaborative Git workflows (branching, reviewing, merging)
- Built strong understanding of version control and team-based development
| Technology | Purpose |
|---|---|
| HTML | Semantic structure of web pages |
| CSS | Styling and responsive design |
| JavaScript | Interactivity and dynamic features |
| BEM Naming Convention | Consistent and maintainable class naming |
| JavaScript Modules | Organised and modularised code |
| Git & GitHub | Version control and collaboration |
| GitHub Pages | Hosting the live website |
- Practiced team-based development using GitHub’s collaborative tools
- Strengthened understanding of responsive design principles
- Learned how to modularise JavaScript for better code organisation
- Improved workflow efficiency using BEM and CSS variables
- Understood the importance of clear version control practices
- Built confidence in combining HTML, CSS, and JS to create a fully functional, responsive website
- Yash Magane – Developer
- Louise – Developer
- Yorick – Developer
Home Page Header:
Products Page Search Bar:
About Us Header:
