(Developer: Vilayat Kleer)

View the live website

1. Project Goals
   1. User Goals
   2. Website Owner Goals
2. User Experience
   1. Target Audience
   2. User Requirements and Expectations
   3. User Stories
3. Design
   1. Design Choices
   2. Colour
   3. Fonts
   4. Structure
   5. Wireframes
4. Technologies Used
   1. Languages
   2. Tools
5. Features
   1. Logo and Navigation bar
   2. Hero Image
   3. Parallax Images
   4. The Band
   5. The Band Member Images
   6. The Band Members
   7. Greatest Hits
   8. Discover More Music
   9. Legacy
   10. Contact
   11. The Doors Office and Recording Studio
   12. Footer
   13. 404 Error Page
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. Accessibility
   4. Performance
   5. Testing on Different Devices
   6. Browser Compatibility
   7. Testing User Stories
7. Bugs
8. Deployment
9. Credits
10. 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

1. As a user, I want to learn what The Doors achieved as a band.
2. As a user, I want to learn who the band members are
3. As a user, I want to find out more about The Doors' music
4. As a user, I want to have control over the video and audio.
5. As a user, I want to easily find The Doors’ Spotify content
6. As a user, I want to learn about The Doors’ legacy
7. As a user, I want to know where The Doors recorded their music
8. As a user, I want to be able to contact the website owner
9. As a user, I want to know The Doors social media accounts so I can follow them.

10. As the website owner, I want the purpose of the website to be clear immediately
11. As the website owner, I want to provide a responsive website for all devices.
12. As the website owner, I want users to be able to contact me for questions or suggestions
13. As the website owner, I want users to be able to go to any section of the page easily, no matter where they are
14. As the website owner, I want to embed API’s to enhance the user experience
15. 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.

Font Example

Font Description

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

Home/The Band

Greatest Hits

Legacy

Contact

• 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

Screenshot of Logo and Navigation bar

• 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

Screenshot of Hero Image

• 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

GIF of Parallax Images

• 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

Screenshot of The Band

• 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

Screenshot of The Band Members

• 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

Screenshot of Greatest Hits

• 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

Screenshot of Discover More Music

• Introduces users to The Doors' legacy
• Segue to the 'Legacy Events' section
• Covers user story 6

Screenshot of Legacy

• 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

Screenshot of Legacy Events

• Provides users with a way to contact the website owner
• Covers user story 8 and 12

Screenshot of Contact

• 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

Screenshot of The Doors Office and Recording Studio

• 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

Screenshot of Footer

• 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

Screenshot of 404 Error Page

The HTML of the website has been validated using W3C's Markup Validation Service. Both of the pages pass with no errors or warnings.

Screenshot of index page HTML validation

Screenshot of 404 page HTML validation

The CSS of the website has been validatus using W3C's CSS Validation Service. It passed with no errors or warnings.

Screenshot of CSS validation

The accessibility of the website has been measured using the Wave WebAIM web accessibility evaluation tool. Both of the pages pass with no errors.

Screenshot of index page accessibility evaluation

Screenshot of 404 page accessibility evaluation

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.

Screenshot of 404 page accessibility evaluation

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

1. As a user, I want to learn what The Doors achieved as a band.

Supporting Screenshots - User Story 1

2. As a user, I want to learn who the band members are

Supporting Screenshots - User Story 2

3. As a user, I want to find out more about The Doors' music

Supporting Screenshots - User Story 3

4. As a user, I want to have control over the video and audio.

Supporting Screenshots - User Story 4

5. As a user, I want to easily find The Doors’ Spotify content

Supporting Screenshots - User Story 5

6. As a user, I want to learn about The Doors’ legacy

Supporting Screenshots - User Story 6

7. As a user, I want to know where The Doors recorded their music

Supporting Screenshots - User Story 7

8. As a user, I want to be able to contact the website owner

Supporting Screenshots - User Story 8

9. As a user, I want to know The Doors social media accounts so I can follow them.

Supporting Screenshots - User Story 9

10. As the website owner, I want the purpose of the website to be clear immediately

Supporting Screenshots - User Story 10

11. As the website owner, I want to provide a responsive website for all devices.

Supporting Screenshots - User Story 11

12. As the website owner, I want users to be able to contact me for questions or suggestions

Supporting Screenshots - User Story 12

13. As the website owner, I want users to be able to go to any section of the page easily, no matter where they are

Supporting Screenshots - User Story 13

14. As the website owner, I want to embed API’s to enhance the user experience

Supporting Screenshots - User Story 14

15. As the website owner, I want to encourage users to explore The Doors’ music

Supporting Screenshots - User Story 15

This website was deployed using Github Pages with the following steps:

1. Go to your Github Repository
2. Navigate to the 'Settings' page
3. On the left hand menu under 'Code and automationo', click on 'Pages'
4. Under 'Source', click on the 'Branch' dropdown element and set it to your main branch (in my case, this branch is called 'main')
5. Click on 'Save'
6. 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:

1. Go to the Github repository (https://github.com/vkleer/CI_PP1_TD)
2. Click on the 'Fork' button in the top right corner under the navigation bar

If you want to clone this repository, follow these steps:

1. Go to the Github repository (https://github.com/vkleer/CI_PP1_TD)
2. Click on the 'Code' button above the list of files
3. Select your preferred way of cloning, I recommend using the 'GitHub CLI' option
4. Under 'GitHub CLI', click on the copy button to copy the clone command
5. In you IDE, open Git Bash
6. Navigate to the working directory where you want to clone this directory
7. 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