Fan Page (HTML & CSS)
2025 | CMST 385 Principles of Web Design and Technology I
For this project I created a fan page for a musician with Home, Music, and News tabs. I wrote responsive and validated HTML and CSS and hosted the site locally through my WinSCP account with the University of Maryland Global Campus.
-
Project Goals
Create a fan page website for a musical artist (Lorde) that showcases their music and an article about them.
-
Target Audience
Fans of Lorde and/or people interested in her music. Often generation Z alternative pop listeners.
-
Tools Used
Visual Studios Code and WinSCP
-
Problem-Solving Approach
Sketch out wireframes from the site and gather resources required. Starting with the homepage, write out HTML and CSS for each page.
When it came to choosing an artist for this project, I wanted to pick someone whose art inspires me in many ways. One of my favorite album/album cover combinations in modern music is Lorde’s 2017 album, Melodrama. Lorde’s music and visual aesthetics have always gone hand in hand and I find that her art has the ability to encapsulate a moment in time in very unique way. On one hand, this made designing a fan page for her music a challenge because I wanted to created something timeless that would not feel out of place with any of her albums. On the other hand, it was a joy to build a site showcasing art that I admire so much. In the end, I decided to let images guide the aesthetic of my site. I used colors from Lorde’s most recent album cover (Virgin) for my text colors but used a more timeless very dark shade of blue for the background.
I referenced the same CSS file for each page in the site which can be downloaded and viewed below. I used an external font (Eurostile 2) which I will not add as a direct download in respect for the creator. Instead, feel free to click the link provided in the paragraph above. Below is a link to the CSS file I wrote for this project.
For the News page I included an article titled “Lorde: Obsessing about my weight stopped my creativity,” by Riyah Collins at BBC Newsbeat as well as a link to and an image from the article.
For a full tour of the site, view the videos below, showcasing the pages and the site’s responsiveness.
A tour of Ana’s fan site of Lorde that takes the viewer through each page (Home, Music, and News) and each link (featured article and socials including Spotify, Instagram, and TikTok).
A demonstration of the responsiveness of Ana’s fan site of Lorde that shows the shrinking and expanding of the site with the browser window.