This is a project that allows users to access a library of The Monkees songs, photos, and gain access to the social media of the band from the 60's. The project is intended to showcase my first skills in HTML and CSS. Whilst utilising some additional plugins such as bootstrap.
I wanted to make it a streamline site, with users experience as my main focus, For Example as a fan of The Monkees I'd like to be able to hear their music, watch some videos and find out about the band. So i've incorporated an About and a Discography page.
For users wanting a booking i've made a contact us page and a list of "potential" dates for events around the globe, with a link through to a ticket site. This page also incorporates a carousel of opensource imagery of concerts to emote a feeling of excitement from a potential attendee.
For users wishing to contact and send fan mail, or to potentially book the band for a private function, i've included a contact form on the homepage.
My wireframes for this project can be found here https://app.moqups.com/r9Ff4a83jZ/view
This is my Navigation and Social link area, which allows users to manoeuvre around the website and to explore the bands youtube/facebook etc.. credit for the LOGO on the header goes to Wikimedia
The home page is very simple but I think quite eyecatching, a photo of the band and links to the rest of the website and a small amount of information about the other pages included. At current there is only a single photo on the carousel, i'd like to add more to this in future. credit for the photo here goes to Getty Images
This page is dedicated to the history of the members of the band and how they formed/ met etc. this is a page for the people that would like to know more about them rather than just listen to the band playing. 13/3 Added all information for the band and Band Members. 20/3 All styles for the about page uploaded to the new format. More media responsivity. credit for the information of "The Band" section comes from Wikipedia all information on this page comes from https://en.wikipedia.org/wiki/The_Monkees
This contain's a very simple photo carousel of events and a list of dates for a "tour" that will redirect the user to an external ticket site https://www.ticketmaster.com/the-monkees-tickets/artist/735678 credit for the images go to Pexels.com
This page contains media that allows the user to browse through a video, and quite a few songs with information about that song and the time period available next to the image placeholder. This page is intended for users to reminisce about The Monkees
I spent time looking at a few other bands websites, not the code just the way it was laid out and with some feedback from my mentor have scrapped this page on this version.
I have a few ideas of what to add to this project after I have submitted it, such as:
- A Calendar for the Events page,
- A more robust carousel on the front page,
- A better contact form,
- A more robust Discog library
I have utilised some additional technologies for this project.
- BootStrap - This is used to streamline the development process and make use of pre-existing technologies for grouping and spacing my pages.
- JavaScript & JQuery - These have been utilised for navbar transformations on media queries.
- FontAwesome - Has been utilised for Iconography for Social Media links and ease of access.
During building the website, I have done extensive testing to make sure that breakpoints and screen layout is as desired for my users. I have made sure that all my links correctly work and the links to externals always open a new browser as to keep my site the focus. For users wishing to watch and listen to the videos, the media controls all work properly and are easily visible on both mobile and large screen For the users wishing to read up more about the band, the links to the social media pages of the band all lead directly to the websites, and to WIKIPEDIA. For users wishing to contact the band, the contact form works properly and cannot be only partially filled. At current I cannot figure out how to send a "Complete" message.
During my writing of this project i've had many multiple individual pushes to GitHub and have successfully launched my project on GH Pages. Using this as a hosting site i've had the community on slack and a few family members go over my website to test functionality. I have deleted my original CSS and index.html from the deployed site, as they were unnecessary and you can see this in the branches. I believe my deployed code to be 100% the same as my development code at current (21/3/19)
credit for the images go to Pexels.com Rahul Pandit https://www.pexels.com/photo/grayscale-photography-of-people-holding-smartphones-while-taking-videos-1680412/ & Shelagh Murphy https://www.pexels.com/photo/grayscale-photo-of-people-raising-their-hands-1666816/ credit for the photo here goes to NBC & Getty Images https://www.gettyimages.de/detail/nachrichtenfoto/television-still-shows-the-popular-music-and-nachrichtenfoto/56704603 credit for the LOGO on the header goes to Wikimedia https://commons.wikimedia.org/wiki/File:Monkees-logo.png credit for the information of "The Band" section comes from Wikipedia all information on this page comes from https://en.wikipedia.org/wiki/The_Monkees
