This website will provide a user friendly and responsive platform for the band to showcase to their fans their latest music and videos.

In addition, the website has the functionality to allow potential customers to book the band for an event, using the booking form, where they can also look through other customers' recent reviews.

This website has been designed with the mobile user in mind, providing clearly layed out pages, which allows the user to navigate easily to each page, depending on their interest and / or reason their for visiting the website.

The list of user stories below details each aspect of the user experiences of the website:

• As a new listener to The Monkees music, I wanted to continue the experience as easily as possible, which I was able to through the Home page with its great range of tracks.
• As a fan of The Monkees I wanted to view pictures and videos of them, I found pages with both of these on the website.
• If I or anyone wanted to book The Monkees for an event, it is possible to log on and to listen to some of their tracks and read the reviews before completing the booking form.

The main source used to design the website was by completing manually drawn diagrams which are included in this project project1_wireframes.pdf

The website consists of six pages which were designed to divide each feature into clearly defined sections. This is important not only for clarity, but also for mobile users who may only wish to view one of the features available.

1. The Home page is designed to provide an introduction to the band and showcase some of their latest music singles.

2. Following from this the Band Information and Pictures page provides more detailed information about the band and biographies for each of its members. A picture gallery of the band was included as part of this section.

3. The Albums page was created with a CSS Grid layout for easily formatted and responsive display of albums and their track listings. This page format can be easily added to with the release of new albums.

4. The Videos page provides a simple and uncomplicated section for users to enjoy music videos / performances and interviews from early releases right through to more current performances.

5. The Event Bookings page allows potential customers to submit a booking enquiry, which prompts them to input detailed information related to the required booking. It makes use of radio options to allow them to select an event type, and a list to provide options of locations for the event / proformance, as well as a date picker to allow simple selection of the required event date.

6. On the Event Bookings page the user can also read reviews from previous customers, where a star rating is also displayed for 3 headings: "Live Performance", "Audience Interaction", "Value"

7. The Merchandise page allows fans to browse through various items to buy, such as Albums, Singles, Clothing and Accessories. The website displays the items through the use of a reusable grid, so that additional items can easily be added to it. It is planned to have a link on each item image which would add the item to the user's basket, this has not yet been implemented.

• Latest Music - this section allows the user to scroll through a selected list of singles on the Home page and play any of these through the use of an audio bar.
• Band Pictures Border Image - A border image was used to customise and define each picture in the album.
• Albums CSS Grid Layout - Each new album can easily be added to the Albums page through the use of a simple CSS Grid layout. Grid areas are formatted to suit the layout of device used to view the page.
• Videos CSS Grid - This page also makes use of the CSS Grid Layout, and allows for more videos to be added using the simple structure.
• 'Other' Event Type Modal Box - The form on the Event Bookings page provides a text input box to enter another event type. If the 'Other' radio option is selected by the user, then a modal box will display a message prompting the user to complete the text box.
• Star Ratings - The reviews section on the Event Bookings page provides a simple and eye-catching layout for potential customers looking to get feedback from others who have already booked or attended a previous event.
• Merchandise CSS Grid - A simple grid model was used to display the collection of merchandise available to buy, which allows for easy inclusion of additional items.

• Merchandise - This page can updated to include a wider range of products, in addition some more categories can also be added conveniently through the reuse of predefined sub-headings and shopping grid layout. It can be further enhanced by adding a link to allow the user to add the item to their basket by simply clicking on the item image.

The following frameworks and technologies were used in order to create the style and functionality required for this website. A brief description of how they have been implemented in the project is detailed below:

• HTML5
  • HTML5 is the markup language used to structure and present the content of the website. It provided the features to allow for the use of audio and video clips throughout the website.
• CSS3
  • A CSS Stylesheet was used in the project to define the style of the page, such as colours, fonts and layout. It also contains additional settings used by the other elements of the page such as Grids and Flexboxes.
• Bootstrap
  • The project uses Bootstrap to provide a responsive grid through the use of predefined column structures. It is also used for a panel layout on the Home page.
• FontAwesome
  • Font Awesome was used to allow for easily customisable icons and highlight particular areas such as the menu bar and some headings.
• JavaScript
  • JavaScript was used to create the modal functionality on the Event Bookings page.

Extensive testing was completed throughout the development of each page. While working on each page it was initially designed to suit mobile layout first. Once this was completed, a media query for other layouts was then added and any modification for the device type needed was included.

Testing was carried out using the Chrome browser initially, and changing between the various screen size options. A Samsung Galaxy S7 also used to check the mobile layout on each design update. Following from this some additional testing was completed in both Firefox and Internet Explorer browsers. Finally a Nexus7 was used to review the layout for medium screen / tablets.

Specific testing was carried out in the following areas:

1. Audio Bars:
   1. Open the "Home" page and view the "Latest Music" sidebar
   2. Location of audio bar was originally set as relative
   3. This was subsequently changed after the CSS Grid was implemented for this section and it provide an improved structure inwhich the audio bar could be more easily placed.
2. Booking Form:
   1. Open the "Event Bookings" page
   2. Try to submit the form without the "Name" input box completed, an error message should be displayed requesting that the field is completed.
   3. Try to submit the form without the "Phone No." input box completed, an error message should be displayed requesting that the field is completed.
   4. Try to submit the form without the "Email Address" input box completed, an error message should be displayed requesting that the field is completed, and also that it is in the correct email address format.
   5. Select the Event Type radio option for 'Other', ensure that a Modal box is displayed which will prompt the user to enter text in the text box below which states that they should state the event type required if not listed.
3. Embedded Videos:
   1. Open the "Videos" page
   2. Try to play the embedded video file at the top of the grid.
   3. Try to play each of the embedded YouTube videos further down on the page.

The completed website is deployed on the web-based hosting and version control service 'GitHub'.

Throughout the project on completion of each section, the project was commited to the GitHub repository, this was in order to maintain correct version control.

There are no differences between the deployed and development versions, the project did however start off with a different layout / design concept, but this was quickly changed as it was unsuitable to the layout requirments.

• Biography
  • Biography.com article on The Monkees
  • Wikipedia article on The Monkees
  • Wikipedia articles on band members Davy Jones, Mickey Dolenz, Michael Nesmith and Peter Tork
  • Billboard.com article The Monkees' 10 Biggest Hot 100 Hits
• List of Songs
  • Wikipedia article List of songs recorded by the Monkees
• List of Albums and Album Information
  • Wikipedia article The Monkees discography
  • Wikipedia article The Monkees (album)
  • Wikipedia article More of the Monkees
• CSS Flexbox
  • A Complete Guide to Flexbox by Chris Coyuier
  • W3 Schools article and examples on CSS Flexbox
  • Flexbox Form Examples on Quackit.com
• CSS Grid
  • W3 Schools article and examples on CSS Grid
  • A Complete Guide to Grid by Chris House
• Border Image
  • YouTube Video Tutorial CSS3 border-image Property Custom Graphics Slice Tutorial by Adam Khoury
• Modal Box
  • W3 Schools article and examples on CSS Modals
• Embedded Videos & Embedded YouTube Videos
  • W3 Schools HTML5 Video
  • W3 Schools HTML YouTube Videos
  • W3 Schools Responsive Web Design - Videos

The photos and singles / albums covers were obtained from the following sources:

• Daydream Believer Cover
• Picture Frame Border
• Band Playing Image
• More of the Monkees Album Cover
• Last Train to Clarksville Single Cover
• The Monkees Album Cover
• The Monkees Band Picture 2
• The Monkees Band Picture 3
• The Monkees Band Picture 4
• The Monkees Band Recent Picture
• Band T-Shirt
• Long sleeved T-Shirt
• Blue Hat
• Red Band Button
• Tamborine
• Red Logo Keyring

• I would like to thank my Mentor Rick Gallegos, and also my family for their input, advice and support throughout the project.