(Developer: Vilayat Kleer)
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
- Find information about The Doors
- Find information about the band members
- Watch videos from The Doors
- Listen to music from The Doors
- Provide essential information about The Doors
- Promote The Doors’ music
- Provide an intuitive and responsive experience
- Provide users with a means of contacting website owner
- People interested in The Doors
- The Doors tribute bands
- Music enthusiasts
- Structured website with clear sections
- Finding relevant information quickly
- Visually appealing and responsive website, no matter the device
- A way to contact the website owner
- Accessibility and readability
- As a user, I want to learn what The Doors achieved as a band.
- As a user, I want to learn who the band members are
- As a user, I want to find out more about The Doors' music
- As a user, I want to have control over the video and audio.
- As a user, I want to easily find The Doors’ Spotify content
- As a user, I want to learn about The Doors’ legacy
- As a user, I want to know where The Doors recorded their music
- As a user, I want to be able to contact the website owner
- As a user, I want to know The Doors social media accounts so I can follow them.
- As the website owner, I want the purpose of the website to be clear immediately
- As the website owner, I want to provide a responsive website for all devices.
- As the website owner, I want users to be able to contact me for questions or suggestions
- As the website owner, I want users to be able to go to any section of the page easily, no matter where they are
- As the website owner, I want to embed API’s to enhance the user experience
- As the website owner, I want to encourage users to explore The Doors’ music
The website was designed to make learning about The Doors fun. A history website can easily become boring with walls of text - which is why I condensed all the core information and used a lot of imagery to go with the text. I made it a one-pager to make the website a journey, encouraging users to keep scrolling and learn more.
The Doors are a band from the 60's and a majority of their visual content is in black and white, which is why I decided to use a grayscale theme. If a section requires a sub-section, I give them contrasting background colours - the main section gets a white background and the sub-section gets a black background.
To compliment the simplicity of the design I used only one font, with different font-weights: Josefin Sans, with a sans-serif fallback. The font is easy to read was designed to have a vintage feel.
The website is structured in an intuitive way, using common web design conventions. The navigation bar is sticky with a logo on the left and the links to the right. Since it's a one-pager, it's important to have the navigation visible at all times. Headings are used hierarchically within their respective sections.
The content is split up into clear sections, divided by a parralax image to keep the design interesting. Each section is built with a different layout containing several elements.
The website consists of five main sections with four sub-sections:
- The 'Home' section, introducing users to the website with a hero image and headline, telling users what the website is about
- The 'The Band' section, covering The origin story
- The 'The Band Members' sub-section, containing a small biography for each band member
- The 'Greatest Hits' section, containing their greatest hits along with a short description
- The 'Discover More Music' sub-section, where a Spotify API is embedded to provide users with more songs to listen to
- The 'Legacy' section, informing users about The Doors' legacy
- The 'Legacy Events' section, covering three events that cemented The Doors' legacy
- The 'Contact' section where users can submit suggestions or questions
- The 'The Doors Office and Recording Studio' section, where users can find the old office and recording studio location of The Doors with the embedded Google Maps API
- HTML
- CSS
- Gitpod
- Github
- Git
- Balsamiq
- Google Fonts
- Adobe Photoshop
- Adobe Illustrator
- Font Awesome
- Favicon.io
- ImageOnline Grayscale Tool
The website has a total of five sections and 13 features.
- The official The Doors logo is used and placed on the left as is conventional
- The navigation bar is sticky, meaning it will always be at the top of the page no matter how far you scroll down
- The navigation bar is responsive and works on all screen sizes - the menu turns into a mobile-friendly 'hamburger' menu on screens with a width of 850px and less
- Covers user story 8 and 13
- Shows a picture of the band to introduce them to users
- Picture changes depending on screen size, making sure all band members fit in on any screen size
- Features the following text on top of the image to clearly state the purpose of the website: "A tribute page to the legendary band: The Doors"
- Covers user story 10
- To divide the different sections on the website, multiple background images have been used to keep the design interesting
- The images move at a different speed than the rest of the content when scrolling, creating an aesthetically pleasing effect
- The hero image is also a parallax image
- Informs users about how and when the band came about
- Informs users about what set them apart from other bands at the time
- Informs users about the origin of the band name
- Contains images of each band member along with their name in a
- Images increase their size and become slightly transparent when hovered over
- Images take users to their corresponding short biographies if clicked on
- Covers user story 1, 2 and 3
- Sub-section of 'The Band'
- Uses black background to contrast the main section
- Informs users the band members and their role in the band
- Covers user story 2
- Introduces users to The Doors' greatest hits with three Youtube videos and accompanying descriptions
- The videos are placed within elements and have use 's to semantically organize them
- Covers user story 3, 4 and 15
- Sub-section of 'Greatest Hits'
- Uses black background to contrast the main section
- Has the Spotify API embedded to encourage users to listen to more songs than just The Doors' greatest hits
- The Spotify logo can be clicked to open Spotify and take users to The Doors' Spotify page
- Covers user story 4, 5, 14 and 15
- Introduces users to The Doors' legacy
- Segue to the 'Legacy Events' section
- Covers user story 6
- Contains three notable events that contributed to The Doors' legacy
- The three events have their own accompanying image and use a black background to contrast the main section
- Covers user story 1 and 6
- Provides users with a way to contact the website owner
- Covers user story 8 and 12
- Sub-section of 'Contact'
- Uses black background to contrast the main section
- Has the Google Maps API embedded to show The Doors' old office and recording studio location
- Covers user story 7
- At the bottom of the page as is conventional, using the same color as the nagivation bar for consistency
- Contains social media links to The Doors' social media pages, with corresponding icons
- Covers user story 9
- Displays a custom 404 error page, keeping the user in the flow of the website
- Provides a means for the user to easily return to the main website
The HTML of the website has been validated using W3C's Markup Validation Service. Both of the pages pass with no errors or warnings.
The CSS of the website has been validatus using W3C's CSS Validation Service. It passed with no errors or warnings.
The accessibility of the website has been measured using the Wave WebAIM web accessibility evaluation tool. Both of the pages pass with no errors.
The performance of the website has been measured with Google Lighthouse.
Screenshot of index page accessibility evaluation
For my index page, the 'Best Practices' score of 92 can unfortunately not be increased - the Youtube videos I embedded on my website have a SameSite error, which has to be fixed on Youtube's end.![](docs/validation/index-lighthouse.jpg)
The website has been tested on multiple physical devices without any issues:
- Desktop PC
- MacBook Pro 15"
- Google Pixel 6 Pro
- Samsung Galaxy S10
- Samsung Galaxy Note 10+
In addition to the physical devices, the website has also been tested without any issues by toggling all the different device options in Google Chrome's Developer Tools under the Device Toggling section.
The website has been tested without any issues on the four browsers with the largest userbase (as reported on https://gs.statcounter.com/browser-market-share):
- Google Chrome
- Safari
- Microsoft Edge
- Mozilla Firefox
- As a user, I want to learn what The Doors achieved as a band.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
The Band | Navigate to the 'The Band' section | Find information about the band | Works as expected |
- As a user, I want to learn who the band members are
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
The Band Members | Navigate to 'The Band' section and scroll down to 'The Band Members' sub-section | Find information about the band members | Works as expected |
- As a user, I want to find out more about The Doors' music
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Greatest Hits | Navigate to the 'Greatest Hits' section | Find information about The Doors' songs | Works as expected |
- As a user, I want to have control over the video and audio.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Greatest Hits | Navigate to the 'Greatest Hits' section | Be able to watch videos that I can pause, change volume and put on fullscreen | Works as expected |
Discover More Music | Navigate to 'Greatest Hits' section and scroll down to 'Discover More Music' sub-section | Be able to listen to songs that I can pick, pause and change volume | Works as intended |
- As a user, I want to easily find The Doors’ Spotify content
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Discover More Music | Navigate to the 'Greatest Hits' section and scroll down to 'Discover More Music' sub-section | Be able to find The Doors' Spotify page | Works as intended |
Footer | Navigate to the footer | Be able to find The Doors' Spotify page | Works as intended |
- As a user, I want to learn about The Doors’ legacy
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Legacy | Navigate to the 'Legacy' section | Find information about The Doors' legacy | Works as intended |
- As a user, I want to know where The Doors recorded their music
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
The Doors Office and Recording Studio | Navigate to 'Contact' section and scroll down to 'The Doors Office and Recording Studio' sub-section | Find out where The Doors recorded their music | Works as intended |
- As a user, I want to be able to contact the website owner
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact | Navigate to the 'Contact' section | Be able to send a message to the website owner | Works as intended |
- As a user, I want to know The Doors social media accounts so I can follow them.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Footer | Navigate to the footer | Find social media links | Works as intended |
- As the website owner, I want the purpose of the website to be clear immediately
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Hero Image | Navigate to the 'Home' section | Find out what the website is about | Works as intended |
- As the website owner, I want to provide a responsive website for all devices.
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
The entire website | Open website on different devices | The website works on any device | Works as intended |
- As the website owner, I want users to be able to contact me for questions or suggestions
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Contact | Navigate to the 'Contact' section | Be able to send a message to the website owner | Works as intended |
- As the website owner, I want users to be able to go to any section of the page easily, no matter where they are
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Navigation Bar | Use the navigation bar | Be taken to the section I click on in the navigation bar | Works as intended |
- As the website owner, I want to embed API’s to enhance the user experience
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Spotify API | Navigate to the 'Greatest Hits' section and scroll down to 'Discover More Music' sub-section | Find an embedded API | Works as intended |
Google Maps API | Navigate to 'Contact' section and scroll down to 'The Doors Office and Recording Studio' sub-section | Find an embedded API | Works as expected |
- As the website owner, I want to encourage users to explore The Doors’ music
Feature | Action | Expected Result | Actual Result |
---|---|---|---|
Greatest Hits | Navigate to the 'Greatest Hits' section | Provide users with The Doors' greatest hits | Works as expected |
Discover More Music | Navigate to the 'Greatest Hits' section and scroll down to 'Discover More Music' sub-section | Provide users with more music to listen to + a link to their Spotify page | Works as expected |
Footer | Navigate to the footer | Provide users another link to The Door's Spotify page | Works as intended |
Bug | Fix |
---|---|
Sticky navigation bar overlaps in-page anchors when using navigation menu | Add scroll-padding-top property to * and set value equal to navigation bar height - link to commit |
On smaller screens the website would show a horizontal scroll bar with empty content being displayed on the right | Add overflow-x property to body element and set value to hidden - link to commit |
On mobile devices, the website would still show a horizontal bar despite the overflow-x property set on the body element | Wrap all the body content in a div (#site-wrapper) and add overflow-x property with a value of hidden to this element instead of the body element - link to commit |
Footer was not on the bottom of the 404 page due to lack of content | Add position property to the footer element and set the value to absolute, then add bottom property and set the value to 0, but only to the footer element in the 404 page (hence the #footer selector) - link to commit |
404 page would not display any style | Change permalink from /404.html to 404.html due to my folder structure - link to commit |
This website was deployed using Github Pages with the following steps:
- Go to your Github Repository
- Navigate to the 'Settings' page
- On the left hand menu under 'Code and automationo', click on 'Pages'
- Under 'Source', click on the 'Branch' dropdown element and set it to your main branch (in my case, this branch is called 'main')
- Click on 'Save'
- Refresh the page and you will be provided with a link to your deployed Github Page.
If you want to fork this repository, follow these steps:
- Go to the Github repository (https://github.com/vkleer/CI_PP1_TD)
- Click on the 'Fork' button in the top right corner under the navigation bar
If you want to clone this repository, follow these steps:
- Go to the Github repository (https://github.com/vkleer/CI_PP1_TD)
- Click on the 'Code' button above the list of files
- Select your preferred way of cloning, I recommend using the 'GitHub CLI' option
- Under 'GitHub CLI', click on the copy button to copy the clone command
- In you IDE, open Git Bash
- Navigate to the working directory where you want to clone this directory
- Paste in the clone command you copied and press the 'enter' key to create the clone
Images that are not referenced below are created or owned by the developer.
- hero-image.webp from Mubi.com
- hero-image-tablet.jpg from Laut.de
- hero-image-mobile.jpg from The Doors official Youtube channel
- bio-jim-morrison.png from The Doors' official website
- bio-john-densmore.png from The Doors' official website
- bio-ray-manzarek.png from The Doors' official website
- bio-robbie-krieger.png from The Doors' official website
- greatest-hits-image.jpg from Twitter user @crockpics from The Doors' official website
- legacy-image.jpg from Tumblr user frxzentears
- legacy-image-tablet.jpg from Tumblr user frxzentears - I increased the image height in Adobe Photoshop to better fit smaller screens
- american-prayer from Amazon.de
- alive-she-cried.jpg from Wikipedia
- doors-movie.jpg from IMDB
- contact-image.jpg by Craig Baker from The Historical Marker Database
- contact-image-tablet.jpg by Craig Baker from The Historical Marker Database - I increased the image height in Adobe Photoshop to better fit smaller screens
- the-doors-logo-white.png from Wikipedia - I turned the logo white using Adobe Photoshop
- favicon.ico by Joel Brodsky from Holden Luntz Gallery - I cropped the image using Adobe Photoshop and used favicon.io to turn it into an .ico file
- The text that I used in the 'The Band' section comes from The Doors' Wikipedia page
- The text that I used in the 'The Band Members' section comes from The Official The Doors' website
- The song descriptions on the 'Greatest Hits' section are snippets from their respective Wikipedia pages - Light My Fire, Riders on the Storm and The End
- The text that I used in the 'Legacy' section comes from a Rolling Stones article by Mikal Gilmore
- The event descriptions on the 'Legacy Events' section come from The Doors' Wikipedia page
- The HTML and CSS for the responsive navigation bar was inspired (not copy and pasted) by a Medium article from Liz Faria
- The solution to my sticky navigation bar overlapping my in-page headers was found on Stack Overflow and posted by Adrian Garner
I would like to thank:
- The Doors and all individual band members for inspiring me in many ways, including creating this website
- My mentor Mo Shami for providing me with advice and guidance for this project