Giter VIP home page Giter VIP logo

sixtiesband's Introduction

The Monkees Website

I built this website to showcase the talents of the Monkees to fans all the world. It gives an insight into the band members, displays many different songs, has a bookings page for users to book the band for special occasions and gives fans a way to buy tickets to gigs on the upcoming tour. It also has a little taster of some their songs, so you can listen to them. I have designed this website in such a way that is user friendly and easy on the eye

UX

The purpose of this project is to create a static (front-end only) website for a 1960's rock band who have around 50 years' experience of performing live at numerous events around the world. The target audiences for this website are fans of the Monkees and potential fans who would like to use the site to see and hear clips from their back catalog, and any new material as it becomes available.

The website allows the band to showcase their music and publicise their availability to perform at events.

My goal in design was to deliver an easy to navigate website allowing users to easily access the information they require. The band performing has been used a background on more than one occasion as this could be hold the fans attention.

To deliver the bands request for user of the website I incorporated the below

  • Audio clips for visitors to listen to some of the band's songs
  • Video files so the visitors can view the band performing
  • A bookings page so users can book the band for various events
  • Tour information and ticket booking page to allow users buy tickets for upcoming gigs
  • Photo files for fans to become familiar with band
  • Information about the band and it's members, to give the user an overview of their lives
  • Social media links for users to follow to stay up to date with any news the band may have
  • Ticket book page opens on new tab and main website remains open

Wireframe Mockups

These can be found at the below location

https://github.com/mickh14/sixtiesband/blob/master/MonkeesWireframes.pdf

Features

  • Background image of the band performing live
  • Button to allow users to book the band
    • Opens a model to take booking details
  • Videos - this allows the user to watch and get a feel of what the Monkees are like in action
  • Albums - this feature displays a selection of the Monkees songs.
  • Provides fans with details of upcoming gig and an opportunity to buy tickets
    • Ticket booking page has a form to enter details on purchase tickets
  • Carousel - this is a nice little display which allows user to view different pictures of the band
  • Articles with details on the band
  • Read More โ€“ modal that will proivde more details on each band member

All Pages

  • Navigation bar โ€“ allows users to navigate quickly between sections

Technologies

  • HTML5 - This was used as the layout to fully build the website
  • CSS - This was used to style the website
  • Bootstrap - This was used
    • To get the layout up and running quickly and also use grids to help with the responsive design
    • To support quick set up of Modals and carousal
  • JavaScript - This was used to add validation to forms

Testing

Testing Passed:

  • All navigation links direct the user to the desired location
  • All social links direct the user to the desired location
  • All buttons work as expected
  • Submit form with blank fields is not possible
    • The appropriate error message is displayed
  • I have thoroughly tested the usability of the website and was satisfied with the results

Devices Used:

  • Samsung Galaxy S5
  • Pixel 2
  • iPhone 5/SE
  • iPhone 6/7/8
  • iPhone 6/7/8 Plus
  • Iphone X
  • iPad
  • iPad Pro
  • Lenovo Thinkpad laptop

Browsers Used:

  • Chrome
  • Firefox

Validation:

All files passed validation testing at https://validator.w3.org/nu/#textarea

Deployment

My website is currently deployed on Github Pages - https://mickh14.github.io/sixtiesband/

I was able to deploy the website here by

  • Navigate to my repository in which all the files are saved
  • Clicking on settings at the top > Scrolling down to the heading GitHub Pages
  • Underneath the heading there is a source and I chose master branch from the dropdown which allows you to host the website on GitHub Pages.

Credits

Content:

  • The text for the section "About The Band" was taken from the Wikipedia articles
    • The Monkees
    • George Michael Dolenz Jr
    • Robert Michael Nesmith
    • Peter Halsten Thorkelson
    • David Thomas Jones

Media Content

The photos used on this site were obtained from https://www.pexels.com/

Acknowledgements

  • com - I used example here to troubleshoot a lot of issues encountered.
  • Bootstrap - I used
    • The carousel example on Bootstrap to set up my carousel of pictures on the Photo Album page.
    • The Modal example to set up Modals for
      • Booking the band
      • Read More

sixtiesband's People

Contributors

mickh14 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.