Overview
This project challenged students to create a scrollytelling website that reflected their experience learning to code. I chose to tell that story through the lens of a comic book, combining illustrations, animation, and interactive elements to capture both the frustrations and successes of the learning process. Drawing from my love of comics and visual storytelling, I designed an experience that evolves as users scroll through the page, using motion and color to reinforce key moments throughout the narrative.
Problem
Learning to code can be overwhelming, especially when trying to understand abstract concepts and complex systems for the first time. The challenge was to communicate that experience through an engaging interactive website while applying newly learned front-end development skills and experimenting with animation, storytelling, and user engagement.
Process
I began by identifying key moments from my coding journey and translating them into a comic-inspired narrative structure. Using storyboarding techniques, I developed scenes that represented challenges, confusion, breakthroughs, and growth throughout the learning process. To bring these moments to life, I combined custom illustrations with JavaScript-powered animations and scroll-triggered interactions. Because our class encouraged the use of AI-assisted development, I incorporated multiple AI tools throughout the workflow. Rather than relying on a single platform, I learned how to use ChatGPT, Codex, Gemini, and Antigravity together to troubleshoot issues, generate solutions, and refine code. This often required comparing outputs, identifying conflicts, and integrating the strongest solutions into a cohesive final product. Over several weeks, I iterated on both the narrative and technical implementation, refining animation timing, transitions, and interactive behaviors to create a more immersive experience.
Final Solution
The final website presents the experience of learning code as an interactive comic that unfolds through scrolling. Motion, animation, and strategic color changes guide users through the story while reinforcing emotional highs and lows throughout the journey. A predominantly black-and-white visual system allows color-driven JavaScript effects to create moments of emphasis and impact, strengthening both the narrative and user experience. The result is a highly personalized project that combines storytelling, design, and front-end development into a single interactive experience.
Images
Reflection
This project pushed me further technically than any coding project I had completed previously. While I entered the project with limited JavaScript experience, I challenged myself to experiment with increasingly complex interactions and animations. I learned how to break large problems into smaller pieces, troubleshoot unexpected behavior, and adapt solutions from multiple sources. One of the most valuable lessons was learning how to effectively collaborate with AI tools. Rather than treating AI as a replacement for problem-solving, I used it as a collection of specialized resources that helped me explore ideas, debug code, and understand unfamiliar concepts. This experience strengthened both my technical confidence and my ability to evaluate and implement solutions independently. Most importantly, the project showed me how coding can become a creative medium for storytelling rather than simply a technical skill.
Details
As someone who has always enjoyed comics, illustration, and visual storytelling, I wanted this project to feel personal rather than purely instructional. The comic format allowed me to communicate the emotional side of learning code—the moments of confusion, frustration, experimentation, and eventual success that often happen behind the scenes.
A major design decision was limiting the color palette throughout much of the experience. By keeping the visuals primarily black and white, moments of color became more impactful and could be controlled through JavaScript interactions. This created a stronger connection between the narrative and the technical implementation, allowing the code itself to become part of the storytelling experience.
The project ultimately represents both my growth as a developer and my belief that design and technology are most powerful when they work together to tell a compelling story.