Kiddoqune 23

View the live project here.

This is the main website for a up and coming musician who is ready for the world to hear his music.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the musician.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find new music that have been relisted.
    2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any newly music.
    2. As a Frequent User, I want to check to see if there are any new music video.
    3. As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.

• Design

  • Colour Scheme

    • The main colours used are black, purple, green and white.

  • Typography

    • The Lato and Oswald font is the main font used throughout the whole website with Sans Serif as the fall-back font in case for any reason the font isn't being imported into the site correctly. Montserrat is a clean font used frequently in programming, so it is both attractive and appropriate.

  • Imagery

    • Imagery is important. The large, background hero image is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

• Wireframes

  • 

Features

• Responsive on all device sizes

• Video to show the users about the singers music.

• SoundCloud music play list for the users to listen to the singers music.

• Google map to show where most music is recorded.

• Links to the musician social media, SoundCloud and YouTube channel.

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the 'Oswald' and 'Lato' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results

• W3C CSS Validator - Results

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

     1. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero Image with Text and a "Learn More" Call to action button.
     2. The main points are made immediately with the hero image
     3. The user has two options, click the menu bars or scroll down, both of which will lead to the same place, to learn more about the musician.

  2. As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

     1. The site has been designed to be fluid and never to entrap the user. At the top of the website there is a navigation bar, each link describes what the page they will end up at clearly.
     2. At the bottom of the page there is social media links that will redirect too the musician social media.
     3. On the Contact Us Page, after a form response is submitted, the page refreshes and the user is brought to the top of the page where the navigation bar is.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

     1. The navigation bar has a "Contact" that will scroll down to the Contact Us section.
     2. Here they can fill out the form on the page or are told that alternatively they can message the organisation on social media.
     3. The footer contains links to the organisations Facebook, YouTube, SoundCloud and Instagram.
     4. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

  2. As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.

     1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

     1. The navigation bar has a "Contact" that will scroll down to the Contact Us section.
     2. Here they can fill out the form on the page or are told that alternatively they can message the organisation on social media.
     3. 3. The footer contains links to the organisations Facebook, YouTube, SoundCloud and Instagram.
     4. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

  2. As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.

     1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/TChauruka/Kiddoqune_23

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/TChauruka/Kiddoqune_23
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

Content

• All content was written by the developer.

• All media content was given permission to be used by Ryan Manyati(aka Kiddoqune 23)View

Media

• The full-screen hero image, crew image and the image on my goals came from Pixabay

Acknowledgements

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.

Commit Addition