This website is a HTML and CSS technology created site created using bootstrap, googleapis fonts and styles. I have used Git and GitHub for version control.

The site is to showcase the Monkees photographs, music, video, advertising gigs and event performances such as weddings and other events that users may be interested in.

Social links for the band that have been used in the project are their actual links.

https://www.facebook.com/TheMonkees/ https://twitter.com/monkeesofficial https://www.youtube.com/user/themonkees

The website is aimed to fans old and new, for fans that want to be kept informed of the bands new music and tour dates, link to their social media, listen to the bands songs, see photos and generally keep in touch.

Users can navigate the landing page index.html to the bands social media links and even sign up for new music and tours. From the landing page the user can navigate to contact.html where they can sign up to book the band for events, they can navigate to listen.html where they can see the band video (header) and listen to the band songs - 4 songs listed, the user can also navigate to gallery.html where they can see various photographs of the band.

In designing the website I wrote up some rough ideas /Design_Process/monkees_plan1.jpg /Design_Process/monkees_plan2.jpg /Design_Process/monkees_plan3.jpg Link to balsamiq wireframes: https://balsamiq.cloud/svob6q6/pweeugf/rEBD0?f=N4IgUiBcCMA0IDkpxAYWfAMhkAhHAsjgFo4DSUA2gLoC%2BQA%3D;

The Assets of this project - music and photos were provided for by code institute. Since starting the project the links to the credit of who provided the Assets to CI have since been removed.

I made sure the website had responsive design as part of the ux and looks good on mobile devices as well and tablets and laptops/pc. I have test the view of the responsive design by inspecting the page and then toggling between mobile and pc and it looks good.

This is the landing page that the user sees when they arrive. From here the user can navigate to the other sections of the project - contact, gallery and listen. The landing page also provides as previously mentioned the ability for the user to sign up for new music and tour dates before they are released to the general public. The bands social links are showcased on index.html and they point to the bands social media accounts.

I kept the headers the same throughout the website for ease of navigating back to each section. The contact.html page provides a form for the user to complete to sign up to book the band for events.

The photographs provided in the gallery were Assets provided by Code Institute for the milestone project. This area is where the user can click on a photo to enlarge it. I used the code from https://codepen.io/nebo/pen/ONXejO courtesy of nebo to style my gallery.html and css.

The music in this section, 4 songs, were provided by Code Institute to be used on the milestone project. The user can listen to the bands songs by selecting the audio function on the page.

Get in touch section - allows users to sign up by adding name and email to get placed on mailing list when new music and tour dates come out.

Plans for additional features to be implemented in the future: Features Left to Implement - online shop to sell band merchandise and additional styling to the songs on the listen.html page. Another feature idea - a video.html page where users can see more of the bands music videos. Technologies - future tech to use for a more creative website and better ux - JavaScript and Jquery.

The project uses HTML as the project main technology and CSS to style
AWS as the project framework to create the files: Assets, CSS, Images, Video, Design_Process, contact.html, gallery.html, index.html, listen.html and README.md Git and GitHub are used for version control, I pushed my project from AWS to Github to save new features and code. I regularly saved my work and ensured it worked after it was saved each time.

I conducted UAT after each push to GitHub and after each re login to AWs as well as once deployed. I tested by individually selecting each feature and ensuring that the page was rendering correctly with all expected code working as intended.

On the contact section to 'hear it first' make sure that the name and email are required before user can sign up. The social media links all work and direct the user to the correct sites. All menu tabs such as Home, Contact, Gallery and Listen are working and directing the user to the correct area of the site and pointing to the intended section.

The contact form to sign up for band performances at weddings at other parties, make sure that the name, email and even details are required before user can submit form. Ensured that the user can navigate back to each section of the website - home, gallery, listen.

The gallery page shows the photographs showcased with nice effects, and once the photos are clicked on they enlarge and are showcased in the center of the page.

Ensure that each of the 4 songs listed playback and download when clicking on the vertical ellipsis and that the option to download appears the header works and that the video plays in the background - credit to The header I added by using code from bootstrap - https://startbootstrap.com/snippets/video-header/. Since the video that was provided in the project notes does not render I selected my own video to use: https://archive.org/download/Monkees_Im_A_Believer_Video

I tested the following browsers for compatability success: IE, Chrome, Firefox, Edge, Mozilla.

I found it difficult to resolve the problem of the original video provided for by code institure to work with my code, although the video plays on my laptop it would not work when added to my code, this issue was reported by many other students on the course as shown in the slack pages for code institute. I found it quite confusing that the project layout and sylabus changed 2 weeks into the project. When I started creating the website there was a lot of information on the project ideas section which was later removed to be made more generic. I was not able to link or give credit other than to mention CI and not the actual sources.

As a fan of the band I wanted to be able to sign up to a mailing list to be kept up to date with new music and tour dates.

As an event planner for weddings and other large parties I wanted to be able to contact the band to find out availability for my clients.

Deployed through GitHub https://github.com/lolalongo11/monkees cloned through GitHub, I used the following process to save and push my work:

git add . git commit -m "vatious updates" git push origin master

Yoni lavi - README.md template https://en.wikipedia.org/wiki/The_Monkees - About section I used the code from https://codepen.io/nebo/pen/ONXejO courtesy of nebo to style my gallery.html and css.

Code institute project sylabus Monkeesphoto2 was used from https://ultimateclassicrock.com/monkees-debut-album/ Monkeesphoto1 was used from https://www.billboard.com/articles/columns/rock/8499485/monkees-peter-tork-best-songs https://archive.org/download/Monkees_Im_A_Believer_Video - video provided on course did not work and so I embedded 2 videos from You Tube on the listen.html page.

Photos in this site were obtained from Code institute project syllabus Video in the listen.html page was used from https://www.youtube.com/watch?v=_N9Lkpt6SrY and https://www.youtube.com/watch?v=xvqeSJlgaNk

Inspiration for the layout of this project was taken from the resume mini project we did in the previous section. I roughly followed the outline and guidance of the material we learned in the resume mini project and took inspiration in the layout.

I used the code from https://codepen.io/nebo/pen/ONXejO courtesy of nebo to style my gallery.html and css.

For help with the Audio element I went to https://www.w3schools.com/tags/tag_audio.asp.