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
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
These can be found at the below location
https://github.com/mickh14/sixtiesband/blob/master/MonkeesWireframes.pdf
- 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
- Navigation bar โ allows users to navigate quickly between sections
- 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
- 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
- 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
- Chrome
- Firefox
All files passed validation testing at https://validator.w3.org/nu/#textarea
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.
- 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
The photos used on this site were obtained from https://www.pexels.com/