Deployed Website

This project was created as an End Of Module Project for the Code Institute. The challenge was to create a front end only website for a band. The idea was to showcase the skills we've learned so far in HTML and CSS. This project was built as a fan page for followers of The Monkees. The intended purpose was to showcase the band's music and to inform users that they are available to perform at special events. It was also built with the hope of attracting new fans to the band.

My site attempts to achieve its goal by providing navigation links on the homepage, to photos of the band, and its members, a discography section containing some of the band's songs, an events section containing a list of concert dates, and a contact form for those wishing to hire the band. The footer contains links to their various social media accounts, as well as their YouTube channel.

• As a fan of the band, I would like to visit this site to listen to their music and follow them on social media.

• As a potential fan of the band, I would like to listen to their music, so that I can see if I like it.

• As a fan of the band, I would like to find out more about their availability for private performances, because I want to hire them for my wedding.

• As a fan of the band, I would like to find out more about upcoming performances, so I can attend one of their concerts.

• As a potential fan of the band, I would like to visit this site to find out more about the type of music they play, because I might want hire them for an upcoming event.

• Home
• About
• Music
• Images
• Events
• Footer

The site is a single scrolling page with five sections. The first page is the Homepage which contains a large background image of the band, a video of them performing one of their most well known songs and a Navbar at the top of the page with links to the various sections of the site. The navbar is collapsed on mobile screens with a small hamburger icon in the top right-hand corner. It is also possible to navigate through the site using the browser's scroll bar and the arrow keys on a desktop / laptop computer. Following the Home Page, there is an About section which contains individual images of each band member, their names and role within the band. The third section is the Music section, and this informs the viewer of the band's availability for private hire, as well as showcasing some of their work. The fourth section is a small image gallery which displays pictures of the band. The Events section follows this with information on any upcoming concerts that the band are performing. As well as this, there is a contact form allowing the user to get in touch with the band and make enquiries about their availability to perform at weddings, Christmas Parties, and other special events. Finally, the footer contains links to their social media accounts and YouTube channel.

• A 'Back to Top' button on each section of the site.
• Carousel or lightbox for the images

• HTML5
• CSS3
• Bootstrap
• JavaScript, for interactivity

I validated both my HTML and CSS code using the W3C validator. I had no errors or warnings in my HTML and no errors in my CSS. I examined my site in both Firefox and Chrome to check for cross browser compatibility. I also used the responsive design mode in both browsers examining my site at various screen sizes. In Chrome and Firefox I viewed the site on the following devices:

• Galaxy S5
• Pixel 2
• Pixel 2 XL
• iPhone 5/SE
• iPhone 6/7/8
• iPhone X
• iPad
• iPad Pro
• Laptop screen

I also filled out the contact form to ensure that it worked as it was supposed to. As well as this, I clicked on each link in my Navbar to make sure that I was taken to the relevant section.

I deployed my website via GitHub pages. I also deployed the code locally in both Chrome and Firefox.

I looked up the name of the band members, as well as the red colour for my h2 header elements, and the background-colour of the About and Images Containers on their own website. The information regarding the role of each band member was taken from the 'Band Members' section of the Monkees Wikipedia Page The JavaScript code to collapse the Hamburger menu was copied from here:

The images of the band and its various members, as well as the audio and video elements were obtained from Code Institute's git hub repo. The guitar image, which I used as a background for two of my containers I got from Pixabay. All images are for EDUCATIONAL USE ONLY.

The layout of my Homepage was taken from the Code Institute's Bootstrap Lesson and the code for my form was taken from the User Centric Design Resume Mini Project. The code for the Instagram colour-gradient was taken from the top answer at: https://stackoverflow.com/questions/37751375/instagram-new-logo-css-background and the YouTube red colour was obtained from https://www.designpieces.com/palette/youtube-hex-rgb/ The JavaScript code to collapse the Hamburger menu when clicked was copied from: https://stackoverflow.com/a/32336582 The code snippet to allow for smooth scrolling through my site I got from the W3C Schools