'The Who'- First Milestone Project

The aim of the 'User Centric' end of module project was to create a website for a band based in 1960's. The website should reflect coding skills gained in HTML and CSS. This website is created as a fan-page for 'THE WHO' fans showcasing; photos, audio clips and videos of performances by 'The WHO' which are embedded into the website. The website provides an option for fans to hire 'The WHO' for events such as weddings and Christmas parties if they wish to and to increase its fanbase.

User Experience

The website aims to inform users of when tours are taking place for the band and showcases there work in the form of video clips and audio tracks. The website has a navigation bar to direct fans who may wish to ; view photos of the band, listen to audio clips of the band, watch video performances of the band and who may wish to hire 'THE WHO' band for events such as weddings and Christmas parties through contacting them via the contact form. The footer section of the website provides links to social media where fans can follow the band on social media.

User Stories

As a potential fan I wish to find out who the band members of 'The Who' are.
As a potential fan I wish to listen to the music performed by 'The Who' and see which tracks I prefer.
As a fan I wish visit this website to listen to their music and follow them on social media.
As a fan I wish to check the availability of 'THE WHO' through the contact form as I may wish to hire them for wedding and Christmas parties.
As a fan I wish to find out 'THE WHO' bands world tour locations as I may wish to listen to and watch music played at these tours through the website.

Wireframes

My wireframes for the project were created on Balsamiq Mock Ups 3 software. The wireframes are saved as a pdf file. Each wireframe contains three mock-ups which include; desktops and for responsive design; tablets and mobiles. Wireframes

Changes noted from the wireframes to the actual website include;

List of titles for the; audio, gallery and video section implemented for the user to understand what these sections show.
Transparent container background colours were used in order for the user to still visualise the background image; the jumbotron on the first page is a transparent blue as well as the band members container on the hire us page in order to match the colour scheme , the tour dates container, sample tracks container, 'happy jack' video container and form container are all transparent black to match the colour scheme.

Features

The website contains five pages; Home Page, Gallery, Audio, Video and Hire Us pages. All five pages contain the same header and footer element with the; logo, social links and copyright message to maintain consistency of design throughout. All of the webpages also have the same background image of 'The WHO' for consistency as well.On large and medium devices, the audio clips, gallery photos and video clips on the website are arranged from left to right and on small devices such as mobile phone the audio clips are arranged vertically on the website.

The 'Home Page' contains the band's world tour dates so the user anticipates thier availability and follow their music through the tour. Tour dates are included as a table as well the Who's greatest hit- 'Happy Jack'.

The 'Gallery Page' contains various photos of 'THE WHO' band members for the user to recognise and view from their various albums.

The 'Audio Page' contains various mp3 audio clips of songs performed by the band.

The 'Video Page' contains you tube videos embedded in of performances of the band and the user can listen to and view these.

The 'Hire Us Page' contains a header caption which states the band are available for hire for all events. The website page contains a contact form which includes the fields; Name, Email and message and all fields are mandatory for the user to fill in before the form can be submitted through pressing the 'Submit' button.

Features Left to implement

The hire us contact form could be linked to a API once the JavaScript and Interactive Front-End modules have been covered.

Technologies used

HTML5
CSS3
Bootstrap
Jquery

Testing and Validating

The HTML and CSS3 codes were validated on WSC validator and no syntax errors were found. The website was tested at various screen sizes which include mobile and tablet devices. The 'tour dates table' on the homepage was found to be responsive on mobile devices, however the user would have to scroll across to visualise it completely as the table is too wide to fit on mobiles devices. Appropriate media queries were put into place to enable the webpages to appear correctly on mobile and tablet devices. The Hire Us contact form was filled out by me to check that the form is not sent till all the required fields are completed and a valid email address is inputted. The website was found to work adequately on Github and in responsive mode for tablets and mobiles.

The website has been found to be fully functional and has been tested on the following browsers:

Google Chrome
Microsoft Edge
Mozilla Firefox
Opera

The website was tested on the following devices and the website was found to display all the coded elements and attributes:

Desktop
Laptop with HiDPI
Laptop with MDPI
Pixel 2
Pixel 2L
Galaxy S5
iPhone 5/SE
iPhone 6/7/8
iPhone 6/7/8 plus
iPhone X
iPad
iPad Mini
iPad Pro

Testing User Stories

A user who is a potential fan or fan is able to visit the website and ascertain on the home page when the tour dates are scheduled. They able to grasp an opinion about the group and listen to one of 'The Who's' greatest hit - Happy Jack.4 The user as a potential fan/fan can view photographs of the band from a set era. The user as a fan is able listen to sample tracks from the 'The Who' on the audio page and see if they like the music and then view video clips of 'The Who's' performance both on tours (Isle of Weight Tour 1970) and performances at set venues on the video page and these sections. The user is able to follow the 'The Who' on through social media through the; facebook, twitter and YouTube links. The potential fan or fan can contact the 'The Who' band through the contact form on the hire us page in order to hire the band for events and check availability through typing a message in the 'message' section.

Deployment

The site was deployed on GitHub and locally on Cloud 9.

Git Hub Commits

Please note in error two initial commits were commited on the 28th and 29th October respectively. The 'initial commit' on 29th October should read 'Navigation bar and fontawesome icons added'.

Please also note on 20th November there was a merge conflict between the updated html and css pages and 'updated video heights and form field sizes' and as result extra commits were added due an error in contact.html file which was depoyed locally in Cloud 9.

Credits

Content

The basic design for the header, footer and contact form sections was taken from The Code Institute's Resume Project

Media

Background Image and Logo

The background image was taken from The Who's' Wikepedia Page. The Logo was taken from The Glide Magazine site.

Gallery

The photos from left to right were taken from the website as pertained to the link:

Videos

The videos from left to right were taken from you tube

Audio Images and Clips

The album covers include;

Who's Next
Squueze Box
Who its hard

The audio clips were taken from Sound Cloud

Band Member Photos

Acknowledgements

I would like to thank the The Code Institute for teaching me how to code using; HTML5, CSS3 and using the framework Bootstrap Version 3.3.7.

code-institute-submissions / milestone-project-9 Goto Github PK

milestone-project-9's Introduction