The Monkees - My First Milestone Project

The website is about a 1960's music band called The Monkees. In this project I would like to showcase my knowledge of HTML & CSS. The site is broken down into seven sections, Home, News, Music, Videos, About, Tour and Contact Us. Each section gives an array of information, for the existing fan-base and for newer fans to explore. Whether it's listening or viewing current and back catalogue material or maybe just to interact with other like-minded fans through a various choice of social media channels, this website allows the user to indulge themselves. As with everything, there is always room for improvement and I am only too happy to take advice or instruction to better this project to whomever would like to contribute.

UX

I would like to direct you to the UX directory above where you will find the Strategy, Scope, Structure and Skeleton (wireframes).

This website is for the existing fan base and also for a newer cohort of fans too. If it's just to reminisce to listen or view the band's back-catalogue material, or even if new fans have been intrigued to listen to some more, the site is easily accessible and navigation is smooth and true for either user to manoeuvre around. The site has a fresh modern look with easy on the eye colours text & fonts that stand out, but not too much.

The Monkees, being the first ever TV manufactured acting boy band came from a time were funky music and colours were the norm so I feel with the colours & fonts used, this website establishes the mature, refined look that they portray today, without the far-out colours of their heyday.

I've used some shadow effects for smooth transition & a hover effect over the buttons. I've also made the transition from section to section as smooth as possible with some smooth scrolling, so moving through the navigation features is effortless. There are plenty of sections available to the user to gain whatever knowledge they require.

There is also a link to buy some current material or tickets for up and coming shows, if the user wishes to do so. I have created a Contact Us form if the user were to require the services of the band for a private function or they just want to sign up for the newsletter.

Also with the band currently trying to promote their exposure on Social Media, there are plenty of Social Media platforms to choose from, whether it's Facebook, Twitter, Youtube or Instagram, they are all catered for and only a click away.

Features

First and foremost you have seven different areas to navigate. The Navigation bar contains all the links for the website. The Latest News area and the Footer contains the various Social Media Links. Each Social Media link is a working link connecting to each platform.

1. Home: The Home section is self explanatory, it takes you back to the beginning or top of the page, although the sticky navigation bar also keeps the user attune as to where they are and where they can click or scroll to, to find their way around.
2. About: This area gives a short bio and a picture of each band member.
3. Music: In here the user can indulge in some classics and can hear some soundbites from yesteryear.
4. Video: This area allows the user to view videos of past and current tracks.
5. Tour: This area describes and informs the user of concert dates, venues and also allows the purchase of tickets for the required events.
6. News: This section will keep the user up to date with the latest and most current band news.
7. Contact Us: If the user requires the services of the band for a function, they can fill out the form and submit it, to contact the band. This area also provides a facility to sign up for the Newsletter, if the user would like to receive regular updates, news, competitions, offers etc. They just insert their email address with a short message with their request.

Future plans include:

• The set-up of more regular newsletter updates (currently every 2 months) we would like to get that down to 1 month if we can.
• A new fan section, where young and old can meet and interact to share their stories and experiences of the band.
• A new feedback area where fans can offer advice as to where we can improve or enhance their experience whilst visiting our site.

Technologies Used

• HTML5 was used as the markup language for the site.
• CSS3 was used to style the website.
• Bootstrap 3.3.7 for the main layout, along with Flexbox.
• Font awesome was used for some of the social media icons.
• Google Fonts was used for different text/fonts required.
• Cloud9 & PyCharm (PyCharm was used too but only towards the very end of the project as there were ongoing technical issues with Cloud9) these were used as the IDE.
• Git & Github were used to commit repositories to, again so the code can be viewed or edited or stored. It was also used to deploy the website.

The list of frameworks, languages & libraries used were:

HTML: https://www.w3schools.com/
CSS: https://www.w3schools.com/css/
Bootstrap: https://getbootstrap.com/
Font Awesome: https://origin.fontawesome.com/
Google Fonts: https://fonts.google.com/
Cloud9: https://aws.amazon.com/cloud9/
Git: https://git-scm.com/
Github: https://github.com/

Finally, a lot of hours researching on Google were required also, but https://www.w3schools.com/ https://css-tricks.com/ & https://www.youtube.com/ were also a huge help with their tuition too.

Testing

Each area of the site has been tested & appears to be working well. The user should be able to achieve their goal as the site intends, depending on whatever they choose to do when they visit. I have used Dev tools in Google Chrome to test the responsiveness of the site on different devices small and large and the site appears to render well on different screen sizes *(see below, I found some issues)
Each function on the music player plays the mp3 tracks as it is designed to. The track can be played, stopped and the volume can be adjusted to your liking, or muted if that is your requirement.
When the videos are clicked in the video area, they too work as they should.
The link under the Christmas Album takes you to another website where you can purchase the album, that works well.
Furthermore, I have used W3C Code Validator https://validator.w3.org/nu/ to verify there are no errors in my HTML and CSS. I have tried to keep the code as semantic as possible too.
I have yet to test the site out on any other browser other than Google Chrome and Android, so it has not been tested on Edge, Safari or IOS.

Issues:

A bug or issue I did come across whilst I was testing was, the navigation bar didn't reduce or respond as I thought it would when the screen size is reduced from 992px to 768px, the brand logo seems to stay above the navigation links for some reason. I am currently looking for a solution to this.
Another issue I came across was the background image isn't responding well in portrait mode but seems okay in landscape mode on most mobile devices, again, I am in the process of rectifying this.
Another thing I came across when testing was the hamburger menu on a mobile device is not collapsing as it should after clicking a link in the drop-down area.

Deployment

I deployed the project using Github pages and the link to the website is: https://bren08.github.io/the-monkees-milestone-project-no.1/

Credits

Contents:

The text used for the About section was taken from Wikipedia, each article used was a shortened bio of each band member.
https://en.wikipedia.org/wiki/Micky_Dolenz
https://en.wikipedia.org/wiki/Michael_Nesmith
https://en.wikipedia.org/wiki/Davy_Jones_(musician)
https://en.wikipedia.org/wiki/Peter_Tork

Media:

Some of the photos obtained were from the assets provided in a Github repository provided by Code Institute. https://github.com/Code-Institute-Org/project-assets/tree/master/stream-1/band-assets
Some other photos were obtained from Google images and are solely used for my project only on an educational basis as a student.

The mp3 files were obtained by converting Youtube videos to mp3 format for the music player, again only used for educational purposes.
The videos are embedded from Youtube directly.

Acknowledgements:

I would like to thank the good members of Code Institute Slack channel for their help and advice as they gave me some guidance as to how to improve the UX of the site.