My page

The project I’ve designed is my first milestone project for the User Centric Frontend Development module of the Full Stack Developer Course. I’ve used Bootstrap as the main backbone language allowing functionality and responsive design which sits in an HTML shell with added elements of CSS to add styling. The page consists of 4 pages. They include a Home page, a Merchandise page a Touring page and a Contact Us page for the user to view.

The site includes a music video of the band performing one of their songs on the Home page. Information about the 4 members. Where you can see them playing live and how you can contact them if you wanted to book them to perform. There’s also interactive content and links to their own Monkees sites so you can review them in their genuine environment and not just within this mockup site.

• A site that can be viewed by old and new fans for everyone to enjoy

• A source of material where you can find some information about The Monkees where they’re playing and how you can interact with them.

• Nice UX design that is easy to follow and engaging.

On the Home Page, a deep grey colour navigation bar sits above a striking black and white image of the band performing in concert. The navigation bar has 5 headed titles. One is the title and also a link back to the home page as well as 4 other titled links taking you to the other site pages.

Below the image are 4 individual paragraphs and a button underneath each one. The paragraphs contains a short piece of information about each band member and you'll notice they line up with the relevant member in the photo.

The buttons underneath displays the members names and clicking on each one brings up a modal card with an image of that band member and some more information. You'll notice when clicking on the modal button, along with the image, there's colour to the background and a designed centered close button.

Further down below the band paragraphs, there’s a playable video of their unmistakable classic hit ‘Daydream Believer’ which was one of their biggest songs. As a bright and colourful video, it stands out so you focus and watch the video without distraction.

Then at the very bottom there are three social media links which take you to their Facebook, Twitter and YouTube pages respectively. The link images are from Font Awesome and are on each page for consistency.

This page again has the large black and white image below the navigation bar. As you scroll down, you'll see 8 individual paragraphs divided into two lines of four. In each paragraph, there's an image of either a record or a poster that can be purchased.

There's also an Order button which when clicked, a Modal card is displayed with an image of the record or poster for purchase. For the records, there's a track listing and for the posters, there are sizes orders which you can get a copy off. The print could be for your wall or as a post card. The record modal boxes are displayed with blue background to match the blue 'Order Here' buttons and the posters Modal card have a green background to match their green 'Order Here'buttons. In the Modals, there's also a designed close button again correspondig in colour to the rest of the content. Below these 8 images, there is again the social medial links with the Font Awesome icons.

A page designed allowing fans to contact the band for either a booking or just to say Hi!!

Underneath the black and white image, there's a grid system set of 3. On the left, there's a paragraph with some info about the band and a blue booking button. Clicking on here brings up a fully functional booking form within a Modal card. You can add an email address, choose how many hours you'd like the band to play. You can choose the event such as a wedding or a party and also add extra imformation before submitting.

Then a colourful image of the band in their youthful days stands out in the centre of the page. Then, there's a third column with a message from the band. They love to hear from their fans and using the 'Get In Touch' button, you can do that to send a message and say hello. Tell them how their music speaks to you and how you've been a fan of this outstanding band. A designed close button sits in each Modal card. The social media links complete the page.

This band has been touring for over 50 years and even as a twosome, they still have the passion to do it. The usual image spreads across the page below the Navigation bar and below the image sits 3 columns again. Staying consistent with the rest of the site, there's 2 paragraphs of information on each side of an image of the band playing live.

Below the paragraphs, there's 2 Modal content buttons. Clicking on the 'Australian Tour Dates' button brings up a Modal card of their Australian dates and the same can be seen in Blue for the 'American Tour Dates' Again, each Modal card has a blue and a green background to tie into their respective buttons and staying the same throughout the website. A designed close button can then be found at the bottom.

I made the website for the fans and tried to make it look up to date with easy to use functionality. I also like to think it could be a good base platform website as you can link here and then go on to other pages to find more in depth information, opportunities to purchase memorabilia and follow the band as the remaining members continue to tour. I wanted the site to be easy to use for all users of all ages and so to:

• Showcase the band

• Allow the user to follow them, purchase items or arrange private bookings

• Nice design that allows each user to move around the site comfortably. This is designed for fans of all ages.

• Clean, clear and easy to use.

