This is The Monkees Website, The website is mobile first responsive built with bootstrap 4.

My goal in the design was to provide a place where fans and potential fans could book an event and have a sample taste of music and video's with links to THe Monkees social media aswell as showcasing images of the band.

Ux User Stories

• As a fan I want to watch and hear tracks from The Monkees so I can see what they have available.
• As a fan I would like to be able to book The Monkeys for a party that I am hosting.
• As a potential fan I want to be able to visit The Monkeys social media accounts.

Wireframe Link

-This site uses the scrollSpy feature in Bootstrap with an extra JavaScript function added to create a 'smooth scrolling' effect.The navbar is responsive to create a less crowded view on mobile eliminating any crowded space on mobile.

• Contact Form - allows users to send a message or request for available dates.
• Spotify - allows users to listen to the bands music and find further music on spotify.
• Video - allows users to watch video of The Monkees which does not automatically start on page load giving the option for the user to play video when they want.

• Calendar online booking which would advertise available dates for fans or potential fans to confirm.

-HTML -CSS -Bootstrap

• JQuery
• The project uses JQuery to simplify DOM manipulation.

The site has been tested using Chrome Developer tools checking responsiveness on various mobile, tablet and desktop. In this section, you need to convince the assessor that you have conducted enough testing to legitimately believe that the site works well. Essentially, in this part you will want to go over all of your user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals. . Responsiveness

1. Open .html file in chrome browser.
2. Right click and choose inspect.
3. hover over area to inspect styles and cick inspect again, alternatively click on page area in Elements to also show styles of the page area.
4. Configure styles css to desired format.
5. Update source css file and save for changed to be implemented.

• Contact form:

1. Go to the "Contact Us" page
2. Try to submit the empty form and verify that an error message about the required fields appears
3. Try to submit the form with an invalid email address and verify that a relevant error message appears
4. Try to submit the form with all inputs valid and verify that a success message appears.

Review of site testing for sections The overall feel and look of the site is themed well with good structure and easy to follow navigation. -Navbar - navbar transforms to burget menu on mobile -Home - Image looks well on desktop - does not shrink down well on tablet or mobile *Tablet and Mobile to be addressed. -About/ Gallery- about and Gallery on mobile and tablet and desktop with columns adjusting accordingly. -Video - Appears to big for user * Video size to be adjusted and listen to spotify to be placed in 2 cols in order to keep media together and provide a better user experience. -footer - Music plays, contact button works and social medial links work. However the colums appear to overlap

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/GILLIANMCD/User-Centric-Frontend-Development-Milestone-Project.git into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

• The text for section About was copied from --METV -- Wikipedia - Davy Jones --Wikipedia - Mickey Dolenz --Wikipedia - Michael Nesmith --Wikipedia - Peter Tork

• The photos used in this site are directly linked to source file throughout the site.
• Images are also used by assets provided by Code Institute.

• I received inspiration for this project from --YouTube Drew Ryan --W3Schools