The Monkees

User-Centric Frontend Development Milestone Project

The is my frontend-only website for a 1960’s rock band known as 'The Monkees'. The targeted audience were mainly the fans and for them to be able to use the site to access music either through an archive collection or any latest sounds available.

Other features include band availability for private bookings and a new social media presence and the latest news to keep all updated with current events. This will bring an array of benefits as everything will be able to be achieved by a click of a button, such as getting into contact or viewing the latest music.

Table of contents

• Design
• Technologies
• Features
• Testing
• Deployment
• Status
• Inspiration
• Media
• Acknowledgements
• Contact

Design

When coming up with the design of the site, the concept was to make it easy and user friendly with quality interaction between a fan and their favourite band.

Also for the viewers I wanted simplicity and not overcrowding them with lots of information but at the same time providing them with appealing and relevant content. This also includes young and old viewers who are not very computer savvy but will still be able to manoeuvre around the site with ease.

Technologies

• Cloud9
• HTML
• CSS
• Bootstrap (4.3.1)

Features

List of features ready and Todo's for future development

• Feature 1- Bootstrap navbar which collapses in mobile view.
• Feature 2 - Modal with a popup window which appears in centre screen
• Feature 3 - Responsive grid images when gallery link is selected in Navbar.

To-do list:

• Improvement to be done 1 - Add a carousel feature as a menu option. To give it a more advance look with more option to choose from.
• Improvement to be done 2 - Instead of single scroll page add 4-5 pages with more features and animation enabling a more pleasurable UX for the viewer.

Testing

The aim of the site through user interaction was accomplished. The website provided simple yet eye catching design and all required information was available to choose from. In the Navbar section you had the main headings which, when clicked took you to the section through specific 'id' which was linked to each heading.

A Model was added to the news section and also when clicked opened up a dialog box or popup window that was displayed on top of the current page. Every link opened up a new tab whether the information was available to view or not, just to be able to make it feel like a professional website.

This site was tested across multiple browsers and different mobile devices. When testing the site in responsive mode some images were not responding well to smaller screens sizes and were overlapping, which made the website out of place on smaller screens. This was causing the site to look visually unattractive. The bug fix was to set the height of the images in CSS to 'Auto' and also in media queries certain height and font-size were reduced to requirement, this enabled them to respond on smaller devices.

Under the connect section if you tried to submit the email section without having entered anything in the box an error message will appear stating 'Fill out this field'. Also if you tried to enter anything that was not an email address then also you would see a error message stating 'Enter an email address'.

All buttons had a subtle changes in color to my desirement when hovered over them. I also changed the site in responsive mode under music section, I removed the iframes for the videos and another music card was added titled 'Audio'. This would give you the option to listen to their music in Mp3 format, the reason for this was the iframes made the mobile view very unappealing with too much clutter. The extra card added a more visually more desirable look.

All code was validated using the websites 'W3C Markup Validation Service' and 'W3C CSS Validation Service', links to the websites can be found under Acknowledgements section.

Deployment

To be able to view this product you can access through Github pages, which update automatically with each new push to the repository or alternately you can view it here.

If accessing through GitHub you can git clone it directly from the master branch - https://github.com/Shabbar786/User-Centric-milestone-project in the editor of your choice.

Status

Project is complete and in goodworking order. All initial tasks set up are completed and acheived. Due to this being a static frontend-only project some buttons and links will not be working.

Inspiration

This project is for educational use only, the project was inspired for the better development of my career and to do something which I enjoy and and improve at the same time.

Media

All images were taken from the websites below:

• Site1, Site2, Site3, Site4,

• Site5, Site6, Site7, Site8

Merchandise images were taken from these websites.

• Hat, T-shirt, Car

Acknowledgements

• My responsive Image Grid code was mentored around this site.

• Majority of color codes used for the webpage including social media icons were also taken from this site.

• Websites for my code validation were done on these sites W3C, and W3C/CSS

• Box shadowing for my news section was taken from here.

Contact

Created by Mohammed Shabbar, contact me on [email protected]