Milestone Project

Introduction:

This website is my first milestone project within user centric front-end development, I have made this wesbite for the 60s band Monkees which concludes of an About page which highlights the bands history as well as the biography of each band members, The second page features some of their most popular music and the final page consists of a contact forum for those who would like to make future bookings with the monkees.

Content of the Page

1. The first page contains:

• The Navigation bar with the different pages
• The home page that i kept simple since it shows a nice picture of the band members

2. The second page contains:

• The first part is talking about the Bio of the band all together with a picture of all 4
• The second part shows the 4 different individuals with their pictures and their own Bios

3. The Thrid page contains:

• A famous video of them with the title of it
• And 4 different famous songs of theirs

4. The fourth and last page contains:

• The contact page for booking purposes

Testing

The page creation was a success as it went better than expected, I have reached the targeted final page and all the elements that were used functions accordingly.

I tested the website with the non fixed navigation bar and came to the conclusion that it's not user friendly due to the navbar disappeaing after scrolling and not giving the user the ability to jump back and forth between pages, therefore, I decided that a fixed navbar would be more suitable for eficency.

The text alignment was by default left alignment so therefore i decided to go with the center alignment after consulting with my mentor and going through the page.

In the section of About, i used the full width for the pictures and it appeared a bit squished therefore i went with the object-fit style class to make it take a normal shape.

I also tested the site throughout multiple browsers such as (Chrome, Firefox, Safari and phone browsers).

Features

I used the feature html {scroll-behavior: smooth;} to make scrolling throughout the page more smooth and user friendly and also used a collapsed navigation bar to make the site look cleaner on all devices.

UX

My intention is to create a website that is easy to comprehend and also appealing at the same time. I made sure that the reader has sufficient information about the monkees and their history together.

I wanted to give brief information about the type of music that the monkees provide and a few songs as examples.

Technologies

1. HTML
2. CSS
3. Bootstrap 4.7

Deployment

I deployed the page on github, check the this Link to see it!

Credits:

I used for the About section Wikipedia as a source to get the information about the Monkees.

In the Music section i used iFrame element and implemented a youtube video of the Monkees official YouTube channel.