MODULE 3 PROJECT - Code Institute Full Stack Developer Diploma

Monkees Website

This website is designed to give original fans of the band "The Monkees" the opportunity to take a trip down memory lane and listen to some of their tracks (In the Discography Page) and also to look over some of the old videos of their songs and the Television Series "The Monkees" which was the starting point for the band (In The Videos Page).

It is also a tool to introduce the band (In the Band Section), their songs and the TV series to a new generation of fans. There is also a page that allows any fans, new or old, to request the chance to book the band for an event (via the Book & Sign Up Page). Using this last page they can also request to be added to the mailing list to be kep up to date with any new releases or concerts etc.

See Brief.doc in my Repository

UX

As part of the development process User Stories have to be collated. For this project I created some user stories relevant to this website as follows:

Existing Fan (Inspired By My Dad): "As a fan I want to be able to look up information on the band members, and to listen to some of the songs that I enjoy".

New Fan (Inspired By My Children): "As somone interested in older music pre 80's, I'd like to see the band perform, and listen to some of their tracks"

Potential Customer (Inspired By Neighbour) "As a potential customer, I'd like an easy way to contact the band to make a booking and to be sent information of upcoming events".

I also produced wireframes of my website before starting:

See my repository's file list:

Wireframe-band.pdf Wireframe-book.pdf Wireframe-disc.pdf Wireframe-video.pdf

Which are located in the Wireframe directory.

Features

Header: 1. The header contains the main nav bar, which allows the user to navigate between each page. Footer: 2. The footer contains the social media links, allowing the user to navigate to the band's social media pages in each of the most common sites. The Band Page: 3. This page introduces the members of the band and gives a little bit of information about each member. 4. Each Member's photograph is a link to their own Wikipedia page which gives more informaton if required. The Videos Page:5. This page allows the user to click on videos and watch clips of the Monkees songs and from the TV show. The Disc Page: 6. This page allows the user to click on a song from the Monkees back catalogue, it also provides information about the song and the album that it was on. Book & Signup : 7. This page allows the user to give their details, including their email address, to make a request to book the band. 8. This page also allows the user to give their details, including their email address, to sign up to the Band's Newsletter. 9. For convenience features 8 & 9 can be completed together, to prevent user frustration.

Features Left to Implement

			1.	Provide an online booking feature to allow the user to look up the band's commitments and to physically book the band.
			2.	Provide an open forum so that users can add in their own videos etc to increase the material available.

Technologies Used

			1.	CLOUD 9		- All the HTML/CSS was edited using CLOUD 9.

			2.	HTML 5 		- The base page has been created in HTML5.

			3.	CSS 3		- The pages were styled using CSS3.

			4.	BOOTSTRAP	- Bootstrap was used to provide fleible layout patterns across the page using the grid system.

			5.	FONT AWESOME- Font Awesome was used to provide relevant icons for social media and to give the Nav Bar extra visual identity.

Testing

Each new feature had been tested after each stage of development within the CLOUD 9 environment. This has included:

			1.	Checking layout after each set of changes.  
			2.	Checking the menus to make sure that they navigate to the desired page and indicate that they are on the correct page.  
			3.	Checking the footer links to social media to make sure that they navigate to the Monkees page on the relevant site.
			4	Checking that the band photos navigate to the relevant page on Wikipedia.
			5.	Checking that the Sign-up features do not allow blank input and only allow valid information like email address etc.
			6.	Checking that all of these features work on, each breakpoint, across screens sizes from small to x-large.

After deployment the site has been tested for the above on:

			1.	iPhone 5s on portrait screen.
			2.	iPhone 5s on landscape screen.
			3.	iPad Air 2 on portrait screen.
			4.	iPad Air 2 on landscape screen.	
			5. 	Hanns-G 20" widescreen monitor.

Issues:

			1.	The Submit in My Booking Page Turns Blue after clcking it, and stays blue until you re-enter the page
			2.	In Some Browsers the glaze effect on my main mavigation bar is blue.
			3.  The HTML validator threw up three "erros" that I couldn't solve:	
				i.		An error with my input labels on the booking page
				ii.		An error with my inputs on the booking page
				iii.	An error with multiple class attributes on the same line, in my main menu, which wouldn't work any other way.

Deployment

This project has been deployed via GitHub at https://keefm6776.github.io/monkees-website/index.html.

Whilst deploying my project I had issues with all my file references because I did not make them specific enough to work when moving over to GitHub, even though they worked perfectly in Cloud9. This was just a case of including the website name at the beginning of the path.

Credits

Content

			- The information used in my project has been taken from Wikipedia.  (https://en.wikipedia.org/wiki/The_Monkees)

Media

			- The photos used in this site were obtained from the band assets provided by the band.
			- The album covers were obtained from Wikipedia. (https://en.wikipedia.org/wiki/The_Monkees)
			- Additional video clips were obtained from Youtube
			- Additional audio clips were downlaoded from Youtube

Acknowledgements

			- I received inspiration for this project from The "Whiskey Drop" project in the course for using a "Hero" image
			- I received inspiration for the nav bar from CSS course notes.
			- I received inspiration for styling the booking page from www.w3schools.com
			- Last But Not Least, Thanks To The Monkees For Recording Some Great Songs!!