This is a simple band website for 'The Monkees' promoting their music and availability for gigs. You can view the website at project1-themonkees.firebaseapp.com.

This website showcases the music of 'The Monkees' and publicises their availability for gigs. Users can use the website to view, hear and purchase 'The Monkees' music, videos and photographs, as well as check out their upcoming tour dates. Users can also sign up to their Mail List, subscribe to their Newsletter and are provided with all Social Media links so as to follow them on different platforms. Event Managers can also use the website to book the 'The Monkees' for corporate and wedding events.

This website uses the AngularJS Framework to bind data to the view and control behaviour behind the DOM. It it styled using a mixture of Bootstrap and Flexbox.

Users can:

• Listen to music
• Watch videos
• View photos
• Sample and purchase music via iTunes
• Join Mail List
• Subscribe to Newsletter
• View upcoming gigs
• Book 'The Monkees' for commerical gigs
• Connect with 'The Monkees' Social Media presence
• Contact them directly via phone, email and Skype
• View the site easily from any device due to the responsive design with mobile use in mind

• An iTunes Search Bar that allows Users to input specific songs by 'The Monkees' and sample and purchase them.

• 'Previous Image' and 'Next Image' links on 'image.html' that Users can use to navigate through the Photo section easier.

• AngularJS
  • I used AngularJS to bind data to the view, handle page routing, create directives and use services to organize code and share it accross the website
• Bootstrap
  • I used Bootstrap to give my project a simple, responsive layout
• npm
  • I used npm to help manage some of the dependencies in my website
• bower
  • Bower is used to manage the installation of libraries and frameworks

I used a variety of methods to ensure the responsiveness of my website. These included:

• Mobile First Design

  • Mobile First Design is a fundamental part of designing for a multi screen world. I build this website with mobile space, functionality and utility as first priority.

• Bootstrap

  • I used the Bootstrap Framework to create tried and trusted sleek, responsive elements. For example, Bootstrap makes it simple to implement stylish a collapsible navbar which responds to screen size:
    
    Uncollapsed navabr on large screen
    
    
    Collapsed navbar on small screen
    

• Flexbox

  • I used Flexbox display for simple yet powerful design layouts that ensure responsiveness. Flexbox can come in very handy when you need to devise seemingly straight-forward designs (which easily become tricky using more traditional methods) with just a few lines of code. For example, in this project I utilized Flexbox to create a calendar using a gird of date 'notes'. Each section is held together and resizes with screen size thanks to Flexbox:
    
    Both Calendar Grid and Calendar Date Notes Created with Flexbox
    

• Media Queries

  • I spent a lot of time writing and re-writing Media Queries to optimize the responsiveness of my website based on screen size. It can be a meticulous and tiring process, but is more than worth it to have that perfect resize. Font sizes, relatively positioned elements, margins, heights and text alignments all caused trouble in keeping the flow of the website consistent on resizes and required Media Queries to iron out the kinnks.
    
    Media Page with a width of 1366px
    
    
    Media Page with a width of 390px
    

I used a variety of methods to test the responsiveness of my website. These included:

• Firefox Responsive Design Mode

  • This was an essential tool to testing the responsiveness of my website, Firefox Responsive Design Mode makes it fast and effortless to switch between screen sizes and devices.
    
    Firefox Responsive Design Mode simulating an Apple iPhone 6s
    

• Blisk

  • A browser for web developers, Blisk, comes prepacked with fully emulated phones and tablets. It shows real time changes to files so I could see exactly how the changes to my code were affecting my site.
    
    Blisk simulating an iPad Air Retina
    

• Testing In Different Environments

  • There is no simulator that could replace simply testing my website in as many environments as possible. Using as many different browsers and devices as I could get my hands on was key to weening out design flaws. Testing in Different Environments was a integral part of guaranteeing my website functions correctly for every User.

1. Firstly you will need to clone this repository by running the git clone https://github.com/meganduffy/Band-Project.git command
2. After you've that you'll need to make sure that you have npm and bower installed
3. You can get npm by installing Node from here
4. Once you've done this you'll need to run the following command: npm install -g bower # this may require sudo on Mac/Linux
5. Once npm and bower are installed, you'll need to install all of the dependencies in package.json and bower.json

npm install

bower install

4. After those dependencies have been installed you'll need to make sure that you have http-server installed. You can install this by running the following: npm install -g http-server # this also may require sudo on Mac/Linux
5. Once http-server is installed run http-server -c-1
6. The project will now run on localhost
7. Make changes to the code and if you think it belongs in here then just submit a pull request