This Project (The Monkees website) is a build of a frontend-only website using the technologies that I have learned throughout User Centric Frontend Development. The main goal is have a simple, responsive and attractive website for each visitor.

Users/visitors of the Monkees website instantly experience a clear, easy and intuitive feel of a catchy website. It's easy to navigate, simple and each section on every page is very explicit and easy to understand. If the user gets by the end of some page the logo will redirect straight to the top of the page. Also, informative buttons with new tab links have been provided at all times to ensure that the visitor still has access to the Monkees' website even though will get on another website, the user doesn't have to click a back button or to remember anything.

Initially, I got inspired by the BSB website. I have tried to use the images, logo, audio and video provided within the GitHub repo. I tried to keep it a clean and simple responsive website.

The font 'Aldrich' was chosen as the primary font to create the feel for an original and retro looking style for the band.

Colors were kept from the band's logo: Yellow and Blue with some black and white that gives a little simplicity but in the same time showing the classic's of Black and White style power.

Styles applied are simple and the function on each element assures the effect expected. Easy to be seen and to use, all buttons are styled to be accessible when each of them is clicked.

The Monkees website includes 5 pages:

Home, Events,Media, History and Contact

In the footer's section there are social media links to their Facebook, Twitter, Instagram, YouTube and Spotify pages.

If the Logo from the footer is clicked the visitor of the page will be directed to the top of the page. If the logo from the navigation menu is clicked then you'll be redirected to the Home page.

On the Home page there's a slider with 5 photos of the band (3 Black and White, 2 colored), followed by 4 songs in audio format and a call to Action Image with the the band's members with a Heading that invites the fans to listen for free these 4 tracks.

On the Events page the Fans can check the upcoming events for the next 3 months plus 3 clickable buttons: More Info, Tickets and VIP only.

On the Media pages there are 3 sections: Audio (with a playlist from Spotify), Video (an embedded video and the video from the daydream Believer song) and Gallery with a few images of the band members and album covers.

On the History page there is a short introduction history about the band followed by 3 cards with the options of discovering more about the band from 3 other websites, after the visitor chooses and clicks one of the buttons of each section. Here I have used wikipedia, the Monkees website and another website made by their fans.

The fifth page of the website (Contact) is a simple contact form page that after clicking the send button we'll reply a confirmation message.

Other materials used in the website include: https://en.wikipedia.org/wiki/The_Monkees

Logo and tour dates taken from the original website: https://www.monkees.com/

Gallery example from: https://www.w3schools.com/

This project uses HTML, CSS, JavaScript and various different technologies to work as helpers to the languages.

Cloud9 is an IDE used to develop the website.

I have used Bootstrap 4 after using a wireframe designed here: https://wireframepro.mockflow.com/view/M163bf022f0f6c816fac7df1bba868ff41553866205430

Bootstrap is used to create easier & cleaner responsiveness in addition with helping maintain padding and margins. It's also used to include modal features to the website to give it a professional look.

Google Fonts has been used to provide clean and eye-catching fonts to the website.

JQuery has been used to simplify DOM manipulation.

Font Awesome has been used to add icons to the website.

Jasmine is used as a TDD (Test-driven development) tool to automatically test JavaScript and JQuery code.

Jasmine-JQuery is used to ensure JQuery code can be run through Jasmine testing.

Used:

As a remote backup of code used in the project. As a remote server for another user to see the code used in the project. For users to view the deployed version of the website.

Was used to make sure that the code is clean and with no errors.

Testing process was made in different browsers such as Mozilla Firefox, Chrome and Safari to check the responsiveness of the website on several devices with deifferent display resolution.

On Home page I had some problems with the audio players and the call to action image, because from medium to extra large displays these 2 sections where one after the other and I want them to be side by side.

On the Events page I wanted that those 3 buttons to be centered and on smaller displays didn’t appear like that.

On the Media page I tried to embed several videos with the Monkees from YouTube but none of them didn’t work and just to test if I am embeding correctly I have added the one from Code Institute. It worked. It seems that the uploader(s)of these videos didn’t allow the option to be embedded so I have chose Vimeo instead. In the Audio section of the page I have inserted a playlist with The Monkees’ songs from Spotify. If the user would like to listen it will have to be registered (to have an account) on Spotify. If not, then a sample of 30 seconds for each song is still available.

On the History page testing the responsiveness went well using those Bootstrap 4 cards with linkable buttons.

On the Contact page initially the submit confirmation method with the “get” function didn’t work so I double-check if it’s okay, and I found out was my error of mistyping the code. I corrected that and it did respond accordingly

Contact form:

On the "Contact" page, I have tried to submit: the empty form and verify that an error message about the required fields appears the form with an invalid email address and verify that a relevant error message appears the form with all inputs valid and verify that a success message appears.

There were minor problems with the footer’s social icons because on smaller display they were keeping the same size and didn’t want to adjust to the screen size. All errors and problems were corrected using CSS classes or Bootstrap 4’s.

The project was built using Cloud9, through a built-in function called 'Git', I could commit the project & push it up to GitHub.

1. Log in to GitHub.

2. Select iiostefanos/the-monkees from the list of repositories.

3. Select Settings from the navbar near the top of the page.

4. Scroll down to where it says Github Pages, there is a subtitle labelled Source, click that and change the source to be master branch.

The page is automatically refreshed and ready for deployment, it can take up to 5-10 minutes for it to be viewable.

1. Click on the Monkees repository on GitHub! link.

2. Select the green button on the right-hand side named Clone or download and copy the clone URL.

3. Go into your local workspace and open up a new terminal (git bash).

4. You will need to be inside of the directory that you want to add the cloning to.

5. Type git clone and paste the URL you copied from GitHub and press enter. It should look like this:

git clone https://github.com/*username*/*repository*

The process of cloning will now be completed. For further information on cloning, visit How to clone from GitHub.

All Content has been thought of and written by the Developer.

From slider and index page: https://edition.cnn.com/2012/02/29/showbiz/obit-davy-jones/index.html https://elpais.com/cultura/2016/08/25/television/1472125039_465032.html https://gaffa.no/anmeldelse/the-monkees-good-times/ https://gaffa.no/musikk/nyheter/201101/the-monkees-bassisten-er-dod/

https://open.spotify.com/album/618fk3ITH2nXQtT0nTTZ84

https://vimeo.com/14851954

Alan O'Gorman, Charlie Jeffries-Tipton, Simen Dæhlin, Anna Greaves, tutor Haley Schafer and mentor Chris Zielinski for their help, support, time, patience and kindness.