code-institute-submissions / themonkees-5 Goto Github PK

User Centric Frontend Development Milestone Project.

The main goal in creating this project was to create a clean and clear site which was able to showcase and meet the requirements of the client, The client required a site which was able to give some background information on the band and showcase their previous and upcoming work this has been done through this site using clear and concise development which allows the end user to easily navigate and find the details they require.

UX

The Client required a website in order to gain an online presence and promote and showcase their work in an online enviroment. The requirement given by the client is as below;

Their primary target audiences are their fans and potential fans who wish to use the site to see and hear clips from their back catalog, and any new material as it becomes available.

This has been achieved by the project by creating a simple to read website, navigation has been simplied to allow for the best user experience on both PC's and portable devices.

User 1

This User is looking to gain some information on the client

The project has been set in such a way that is would be easy for User 1 to browse the site and gain the information they require through clear and concise navigation elements

User 2

This user would like to listen to some of the clients previous work.

This can be achieved very easily with a seperate page containing a selection of previous work of the clients, information is clear some the user is easily able to see what they are listening to.

User 3

This user is looking to get in contact with the client regarding possible future work.

A contact us modal has been created and can be accessed on any page through the navigation bar this stands out and can easily be found by the user wanting to contact the client.

Features

Feature 1 - Navigation Bar - A clear and concise navigation element has been created allowing easy browsing of the site, This will collapse down on mobile devices allowing effiecient use of screen space. Feature 2 - Contact Us Modal - A Contact form has been include using a modal this can be found within the navigation element. Feature 3 - Image Carosel - A Carosel has been used to display past pictures of the client on the main page. Feature 4 - Footer With Socail Links - A Generic footer has beeen include on each page and contains links to social media sites the client has provided. Feature 5 - Images Of Band Member - Individual images of the band member have been include on large screens this will show 4 abreast 2 for medium and 1 on small screens to maxmise screen space. Feature 6 - Audio Table - A table containing clients records has been added this is a clear way to show audio files. Feature 7 - Video - A video has been embeeded into the site showing a previous performance of the clients.

For some/all of your features, you may choose to reference the specific project files that implement them, although this is entirely optional.

Additional features planned

A booking page to allow users to book the client for events

Technologies Used

JavaScript The project uses JavaScript for Audio Playback.

BootStrap This Project uses Bootstrap for layout templating.

Testing

Navigation Bar

Does the Page Load as Expected?

This has been tested across multiple screen sizes and mobile devices, the page loads as expected.

Do All Links Work?

This has been tested across all pages and each navigation link loads the correct page.

Does the Contact Us Modal Work?

Yes the Contact Us Modal loads across all devices and was tested as below.

Testing: Click "Contact Us" Button Try to submit the empty form and verify that an error message about the required fields appears Try to submit the form with an invalid email address and verify that a relevant error message appears

Footer

Does the Page Load as Expected?

This has been tested across multiple screen sizes and mobile devices, the page loads as expected.

Do All Links Work?

This has been tested across all pages and each navigation link loads the correct Socail Link.

Home Page.

Does the Page Load as Expected?

This has been tested across multiple screen sizes and mobile devices, the page loads as expected.

Does The Image Carosel work?

This has been tested the Carosel Scrolls the the images automatically and scales based on the screen size. The Forward and back buttons also work as expected.

Meet The Band Page.

Does the Page Load as Expected?

This has been tested across multiple screen sizes and mobile devices, the page loads as expected.

Are the images visible?

This has been tested the the images scale based on the screen size. This works across multiple screen sizes and mobile devices.

Listen Page.

Does the Page Load as Expected?

This has been tested across multiple screen sizes and mobile devices, the page loads as expected.

is the table visible?

This has been tested the the tables scale based on the screen size. This works across multiple screen sizes and mobile devices.

Does Audio Play?

Audio has been tested across multiple devices and plays as expected.

Watch Page.

Does the Page Load as Expected?

This has been tested across multiple screen sizes and mobile devices, the page loads as expected.

is the video visible?

This has been tested the the video scale based on the screen size. This works across multiple screen sizes and mobile devices.

Does Video Play?

Video has been tested across multiple devices and plays as expected.

Deployment

The Project has been deployed to GitHub Pages.

Credits

Content

All Text Content was coped from Wikipedia article https://en.wikipedia.org/wiki/The_Monkees, https://en.wikipedia.org/wiki/Micky_Dolenz, https://en.wikipedia.org/wiki/Michael_Nesmith, https://en.wikipedia.org/wiki/Davy_Jones_(musician), https://en.wikipedia.org/wiki/Peter_Tork

Media The photos used in this site were obtained from google