Welcome to The Monkees.

https://noellebrowne.github.io/The-Monkees-webpage/index.html

My project is a website that has been based on a band called 'The Monkees' with years experince. I have created a 4 page website included with assets such as images and videos and links to social Media. My primary target is the fans who want the oppurtunity to use the site to view photos and videos from the band and also information on avaliablity for events such as wedding and christmas parties.

Git URL

https://github.com/noellebrowne/The-Monkees-webpage

UX

Use this section to provide insight into your UX process, focusing on who this website is for, what it is that they want to achieve and how your project is the best way to help them achieve these things.

This is a website created for users, my primary target is to achieve the goal of being able view music and photos of this band and also events taking place.

My website will be a 4 page website created with a homepage, music page, gallery page and a contact page. These page will allow me to achieve my goals.

• As a user type, I would like to create a page to view music.
• As a user type, I would like to create a page to view images for users to access on my website.
• As a user type, I would like to achieve a goal of creating a contact page for users to access on my website.

Wire frames I designed

Here I have included four wire frames from where I based the developement of my website. There is a Homepage wireframe,Music wireframe, Gallery wireframe and a contact wireframe. They are in the assets folder, inside a images folder under Wireframe photos.

My design process for me was to draw my wireframes and add them to my project.

Planning of my website:

When I decided to plan my website, I looked at artists that I thought would help me and give me an idea of a layout of what should be included in my page, for design,colour scheme, font sizes and the flow of my page. When I understood what needed to be the base of my website such as a homepage,gallery page,music page and contact page. I decided that I would draw my wire frames with a pen and paper for each of my webpages. I made a folder with my assets which were photos.

I researched at diffrent type of websites to look at diffrent colour schemes I could use as well as diffrent fonts and there sizes.Most band pages are well laid out and simple but easy to use and find your way around so I wanted mine to be user friendly. The most suitable font I thought was Roboto and sans serif as they are an easy font on the eye to read.

Features

Homepage

I have created a navbar on all of my pages to give acccess to my diffrent pages which are a Homepage,Music page,Gallery page and contact page. I have a title and a wecloming message on my homepage to greet users acessing the page. Below this I have an image included of the band playing at a event. I thought this was fitted to the page after the welcome message section. I have a section below the image message to state to users where the band have events. Also there is a little greeting message follwed by a button to listen to music which brings you to the music page. Then I have included is a footer with social media icons, I have included in all four pages which is white font and red background.

Music page

The navbar is included in this page so the user can access other pages while on this page. There is the name of the four songs featured at the top of the page befor the youtube clips. The music page is where the user can play four diffrent songs from the bands greatest hits through my page. These are youtube videos. A footer is also included.

Gallery page

Users are allowed to acces photos from the band and view them on this page.This is why this page was created.

Contact page

This page was created so that users could view the events. Also included was a sign up form and a contact form so the fans can contact the band.

Existing features

Homepage - allows users to acces every page on the website. Music page- This has a list of four songs aswell as four youtube videos that allow users to listen to music. Gallery page- This is a page that allows users to view photos of the band. Contact page- This page allows users to contact the band as well as sign up for news and book events.

For the future design, I would like to included a map of where the events are being held at for the users benefit. I would also like to include some more events that could be inlcuded in the website. I would include a video on the homepage of the website for users to access.

My Choice of technoloiges

My first page I created was my home page as that is the page that every user would first get access too. I added my navbar that listed out my pages avaliable on my website as displayed to view from left to right. On my homepage I listed the title of the band, there experince and a short fan welcome message to with a button leading to my contact page. I also listed the bands main funtions of what they are doing such as wedding, parties,concerts and fans as this was an aim of this project. I also included a photo from the assets I included was a picture of the band playing at a event with a message to the fans and an button leading to the music page as an option. My footer is a red colour with copy right details at the bottom of my pages and social media links. I used jumbotron as I liked the presentation it gives as my font and text stands out more. Also my containers helped layout my icons and my diffrent section this was the same for the rest of my pages that I created.

The second page I created was the music page. I used the same navbar accross all of my pages as well as the footer.On this page I decided to list out the top four selling hits that the band ahs released for the fans to see and then I added four youtube clips to the page that can be played. This page was finshed with my footer included is social media links.

The third page I created was the gallery page. This is started with a short message. I put the heading title as a red colour font as it stands out and the paragraph below as a black font. I also included a button that links too the contact page also. Below this Included photos of the band and members for users to see.

My final page is my fourth page and that was the contact page. I listed out the avaliable venues that could be booked for the band. This is was just a black font. I also included a sign up page as well as a contact form so users could send messages to the band with a booking or a personal message. This was finished with my footer with social media icons. I chose my icons which are Facebook,Twiiter and Youtube. I got my icons from the w3schools website websites under the how to section. These are Links to the facebook,twitter and youtube pages of The monkees band.

As I created each page I started with the navbar and footer and after that I added elements like buttons, links, diffrent secions, photos, music clips to make the page more vibrant. This is also why I picked strong colours to give my page a boost.

my navbar was from bootstrap it was used as I thought it was simple for users to use to link to diffrent areas of the site I picked red for the colour as it stood out. Navbar bootstrap link

my footer was from the how to section of the w3schools.com website it was a fixed footer and I used this as I thought it would look best at the bottom of my website pages which I coloued red the same as my navbar. Here is the link to where I got my footer from Footer link I added social media icons to it.

I included social media buttons for my navbar they were from Social Media Icons for Navbar

Also my contact form was from w3schools as it was Contact form link this form was put in my contact page to allow the user to contact the band to ask a question about booking a venue or a personal message they would like to send.

I also included a sign up form which I also got from Sign up form link

The glyphicons are from bootstrap i used a music icon,church icon and also a cocktail icon. I felt these tied in with my band page and also looked presentable on my page. Glyphicons link

I used a Mark up validator to validate my code.

I also used freeformatter to intendent my code.

My css was also beautified using css beautifier

Deployment of my project

My Deployment was done by opening a terminal and then by using the code git status first followed git add (I put in my file or image) git commit -m "message on what the update was" and the git push to the master branch followed by my username and password.

I deployed my page from github through github pages. I went to settings in my github repository and scrolled down to Github pages title and changed my source from disabled to master branch and clicked save. now my website has been deployed.

Testing process for my project

I tested my project everytime I included an item such as a new button, a link to a diffrent page to make sure that it was working correctly. I tested diffrent browser sizes as well as my navbars on each page. When I added my navbar to gallery at first it didnt work as I never closed it with a closing tag but I recorrected this error, it worked straight away. All the rest of my links worked straight away which I was pleased with. I used inspect to test my design as responsive accross desktop and mobile devices through google chrome as this worked most effective for me. I tested my website on diffrent computers with windows and safari.

      Testing of Button

 1. Go to the "Home" page
 2. Click on the "Learn more" button
 3. This button brings you to the "Contact page"
 
 
     Testing of Video clips
     
 1. Go to the "Music" page from the homepage.
 2.Click on one of the four video clips.
 3.This will load and play the song for the user.
 
    Testing of Social media buttons
    
    1.Go to the "footer" at the bottom of any page
    2. click on any of the social media buttons, Twitter,Facebook or youtube.
    3. It will be directed straight to site that you click on.

Credit

To all the different webpages I got my code which are Bootstrap website ,W3schools webpage,Stackflow website wordpress.com.

Content

The youtube clips were from youtube. Photos were from google.

Media

The photos used in this site were obtained from my assets and also google images. The Youtube Clips for my music page were from youtube. My social media sites are Twitter,Facebook and Youtube.

Monkees band Twitter link Monkees band Facebook link Monkees band Youtube link

Acknowledgements

for this project I got inspiration from artists websites and also The monkees album images I googled on google.com for my navbar and background colour for my pages.