Belle’s Music Unraveled — Web Design & Development · 2025

Context

Created for a 2025 basic HTML and CSS course, this project required designing and coding a website using only foundational web development skills. The assignment included several limitations: the website content had to stay within a 1200px width, include an email address, feature an external link, and demonstrate a clear typographic hierarchy. Beyond those requirements, I had full creative freedom.

I chose to create a website about something I am passionate about: listening to music. Using my lifetime Spotify listening statistics as of November 2025, I designed a personal, data-driven website that presents my music history in a fun and visually engaging way. My goal was to push the creativity of a basic HTML and CSS assignment by displaying statistics in a unique format that reflected my personal aesthetic.

Role

As both the web designer and front-end developer, I was responsible for the project’s visual design and technical execution.

Tools

GitHub Repository, BBEdit, Figma

Creative Approach

I began by collecting my Spotify data through a JSON file and running it through Stats.fm to decide which information I wanted to include on the website. From there, I developed a high-fidelity mockup in Figma to plan the site’s structure, visual direction, and user experience before coding it.

The title section, “Belle’s Music Unraveled,” was designed to resemble a bar of sheet music while also incorporating the required external link to my Spotify profile. I included a call-to-action section to create user engagement and naturally fulfill the email requirement by inviting users to discuss their music rotation with me. The navigation bar was designed to look like an unraveled headphone wire, connecting back to the title and the overall concept of music becoming visually “unraveled.”

The statistics overview used a grid layout to present key listening data, including songs streamed, listening time, artists, and albums. The rest of the website focused on top lists generated from my lifetime Spotify data. Each section was designed to visually reflect its content: the songs section emphasized typography, the artists section referenced a record player, the albums section was inspired by album covers, and the genres section mimicked the layout of sheet music.

After receiving approval from my professor, I developed the website in BBEdit and published it through a GitHub repository. My workflow involved writing sections of code, testing the site locally on my computer, publishing updates, and making adjustments through repeated iteration. I used resources such as W3Schools and ChatGPT when I got stuck, but the overall execution process went smoothly. I was successfully able to translate my Figma design into a working HTML and CSS website.

What I Learned

This project strengthened my technical understanding of HTML and CSS while also building my confidence as both a designer and front-end developer. It showed me that I could take a visual concept from a Figma mockup and execute it as a functioning website. More importantly, it helped me understand how design decisions, layout, typography, and code work together to create an engaging digital experience.