code-institute-submissions / milestone Goto Github PK

THE MONKEES.

This project created a four page website for the sixties pop band The Monkees. The purpose of the website is to publicise the band and to give fans information and images of the band in a layout that tries to ensure that the user knows that this is the website for the band. This is achieved with the use of a banner image across all four pages that gives the user the security of knowing that as they navigate from one page to another that they are still using the same website. The project uses the programming languages of HTML5 and CSS with elements of bootstrap framework to create four pages, these are the home page the about page the contact page and the video page. The home page shows the band and images of the band members with minimal text giving the user the information that the band is still active and continues to perform. The about page shows the band members individual images with an explanation of their role in the band and text explaining that they are available for parties and corporate functions. The contact page gives the user the ability of contacting the band with the user inputting their name and email address and a further text box to explain their requirements. The user will be given an error message if an invalid email is entered, or if no information is entered requiring the field to be filled out. The video page consists of a video of the band playing one their most famous tracks with user controls to play and pause video and to enlarge and decrease the video screen also four music tracks which the user can utilise the audio controls to play and pause the music tracks.

UX: A visitor to the website wishes to book the band for a function at the home page there is a highly visible link to the contact page the visitor clicks on this link and is brought to the contact page and a form to fill in with their contact details and text box to inform the band of their requirements. A visitor to the website who wishes to sample the groups music can find the video link that brings the visitor to the video page there is a sample video and four tracks for the user to sample. A visitor to the website wishes to find details on band members they can visit the about page by clicking on the highly visible about link where the user will get details of band members names and what part they play in the band i.e. vocals, lead guitar ,drums also text that explains that the band are available for parties and corporate functions. The social links located at the bottom of each page enables the user to access the YouTube, Facebook, twitter and Instagram pages related to the band.

Features: The pages consist of a banner image and content informing the user of the bands continuing activity. The navigation bar is large with four clickable sections to enable easy navigation through the pages of the site. The colour scheme is light and the same across all pages to maintain consistency of experience and a light fun feel that is more appropriate for the style of music associated with the group. The content level is kept to a minimum to enable a simple easy and understandable web experience.

Technologies used:

Cloud9: I used the cloud9 IDE to write and test code for this website. https://aws.amazon.com/cloud9/

HTML5: The project uses HTML5 to enable content to be placed on the pages. https://dev.w3.org/html5/spec-LC/

CSS: The project uses CSS to enable content to be styled and to be functionable for the user. https://www.w3.org/Style/CSS/

Bootstrap: The project uses the bootstrap framework. https://getbootstrap.com/

Testing:

Navigation bar: When clicked the home link brings the user to the home page. When clicked the about link brings the user to the about page. When clicked the contact link brings the user to the contact page. When clicked the video link brings the user to the video page.

Social links: When clicked the Facebook icon brings the user to the Monkees Facebook page. When clicked the YouTube icon brings the user to the Monkees YouTube page. When clicked the twitter icon brings the user to the Monkees twitter page. When clicked the Instagram icon brings the user to the Monkees Instagram page.

Contact form: The contact form consists of three input fields, First Name, last Name and email each of these fields requires input and the email field requires a valid email input. The text box enables the user to input text to enable the user to inform the band of the user requirements.

Screen sizes: When testing the site with chrome developer tools the site works well on large screen sizes, however tends to break at the midsize screen level, on the small screen mobile size the website works and functions with minor glitches.

Media querys: I have placed media querys for mobile, tablet and laptop in order to display content in a more user friendly way.

Deployment: Deployed to github pages from my github repository.

Credits: The video and photos were obtained from the Code Institute gihub repo. I received inspiration for this project from the Code Institute online lectures.