Welcome to my first front end project, for this project I made a website for the Dj duo called The Chainsmokers to showcase their music, themselves and publicise their availability to perform at events.

The website will be used by fans and potential fans who wish to learn more about the Dj duo, see and hear video and audio clips of their music and any new material as it becomes available.

My project will provide fans and potential fans with information about The Chainsmokers, audio and video clips of their music and the opportunity to book the duo to perform at events such as weddings and christmas parties.

• As a fan/potential fan, I want to have the ablity to play audio from the website, so that I can listen to the duo's music.
• As a fan/potential fan, I want to have the ablity to play video from the website, so that I can watch to the duo's music videos.
• As a fan/potential fan, I want to be notified when new material becomes available, so that I can check out the new material out when it is released.

• Mobile Wireframes
• Desktop Wireframes 1
• Desktop Wireframes 2

• The "Home" page. This is a web page welcoming users to the website and giving a short description about the Dj duo with a link to "The guys" page to learn more about each member of The Chainsmokers.
• "We're The Chainsmokers" section. This is a section of the "Home" page that provides a video introducing the Dj duo.
• "The Guys" page. This is a web page showcasing both of the Djs and providing a short bio about each of the members.
• "Featured video" section. This is a section of "the guys" page to showcase one of their music videos and includes a link to the "listen" page to see more of their music.
• The "Listen" page. This is a web page providing audio and video clips showcasing the Dj duo's music.
• The available for hire advert. This is a section of the "listen" page which informs the user that the duo are available for hire to perform at events and includes a link to the "Book" to make a booking or enquiry.
• The "Book" page. This is a we bpage where the user can book the duo to perform at events such as weddings, christmas parties, etc.
• The image carousel. This is a section of the "book" page where users can view pictures from events that the duo have previously performed at.
• The mailing list sign up section. This is a section that is consistent across all of the pages, this section gives the user the opportunity to sign up for email notifications so they can be notified when new material becomes available.
• The music app links section. This is a section that is consistent across all of the pages, this section gives the user the opportunity to check out "The Chainsmokers" music on other music websites.

• "Watch" page. A web page specifically for the duo's music videos.

• JQuery js
  • The project uses JQuery js for the responsive navigation bar at the top of the page.
• Bootstrap js
  • The project uses Bootstrap js for the responsive navigation bar at the top of the page.
• Popper js
  • The project uses Bootstrap js for the responsive navigation bar at the top of the page.
• Bootstrap css
  • The project uses Bootstrap css for the bootstrap grid system, forms, navigation bar and image carousel.

I have tested the website extensively on all screen sizes. All the audio and video files work. I have tested all the forms included in the website and they all work.

1. Mailing list form:

   1. Go to the "Home" page, "The Guys" page, "Listen" page and "Book" 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.

2. Booking form:

   1. Go to the "Book" 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.

3. Audio files:

   1. Go to the "Listen" page
   2. Click on the play button and verify that the audio files play.

4. Video files:

   1. Go to the "home" page, "The Guys" page and the "listen" page
   2. Click on the play button and verify that the video files play.

My project is completely responsive to all screen sizes. On the "listen" page the audio players are placed underneath an image of the single cover with the track title, for desktop screens these are aligned to the left whilst on mobile screens every other one is aligned to the right creating a pattern.

I have pushed the code to a remote repository in GitHub where I have published the site on GitHub Pages.

Here is the link: https://dan360z.github.io/User-Centric-Front-End-Milestone-Project/

Designed and Developed by Daniel Field.

Credits Continued...

I received inspiration for this project from a music video from The Chainsmokers called "The Chainsmokers Paris ft. Emily Warren".