This project reflects on the lessons learnt to create a mobile-first responsive website as a priority for the 60's boy band The Monkees. The website contains information about the group and enables existing fans old and new to listen to some of the tracks that made The Monkees famous, a video snippet. Its main business idea is to create new members by the site’s “join the fan club” feature which has a pop-up and email request on appropriate links, and social media links. Furthermore, even though the band is ancient, they still perform and anyone can send a performance request.

In creating this website, I have tested its rendering to be fully responsive, on most well-known screen sizes for mobile and desktop. The “join the fan club” and “hire us” features require user input which then links to a “fan-sign-up” or “thank-you” page. These forms are not fully functional in terms of connecting to a live database as this is not included in the brief.

• Cloud 9 IDE
• Google Chrome developer tools
• Bash
• Ubuntu
• GIT
• GITHUB
• HTML5
• CSS3
• Bootstrap
• Javascript and JQuery via Bootstrap pre-defined code
• Fontawesome

Website was coded with the programs listed above in Cloud 9 IDE. A local GIT directory was used for version control and then uploaded to GitHub using Ubuntu / Bash script. The site was first uploaded to a GitHub repository and subsequently is now hosted live via GitHub Pages at: https://fion21.github.io/milestone-1/

Each page was tested locally and on GITHUB pages using Chrome developer tools, testing its functionality as well as look and feel (in landscape and portrait mode) on Galaxy S5, Nexus 5S, Nexus 6P, iPhone 7, iPhone 7 Plus, iPhone 8, iPhone 8 Plus, iPhone X, iPad, iPad Pro and responsive desktop. All links were tested along with music tracks audio controls and video player. The modal join fan club form and the hire us form was tested locally and remotely. Work based on other code. Only the modal fan club form code was re-used from the previous Whiskey Drop exercise. I modified its content and changed some of the code within it to reflect semantically what it was being used for. I also changed its action to point to a fan club thankyou page to confirm their action and increase user experience.

I am formerly a classically trained graphic designer, having those skills to help with the look and UX such as the colour scheme, branding and logos is something I am familiar with, but from this project once those are set in place I sought to move on to functionality as a website presence. Colour scheme: the colours were taken from the hues and colours found in the 1966 main group photo on the index page. What changed after the user design experience (UDX). I had originally planned on creating oval buttons for links, but after much issues with screen size alternations and the mathematical rendering, I chose what was available with bootstrap and also changed the colours to reflect the branding I created in the wireframe mark-ups. I also created a navbar branding colour scheme which is flush on most pages, except the main index page where the navbar is clear.

I felt that to include more album covers on the gallery page would ween off users’ interest, so I wanted to strive for a clean and simple look, by just putting the band members on the gallery page. I had thought to add a “carousel” and finally I have added this as a feature and I do believe it works well as it combines the band members' headshots and it still keeps a clean lines approach.

The text for most of the content was derived from Wikipedia at https://en.wikipedia.org/wiki/The_Monkees. In addition, the rest of the text and the punchy catchphrases and headlines were my own creation if not otherwise stated.

I researched other students’ and mentors’ projects who had work on slack to help with the overall grasp of the project, including the mini-project which was a cv website prior to the development for this project. Secondly I included a modal element, semantically adjusted from the previous Whiskey Drop lesson.

Main font via Google fonts (free) https://fonts.google.com/?selection.family=ZCOOL+XiaoWei

Ref: “icon.gif” “This classic guitar-shaped logo was the brainchild of Ed Justin, …“. In 1966, he paid designer/illustrator Nick LoBianco $75 to bring his nascent idea to life.” Sourced at 25/03/19 from https://www.bandlogojukebox.com/blog/2017/12/4/m1-the-monkees

Ref: “the-monkees-1966-publicity-photo.jpg”. Sourced at 25/03/19 from http://metrospirit.com/the-monkees-return/the-monkees-1966-publicity-photo/

Ref: “mn.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/mn.jpg

Ref: “md.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/blob/master/stream-1/band-assets/images/md.jpg

Ref: “dj.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/dj.jpg

Ref: “pt.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/pt.jpg

Ref:"album2.jpg" Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/album2.jpg

Ref: “cover.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/cover.jpg

Ref: “cover1.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/cover1.jpg

Ref: “cover2.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/cover2.jpg

Ref: “cover3.jpg” Sourced at 25/03/19 from https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/cover3.jpg

Ref: “The_Monkees_May_1967.jpg” Sourced at 25/03/19 from - https://github.com/fion21/project-assets/tree/master/stream-1/band-assets/images/The_Monkees_May_1967.jpg.jpg

If you found this code useful, there is a way to support me, this is a cool way to say thank you: