code-institute-submissions / wladcistudent-milestone_project Goto Github PK

Milestone project-1 for CodeInstitute

Milestone Project-1: User-Centric Fronted Development - Code Institute

For this first Milestone Project, the goal was to develop a frontend-only website for the famous band: "The Monkees". The primary goal is to make the website accessible for the fans that wish to use the website to see and hear the videos and clips of the band. In addition to that, the band wants a feature to publicize their availability to perform at events.

The project consists of 4 separate pages that cover the home page index.html (the first page), about.html page (page about the artists of the band), music.html page (the music portfolio), and booking.html page (the booking form).

#Demo

The website link can be found here.

#UX

My goal for the design was very simple: to make a colorful, intuitive and understandable website consist of 4 pages. I have chosen to use different colors for the website for the best user experience, since its a retro website.

On the first page (home-page) the user is able to easily navigate by scrolling through the page, going to different pages of the website, watch the video of the band and look throught the images. On the second page (about-page) the user could read extensively about the artists. On the third page (music-page) the user could listen to the audio files of the band. Eventually on the last page (bookings-page) the user could fill the form to book the band and ask for a quote.

#Technologies Used

For this Milestone Project, I have used the following technologies extensively:
• HTML 5
• CSS 3
• Bootstrap v3.3.7
• Font Awesome 4.7.0
• Hover 2.3.1

#Testing

In the header section, the user is able to scroll through the page. The website displays the band image on top. If a user clicks on the image it will always return to the main page. Below the image the user will find the navigation with the home section, about section, music section and bookings section. The navigation elements hover and are clickable that take the user to different pages of the website. This remains the same for all 4 pages.

The footer section remains the same for all the pages. The section displays information about the latest news subscription (hovers on "Subscribe" tested) , the social media icons created via font awesome and extensively tested (the icons hover and are connected tothe official pages of the band), subscription form with a button (the button is clickable and hovers) and a copyright area.

In the "Home" section the user is able to see the link to the booking page to book the band and get the latest quote (the button will take the user to the "bookings section"), to look over the four images of the band (the images hover when the user scroll below the page) and to watch the video "Day Dream Believer" ( The video starts by clicking on the video area)

In the "About" section the user sees a summary of the band and a summary of the artist of the band. Every member of the band has a profile picture with a background context.

In the "Music" section the user is able to listen to the audio portfolio of the band by simply clicking on the play button. the Audio files uploaded : Clarksville, Day Dream Believer, I AM A Believer and Stepping Stone. Also there are 4 images on the left side of the screen. (radius applied on the images)

In the "Bookings" section the user is able to fill in the form to book the band for different ocassions. The form is extensively tested on all browsers and contains following information: Company, Name, Email, Telephone, Type Event, Date Event, Message and a Submit button.

This website was tested on multiple browsers (Chrome, Safari, FireFox) and on multiple mobile devices (Microsoft Lumnia 950 Samsung S5, iPhone 6, 7, 8 & plus/X iPad & Ipad Pro and Desktop) for compatibility purposes.

#Deployment

The link to clone repository locally in the git terminal: https://github.com/wladcistudent/milestone_project.git

The link to Github Pages: https://wladcistudent.github.io/milestone_project/

#Validation of the coding

I have validated the html 5 codes on: https://validator.w3.org/#validate_by_input

I have had one outcome:

../html/bookings.html

Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.

From line 99, column 21; to line 99, column 82

  <input type="date" name="date" class="form-control" id="date">↩ 

I have validated the css 3 codes on : https://jigsaw.w3.org/css-validator/#validate_by_input

no errors.

#Content Sources

the images that used additionally come from wikipedia (opensource) and one image comes from flickr.com link: https://www.flickr.com/photos/x1brett/8634692590 I have used advanced search to accomplish this followed by usage rights: free to use or share, even commercally. this image is located in the folder images and daydreambeliever.jpg and the name has being modified.