• Using a scrolling image method with a fixed element, the band is shown in all their glory in black and white as the initial image and as you scroll down each page, you can find out more and look at products regarding the band.

• My initial design was all done by hand with a layout in mind. When I first started my project and spoke to my Mentor, I had various ideas of how I wanted the page to look with a strong background image to showcase the look of the band. Showing togetherness and them at the height of their career. The black and white image provided from course material I found to be perfect, it’s clean, crisp and there seems to be passion behind the photo.

• The movement of the page is subtle but sharp and the static image against a moving page adds a professional element to the site.

• The Monkees will always have older fans naturally due to when they were popular and so this site has been developed with that in mind. A user of any age could easily find their way around and the pages aren’t overloaded with information. There’s short simple info pieces about the band members for a user but the option to find out more is available via the social media links. Newer fans can use these links to get to each page and so YouTube, Facebook and Twitter page are available to find tour dates, hear their music and purchase merchandise direct.

Interactivity has been a key feature for the website. There's working Modals on each page which are accessible via buttons. The Modal card that appears then contains a new snippet of inormation that refrences the band. Also, there's a working playable video on the homepage for their classic hit "Daydream Believer"

Across the entire site, each page has Modal cards. Each card shows an image, information or a list. On the contact us page, there's a working form and a contact us page.

• HTML
• CSS
• Bootstrap 4
• Font Awesome

• To promote The Monkees as a band and showcase their music.
• To show them in their youth at the height of their career.
• The ability to contact the band and book them for events or purchase music and other merchandise from them.
• A simple UX design which opens new and old fans to the band so they can enjoy their music for the first time or fall in love with them all over again.

The customer goals of this website are:

Someone wanting to discover an era of music which will never be forgotten for the 60's still define music today. A person who still follows the band and would like to contact them and find out what they're up to and where they're playing.

The website has touring pages which showcases where they're playing. The website works as a portal as there are social media links on each page which takes a user to the bands more indepth pages.

Easy to navigate through.

Allows the user to work through the site with an easy to understand front end design. Provides the user the information they need without it being overwhelming. Booking forms and Get in touch forms are clear and concise if you wanted to book the band. Modal cards are easy to read through as well.

This project was developed using the Cloud9 development software and then stored in git using the Cloud9 platform.

The project was regularly pushed to GitHub repository https://github.com/Mattlister/The-Monkees-Monkees and published to GitHub pages using the GitHub settings.

I used and configured GitHub Pages to publish my site's source files from my master branch folder named the-band. This is in Cloud9 folder for all my Project Pages that were under that umbrella.

Publishing my source files is dependent on my site type as in what language the code is developed in and the site type I have in my repository.

To enable my GitHub Pages to be published, I have a master branch in my repository.

To access my GitHub Pages site's repository.

I access my repository name and click Settings.

Repository settings button

Use the Select source drop-down menu to select master or gh-pages as your GitHub Pages publishing source.

select-gh-pages-or-master-as-source

• Click Save.

• I then Published my GitHub Pages site from my docs folder in my master branch and published the source files from the docs folder in my master branch. I had to have a master branch containing all the data.

• GitHub Pages reads everything when publishing a site, including the CNAME file, from the /docs folder. Every change is updated so every step taken and evey edit is documented.

I used default commands to push to Github such as:

• git status when checking what needed uploading.
• git commit -m "" with the named update between the quotes for anyone reading what changes I made. A short piece of info helps understand
• the changes I make.
• git push -u origin master which then pushes my update and I then need to enter my username and password for security.

Testing information can be found in my TESTING.MD file

The text for each page was taken from the band members wikipedia pages and touring pages and then edited by Matthew Lister.

All the images used in this site were provided by Course Institite except for touring2 and touring3 which were taken from Google.

The video for my website was again provided by Code Institute as part of the course material.

Some CSS code and Bootstrap was originally taken from Bootstrap 4 and W3C Schools and then edited by Matthew Lister

I'd like to say than you to My mentor Simen Daehlin who reviewed my site and helped me towards restructuring the entire website with Bootstrap 4 rather than 3 and advising me on new code I should have been using. I also want to say thank you to Anna Greaves who one day reviewed my site and advised me that I needed to make some drastic changes, helped me to kick start those changes and advised me on speaking to Simen.

The content of this Website is for educational purposes only.