Landing Page
Timeline
Summary
Date: January 2024
Client: Fanshawe College (School Assignment)
Team members:
- Music Apapat Juntarattanakamol – Graphic Designer, Web Designer
- Milana Gabbassova – Frontend Developer
Tools used:
- Web Development: HTML, CSS, JavaScript, Swiper.js
- Design & Branding: Adobe Photoshop, Adobe Illustrator, Adobe XD
- 3D & Motion: Adobe After Effects, Adobe Premiere Pro, Cinema 4D, Blender
Overview
This project was part of a branding and development assignment, where we were tasked with reviving a discontinued product through modern design and digital presence. We selected Zima, a once-popular drink, and brought it back to life with an entirely new brand identity, motion content, and website.
Although this was primarily a design-focused assignment, I took on full responsibility for the frontend development of the website. It was my first complete coding project, and through it, I realized how much I enjoyed building digital experiences through code. It marked a turning point where I truly discovered my passion for frontend development.
I implemented several JavaScript features, including a custom music mixer with drag-and-drop functionality that matched the party theme of the drink. I also integrated Swiper.js to create a smooth, responsive carousel experience and used basic animations to enhance user interaction. This was the moment I knew I wanted to build websites professionally and continue growing in this direction.
Goal
- Build a fully responsive frontend website from scratch
- Apply and improve HTML, CSS, and JavaScript skills
- Learn and implement the Swiper.js library
- Create interactive user features, such as a drag-and-drop mixer
- Understand how to collaborate effectively in a team
- Strengthen problem-solving and UX thinking as a developer
Process
Project Planning
- Defined the website's purpose, functionality, and technical scope
- Set up the GitHub repository and folder structure
- Created a shared plan with clear milestones
Design Phase
- Developed a new logo and visual identity
- Created branding guidelines
- Designed low-fidelity wireframes for initial layout
- Built high-fidelity prototypes with Adobe XD
- Defined design-to-development handoff details
Web Development
- Created all HTML structure for the site
- Styled pages with CSS, ensuring consistent layout and branding
- Added interactivity using JavaScript
- Integrated Swiper.js for smooth carousel functionality
- Built a drag-and-drop music mixer using JS and custom logic
- Applied animations for transitions and user interaction
Deployment:
- Deployed and hosted the project via GitHub Pages
- Performed final testing and bug fixes across browsers and devices
Role
As the Frontend Developer, I handled the full development side of this project. I created all the HTML pages, styled them using CSS, and brought interactivity to life with JavaScript. I implemented the Swiper.js library to enhance user experience with a modern carousel, and built a custom music mixer feature with drag-and-drop functionality. I also ensured the entire site was responsive across devices, and collaborated closely with my teammate to integrate the design vision into a working product. This project gave me foundational experience in turning static designs into dynamic, coded websites.
Key Features
- Fully responsive layout for desktop, tablet, and mobile
- Integration of Swiper.js carousel for smooth navigation
- Custom drag-and-drop music mixer created in JavaScript
- Subtle CSS and JS animations for enhanced interactivity
- Branding alignment through consistent typography, layout, and theme
- Optimized user experience for intuitive exploration
Challenges & Solutions
Communication and Collaboration in a Two-Person Team
Challenge: As this was one of my first collaborative projects, we initially struggled with miscommunication. We made assumptions instead of checking in with each other, which led to a few delays and mismatched expectations.
Solution: We identified the issue early on and decided to schedule regular check-ins to discuss progress and clarify roles. Improving our communication helped us work more efficiently and made the development-design handoff much smoother.
Learning and Implementing JavaScript for the First Time
Challenge: This was my first experience writing JavaScript for a full project, so understanding DOM manipulation, event handling, and custom interactions was initially challenging.
Solution: I broke the code into small testable sections, researched best practices, and used browser dev tools to debug in real-time. Through consistent practice and trial-and-error, I gained confidence in using JavaScript effectively.
Results
The project was a success both in terms of delivery and personal development. We completed all deliverables on time, and the website met all design and interaction goals. More importantly, this project was the beginning of my frontend development journey.
For the first time, I saw how much I loved building interfaces, solving coding challenges, and transforming design into a working product. I became more confident in my ability to code, experiment, and learn new tools. It was the moment I realized that this is the path I want to pursue professionally. This project remains one of the most meaningful in my portfolio—not only for what I built, but for what it helped me discover about myself as a developer.
Explore Other Projects
