code-institute-submissions / ucfdmp Goto Github PK

 ,-----.,--.                  ,--. ,---.   ,--.,------.  ,------.
'  .--./|  | ,---. ,--.,--. ,-|  || o   \  |  ||  .-.  \ |  .---'
|  |    |  || .-. ||  ||  |' .-. |`..'  |  |  ||  |  \  :|  `--, 
'  '--'\|  |' '-' ''  ''  '\ `-' | .'  /   |  ||  '--'  /|  `---.
 `-----'`--' `---'  `----'  `---'  `--'    `--'`-------' `------'
----------------------------------------------------------------- 


User Centric Frontend Development Milestone Project (UCFDMP)

Hi there! Welcome to my code institute UCFDMP

Project Requirements

In this project, you’ll be building a frontend-only website using the technologies that you have learned throughout User Centric Frontend Development. You can either choose to use the example brief below or choose to use your idea for the website.
CREATE A WEBSITE FOR A BAND

Build a static (front-end only) website for a band. As a starting point, you may want to use wireframes, as we did in the UX lesson (you can use Balsamiq or any other tool, including just pen and paper). You can use either your assets or the assets within the following GitHub repo.
The band is a 1960’s rock band and have around 50 years experience of performing live at numerous events around the world. You have been given the following requirements after interviews with the client’s representatives:
    Their primary target audiences are their fans and potential fans who wish to use the site to see and hear clips from their back catalog, and any new material as it becomes available.
    Also, the band would like to use the site to showcase their music and publicise their availability to perform at events such as weddings and Christmas parties.
The band has provided you, the developer, with the following assets that they would like to showcase on their website:
    Photos of the band members
    A video clip
    Audio clips
Also, they are in the process of creating a social media presence and would like to add links to their Facebook, Twitter and YouTube pages.

In this project I have chosen to create my own scenario based on the scenario provided. My project will focus on an up and coming artist 
I will build a static (front-end only) website for the artist.

The artist has been around for about 5 years and has experience of performing live at numerous events in Ghana.

I have taken the scenario of being given the following requirements for the project. 
- His primary target audiences are his fans and potential fans who wish to use the site to see and hear clips from is tours around Ghana, 
as well as new material as it becomes available.
- He would like to use the site to showcase his music and publicise his availability to perform at events such as weddings and Christmas parties.

He has provided me, the developer, with the following assets that he would like to showcase on his website:
    - Photos
    - Video and Audio Clips
    - Also, he has social media presence and would like to add links to their Facebook, Twitter and YouTube pages.
    
I intend to use no wireframes but a configuration already existing in the code institute git hub libraries under:

    - UserCentricFrontendDevelopment-Resume/18-providing_a_cv_for_download/ see the link to the project below
    
    https://github.com/Code-Institute-Solutions/UserCentricFrontendDevelopment-Resume/tree/master/18-providing_a_cv_for_download
    
    
FEATURES

A standard menu header for all pages derived from an earlier design but modified to suit the needs in this project
A standard footer featuring four social media icons that redirects users to the artist's relevant social media pages.
A standard image of teh artist on all pages ( slightly enlarged on the resume page to seal the gap between the timeline and image).    

    - Home Page (index)
        * four navigation header menu - to navigate between pages
        * map of artist location 
        * artist contact details
        * introduction to the artist (who he is, what he does and why he does it)
        
    - Dicography (resume)
        * four navigation header menu - to navigate between pages
        * Artist's timeline
        * Artist's Albums and most notable public projects such as tracks featured and freestyles.
        * Quotes of reviews from external parties
    
    - Contact
        * four navigation header menu - to navigate between pages
        * Example of things the artist would like to be contacted for
        * A form with for contactind the artist
        * a button to send the message
        
    - Listen To Tracks (listen)
        * four navigation header menu - to navigate between pages
        * 7 buttons to access artists .
        
            - Aftown
            - Amazon
            - iTunes
            - Play Music
            - Spotify
            - Tidal
            - Youtube
        
    Are all places fans of the artist can stream or purchase music they like
    
    
TECHNOLOGY USED

The technologies used in this project are HTML5, CSS, JavaScript and Bootstrap.
    
    I could have uses JQuery however there were existing pieces of work done by other that works and suited the nature of my project.
    
    HTML was use for the structuring of the pages
    Bootstrap was use to ensure that the page appear a certain way on mobiles and another on tablets, desktops and laptops
    Javascript was used mainly for showing the mapping on the home page
    CSS was used to beautify the page and make the structure stand out with the different colours.

I used the following libraries || link to libraries

bootstrap || https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
fontawesome || https://use.fontawesome.com/releases/v5.5.0/css/all.css
css libraries || https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css


https://developers.google.com/maps


TESTING

Mobile - I have accessed the site on my mobile as well as asked others in my household to access it on their mobiles and give me feedback. No errors were encounted.

Tablet - I have accessed the site on my ipad with no issues recognised.

Desktop - I have accessed the site on my desktop. No errors were encounted. I also tested using the element inspector and showed the various
pages in the virtual devices build into my browser.

Javascript - JavaScript was tested in console and jsfiddle (see image file in images photo of testing.jpg)

The project appears well on a number of virtual screens therefore we can only rely on user feedback to make any improvements.

The project was produced in cloud9 

Updates have been saved to :

https://github.com/humbleafrica/UCFDMP

The Webpage is hosted at:

https://preview.c9users.io/humbleafrika/user_centric_milestone_project/index.html



MEDIA


The photos and music material used in this site were obtained from:

https://www.google.com
https://soundcloud.com/akanmusic



ACKNOWLEDGEMENTS

I received inspiration for this project from 

UserCentricFrontendDevelopment CV resume example

Sincere thanks to Kwabena Appiah who allowed me to use his material and social media sites for this project