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.

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.

Screenshot of the Home page of the Lorde fan page which consists of information about the artist, her name, and an image of her.

I chose to design my site as a fan page for the New Zealand born artist, Lorde. The Home page consists of some information about the artist, an image of her, a navigation bar, and a footer with links to her socials.

Screenshot of the Music tab in the Lorde fan page which consists of album images for Lorde's four albums, their date of release, and the title of the songs in each album.

On the Music page, I used a table system to add details about each of Lorde’s albums to the site. I included linked images and URLs to her music on Spotify as well as listed their release dates, and the music included on each album.

Screenshot of the News tab in the Lorde fan page which consists a news article from BBC News on an interview with Lorde about how her disordered eating affected her creativity.

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.

 
 
Previous
Previous

Wonders of the World Stamps

Next
Next

Technical Writing