THE WHO WEBSITE– Jonathan Donnellan

This is a website for the 1960s band The Who. I wanted to provide a responsive website that is of value to current fans and newcomers alike. I created a 3-page website containing music, photos, band information and a video along with booking information as requested in the project criteria. The band want to be able to connect with their fans, so I provided social media links on all of the pages. On the recommendation of my mentor I got rid off the ABOUT section and added a brief biography on the homepage.

UX

For this project I have used the Framework known as "Bookstrap v4.31 " for the layout and added my own CSS for the look of the website.

This website was created for old and new fans and potential customers The band wanted these groups to find what they were looking for on this website, On this website they can listen to the bands back catalog, learn about the history of the band, view photos of the band, book them for events and follow them on social media. These features meet the requirements set out by the client. Below you will find user stories: As a long time fan, I want to hear some of their old and new music and check out the latest pictures from their tour. As a new fan, I want to see them perform live, hear their classic music and learn a bit about the band. As a customer, I want to get in contact with the band so that I can book them for my wedding. As a fan, I want to be get up-to-date news about the band everyday without having to check the website, so I need social media links. Before creating my website I used Balsamiq to get an idea of the layout of the site. My wireframes can be found in the 'mockups' folder in the repository.

FEATURES

All pages on this site include the "Header" and "Footer". The Header consists of the navigation bar and logo. The Footer has links to social media pages and the official Who website. I chose 'red', 'blue' and 'red/black' for the main colors as they are used for The Who's actual logo. The colors used in this project were: "#ff4d4d" (Red, header/footer colour) "#251717" (Body colour) "#B0B0D1" (Blue, jumbotron and icon/button hover) I have imported the fonts from Google Fonts: "Merriweather" (For the main text, menu items etc). "Roboto" (For the heading). The font color is black in keeping with the colour of the font in the official logo.

INDEX.HTML

For the home page I wanted the user to get some information on the band, sample their music and their live performance and link to the booking page and their social media. The first section heading is a reference and lyric to one of their most famous songs and I took the text from the All Music biography of the band. The video is taken from You Tube and from a channel called Eagle Rock. The booking cards use images that were downloaded from Google Images and saved in the images folder.

The footer links are for Facebook YouTube and Twitter . The copyright link is a link to the Official Who Website .

MEDIA.HTML

In the media section I want the user to be able to listen to their classic and most recent music via The Who's Spotify channel They can scroll through 4 of their albums and play the music directly from the site.

The gallery consists of images downloaded from google images.

CONTACT.HTML

This section is where users can book the band to play at different events, They can access this page through the navbar or the cards on the homepage. Existing Features Feature 1 - allows users to book the band for an event by having them fill out a booking form Feature 2 - allows users to listen to the bands music via spotify Feature 3 – allows users to watch a live performance of the band on youtube via the link on the homepage Feature 4 – allows users to learn about the history of the band and their current relevance Feature 5 – allows users to view pictures of the band Feature 5 – allows users to find and follow the band on social media.

FEATURES LEFT TO IMPLEMENT

Another feature idea – allow users to get up-to-date news of the band Another feature idea – allow users to see a tour schedule

TEACHNOLOGIES USED

Below is a list of the technologies that I used for this project. Bootstrap Font Awesome Hover CSS Javascript jQuery HTML5 CSS

TESTING

I conducted tests on a wide selection of browsers/devices to ensure User's can successfully use the site and it's features. Tests conducted: Checking the responsiveness Making sure each link worked properly All images resize appropriately These tests included browsers/devices: Opera - laptop Mozilla - laptop Chrome - laptop and Android Internet Explorer - laptop I experienced some bugs when checking the responsiveness on google chrome. In mobile view there was occasionally a blank sidebar displayed. It only happened a few times and seemed to fix itself once I did a hard refresh.

DEPLOYMENT

Whenever I thought that a page was finished, I deployed it to "GitHub Pages" using version controls found here - GitHub All my commits and project be found here in the repository.

Credits

The code for the footer was taken from Bootsnip and modified to suit my site. All other material from other sources has been noted above Help was obtained through The Code Institute Slack and from my mentor.

ACKNOWLEDGEMENTS

I received inspiration for this project from the band The Who.