Giters

seunkoko / First-Milestone-Project

First Milestone Project

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

1. WEBSITE FOR THE HIGH KINGS

1.1 PURPOSE

The purpose of this website is to showcase the The High Kings’ music, publicise their tours, and keep fans up to date with the latest news and featured items. The intent of the website is to keep users coming back for more.

The primary target audiences are, first and foremost existing fans, of The High Kings who wish to visit the site to see what's new, what's currently featured, when the next tour dates are, listen to the playlists, watch the music videos, or buy merchandise.

A secondary audience are the potential fans of The High Kings, people who may come across the site while browsing for Irish music or bands. The intent here is to make it easy for the user to see who The High Kings are, see what they're currently featuring, listen to a selection of music videos or playlists, book a tour, and buy merchandise.

The website will allow users to send a message to the band in the event that they may wish to book them for an event.

And, as the band have a social media presence, users will be able to link to The High Kings Facebook, Twitter, Instagram and YouTube pages from this website.

2. UX

2.1 BAND BACKGROUND

The High Kings came together in 2007. They are a band that is keeping Irish traditional music and songs alive for another generation. They fill a left by the likes of The Clancy Brothers, The fureys, and The Dubliners.

2.2 WEBSITE REQUIREMENTS

2.2.1 High Level Requirements

The High Kings require a website that will:

  1. Tell users who The High Kings are and what kind of music they play
  2. Keep their fans up to date about events and activities relating to the band
  3. Hold a selection of music videos in different categories that are easily accessible
  4. Hold playlists for featured albums, with the song titles easy to read
  5. Allow the user to book concerts
  6. Allow users to shop for merchandise
  7. Allow users to navigate easily from one section of the site to another
  8. Allow users to access The High Kings social media pages
  9. Will be responsive on all devices

2.2.2 USER STORIES

No. Who I am What I want to do Why I want to do it
1. Potential Fan I want to listen to the music the High Kings play. I want to see what their music is like.
2. Potential Fan I want to know who the band members are, what their story is. If I like their music I will want to know more about the band.
3. Potential Fan I want to know about their latest releases. I want to know what their latest material is like and if they’re still active.
4. Fan I want to see the latest news. I want to see what’s new, and what's currently featured
5. Fan I want to see the latest tour dates and locations. I want to see if there’s a concert near me and to book it
6. Fan I want to book a ticket for a concert. I want to go to a specific HK concert.
7. Fan I want to access the HK social media pages. I want to read the latest messages from the HK.
8. Fan I want to be able to buy cds / vinyl / band merchandise I may wish to buy newly release albums or merchandise.
9 . HK Band Member I want to see the latest news We want to keep fans informed of the latest news to encourage them to visit the site regularly.
10. HK Band Member I want to see the current featured items We want to keep fans informed of the latest news and new featured items, to encourage them to visit the site regularly.
11. HK Band Member I want to see the list of our upcoming tours We want to make sure that fans have accurate information about our tours, so that they will come and see us play.
12. HK Band Member I want to access our social media pages. We want to be able to quickly access our social media pages from our website

3. FEATURES

3.1 HOME PAGE

  1. The Home page introduces the band to the user, with: (a) A photo of the band members shown across the top portion of the Home page (b) A summary of background information about the band and its members was copied from The High Kings' website (thehighkings.com) and displayed on the Home page, along minimised photos of each band member (c) There is also a link in the top navigation bar on all webpages - "The Band" - which will take users directly to the portion of the home page which holds the band members' summary details
  2. The Aside section on the Home page gives the user quick access to featured items - it has links to those items on other pages
  3. The Aside section also gives the user quick access to news items - it has with links to those items on other pages. [One of these news items links to The High Kings' website: https://www.thehighkings.com/news/the-high-kings-sing-some-of-ireland-s-favourite-folk-songs-/ ]

3.2 TOURS PAGE

  1. The Tours page allows the user to see a list of upcoming tours, the dates, countries, states, cities, and venues. (The countries and states are excluded from small screens to prevent the screen from scroll left and right)
  2. The Tours page allows the user book a concert ticket. (Clicking on the "Book" button will take the user to the High Kings' website, https://www.thehighkings.com/tour-dates/, where they can book tickets for a concert)

3.3 MUSIC PAGE

  1. The Music page allows the user to play a video from a selection of music videos, embedded from www.youtube.com and separated into 2 categories - "Songs" and "Concerts"
  2. The Music page allows the user to play 2 playlists for the 2 latest albums, embedded from https://open.spotify.com
  3. The user easily select any song from the playlists, as the playlist table has been made wide enough to make it easy to read the song titles on all devices

3.4 GALLERY PAGE

  1. The Gallery page allows the user to view a selection of photographs copied from the HightKings' website, https://www.thehighkings.com/gallery/,
    and see The High Kings in various poses, and at various events and concerts

3.5 CONTACT PAGE

  1. The Contact page allows the user to enter their name, email address, subject, and a short message and send it The High Kings (this message doesn't go anywhere at the moment)

3.6 ALL WEBSITE PAGES

  1. The top and bottom navigation bars on all webpage allow the user to navigate to a shopping website, via a "Shop" link. The "Shop" link takes the user to https://shop.celticcollections.com/collections/the-high-kings-all, where the user can buy HK merchandise
  2. The top and bottom navigation bars on all webpages allow the user to easily navigate to all other webpages
  3. All webpages allow the user to quickly access The High Kings social media pages. The social media links appear on the top navigation bar on screens from width 1024 up, and on the bottom navigation bar on all devices

4. TECHNOLOGIES USED

Technologies WEBSITE COMMENTS
Colors https://www.w3schools.com/colors/colors_picker.asp I used this websites for choosing different shades of color for my website.
Colors https://www.sessions.edu/color-calculator/ I used this website when choosing colors for my website.
Colors https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css I used some of the color classes, e.g. bg-info, btn-info.
Grids https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css I bootstraps container, row and column classes to create my page grids
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
jQuery https://code.jquery.com/j jQuery, Cloudflare and Bootstrap js are used with the collapsible menu in the
Cloudflare https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js navigation bar.
Font awesome https://use.fontawesome.com/releases/v5.8.1/css/all.css The social media icons and the guitar icon come from fontawesome.
auto-prefixer https://autoprefixer.github.io/ I scanned my style.css file with auto-prefixer to check for code requiring a vendor prefix

5. TESTING

5.1 HOME PAGE

  1. Go to the Home Page
  2. Verify that all links, icons, images and content are appearing correctly on the page
  3. In the top navigation bar, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  4. In the top navigation bar, hover over each social media icon and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  5. In the bottom navigation links, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  6. In the bottom navigation links, hover over the social media icons and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  7. Hover over the links in the "Featured" and "News" section, and verify they are changing to blue
  8. Do the following tests on the top navigation bar:
    • Click on "Home" and verify that it stays on the Home page
    • Click on "The Band" and verify that it jumps to the section of screen where the Band details are displayed
    • Click on "Tours" and verify that it goes to the Tours page. Browse back to the Home page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Home page
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Home page
    • Click on "Contact" and verify that it goes to the Contact page. Browse back to the Home page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Home page
  20. Do the following tests on the "Featured" section:
    • Click on the "Listen to Playlists" links and verify that they are going to the section of the Music page where the Playlists are. Browse back to the Home page
    • Click on the "Watch Recent Concerts" link and verify that it is going to the section of the Music page where the Concert videos are. Browse back to the Home page
  23. Do the following tests on the "News" section:
    • Click on the "New Tour Dates Anounced. Tickets on sale now!" link and verify that it is going to the Tours page. Browse back to the Home page
    • Click on the "New Spotify playlist featuring (etc)" link and verify that it is opening a new tab to The High Kings' news page. Return to the Home page
    • Click on the "Read More . . ." link and verify that it is opening a new tab to The High Kings' news page. Return to the Home page
  27. Do the following tests on the bottom navigation links:
    • Click on "Home" and verify that it stays on the Home page
    • Click on "Tours" and verify that it goes to the Tours page. Browse back to the Home page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Home page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Home page
    • Click "Playlists" and verify that it goes to the section of the Music page where the Playlists are. Browse back to the Home page
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Home page
    • Click on "Contact Us" and verify that it goes to the Contact page. Browse back to the Home page

5.2 TOURS PAGE

  1. Go to the "Tours" Page
  2. Verify that all links, icons, images and content are appearing correctly on the page
  3. In the top navigation bar, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  4. In the top navigation bar, hover over each social media icon and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  5. In the bottom navigation links, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  6. In the bottom navigation links, hover over the social media icons and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  7. Do the following tests on the top navigation bar:
    • Click on "Home" and verify that it goes to the Home page. Browse back to the Tours page
    • Click on "The Band" and verify that it jumps to the section of the Home screen where the Band details are displayed. Browse back to the Tours page
    • Click on "Tours" and verify that it stays on the Tours page.
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Tours page
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Tours page
    • Click on "Contact" and verify that it goes to the Contact page. Browse back to the Tours page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Tours page
  19. Do the following tests on the bottom navigation links:
    • Click on "Home" and verify that it goes on the Home page. Browse back to the Tours page
    • Click on "Tours" and verify that it stays on the Tours page.
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Tours page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Tours page
    • Click "Playlists" and verify that it goes to the section of the Music page where the Playlists are. Browse back to the Tours page
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Tours page
    • Click on "Contact Us" and verify that it goes to the Contact page. Browse back to the Tours page
  31. Hover over each of the "Book" buttons and verify that the color is changing from blue to to #c71f27
  32. Click on each "Book" button and verify that it is opening a new tab to the website https://www.thehighkings.com/tour-dates/. Return to the Tours page after each test

5.3 MUSIC PAGE

  1. Go to the "Music" Page
  2. Verify that all links, icons, images and content are appearing correctly on the page
  3. In the top navigation bar, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  4. In the top navigation bar, hover over each social media icon and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  5. In the bottom navigation links, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  6. In the bottom navigation links, hover over the social media icons and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  7. Do the following tests on the top navigation bar:
    • Click on "Home" and verify that it goes to the Home page. Browse back to the Music page
    • Click on "The Band" and verify that it jumps to the section of the Home screen where the Band details are displayed. Browse back to the Music page
    • Click on "Tours" and verify that it goes to the Tours page. Browse back to the Music page
    • Click on "Music" and verify that it stays on the Music page.
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Music page
    • Click on "Contact" and verify that it goes to the Contact page. Browse back to the Music page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Music page
  19. Do the following tests on the bottom navigation links:
    • Click on "Home" and verify that it goes on the Home page. Browse back to the Music page
    • Click on "Tours" and verify that it goes to Tours page. Browse back to the Music page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Tours page
    • Click on "Music" and verify that it stays on the Music page.
    • Click "Playlists" and verify that it goes to the section of the Music page where the Playlists are.
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Music page
    • Click on "Contact Us" and verify that it goes to the Contact page. Browse back to the Music page
  31. Click on each video on the Music page an verify that it plays
  32. Click on each playlist on the Music page and verify that it plays

5.4 GALLERY PAGE

  1. Go to the "Gallery" Page
  2. Verify that all links, icons, images and content are appearing correctly on the page
  3. In the top navigation bar, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  4. In the top navigation bar, hover over each social media icon and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  5. In the bottom navigation links, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  6. In the bottom navigation links, hover over the social media icons and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  7. Do the following tests on the top navigation bar:
    • Click on "Home" and verify that it goes to the Home page. Browse back to the Gallery page
    • Click on "The Band" and verify that it jumps to the section of the Home screen where the Band details are displayed. Browse back to the Gallery page
    • Click on "Tours" and verify that it goes to Tours page. Browse back to the Gallery page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Gallery page
    • Click on "Gallery" and verify that it stays on the Gallery page.
    • Click on "Contact" and verify that it goes to the Contact page. Browse back to the Gallery page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Gallery page
  19. Do the following tests on the bottom navigation links:
    • Click on "Home" and verify that it goes on the Home page. Browse back to the Gallery page
    • Click on "Tours" and verify that it goes to the Tours page. Browse back to the Gallery page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Gallery page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Gallery page
    • Click "Playlists" and verify that it goes to the section of the Music page where the Playlists are. Browse back to the Gallery page
    • Click on "Gallery" and verify that it stays on the Gallery page.
    • Click on "Contact Us" and verify that it goes to the Contact page. Browse back to the Gallery page
  31. Click on each video on the music page an verify that it plays
  32. Click on each playlist on the music page and verify that it plays

5.5 CONTACT PAGE

  1. Go to the "Contact" Page
  2. Verify that all links, icons, images and content are appearing correctly on the page
  3. In the top navigation bar, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  4. In the top navigation bar, hover over each social media icon and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  5. In the bottom navigation links, hover over each link and verify that the hover affects are working (i.e. background color changes to white, font color to #c71f27)
  6. In the bottom navigation links, hover over the social media icons and verify that the hover affects are working (i.e. the bacground color is changing to the icon color, and the icon color is changing to the background color)
  7. Do the following tests on the top navigation bar:
    • Click on "Home" and verify that it goes to the Home page. Browse back to the Contact page
    • Click on "The Band" and verify that it jumps to the section of the Home screen where the Band details are displayed. Browse back to the Contact page
    • Click on "Tours" and verify that it goes to Tours page. Browse back to the Contact page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Contact page
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to Contact page
    • Click on "Contact" and verify that it stays on the Contact page.
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Contact page
  19. Do the following tests on the bottom navigation links:
    • Click on "Home" and verify that it goes on the Home page. Browse back to the Contact page
    • Click on "Tours" and verify that it goes to the Tours page. Browse back to the Contact page
    • Click on "Shop" and verify that it opens a new tab to the Shop website. Return to the Contact page
    • Click on "Music" and verify that it goes to the Music page. Browse back to the Contact page
    • Click "Playlists" and verify that it goes to the section of the Music page where the Playlists are. Browse back to the Contact page
    • Click on "Gallery" and verify that it goes to the Gallery page. Browse back to the Contact page
    • Click on "Contact Us" and verify that it stays on the Contact page.
  31. Click on each video on the music page an verify that it plays
  32. Click on each playlist on the music page and verify that it plays

6. DEPLOYMENT

**6.1 DEPLOYING FROM GITHUB **

  1. Log onto Github
  2. Select the respository you want to deploy
  3. On the repository page, click on "Settings" and scroll down to "Github Pages"
  4. From the "Source" dropdown select "Master Branch" and click "Save"
  5. The message "Your site is ready to be published at https://username.github.io/Bootstrap/" will appear under Github Pages
  6. When you click on this link your webpage will open in a browser window
  7. If you receive a 404 error, wait a few minutes and try again. It usually takes a few minutes to deploy
  8. Once your website launches you will need to retest it (see Testing section) to ensure that it can still find all the resources (css file, images, etc)

**6.2 CLONING FROM GITHUB **

Note: I got help with this section from Eventyret_mentor, as I have actually not done this before.

  1. Follow this link to my Project Github Repository
  2. On the repository page click "Clone or Download"
  3. In the Clone with HTTPs section, copy the clone URL for the repository.
  4. In your local IDE 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/KittyMcDonagh/First-Milestone-Project"
  7. Press enter and your local clone will be created.

7. CREDITS

7.1 CONTENT

All the content on this website was copied from The High Kings website: thehighkings.com.

There are 2 links to external websites:

  1. The Shop links to https://shop.celticcollections.com/collections/the-high-kings-all
  2. The link for the Ireland's Favourite Folk Song items links to https://www.thehighkings.com/news/the-high-kings-sing-some-of-ireland-s-favourite-folk-songs-/

7.2 MEDIA

7.2.1 PHOTOGRAPHS

All the Photographs, on this website were copied from The High Kings website: thehighkings.com.

7.2.2 VIDEOS

All the Videos on this website are embedded from www.youtube.com.

7.2.2 PLAYLISTS

All the Playlists on this website are embedded from https://www.spotify.com/.

7.3 ACKNOWLEDGEMENTS

NAME COMMENTS
The Code Institute I learnt everything I needed to know to build this website from the Code Institute.
Fellow students on Slack I received a lot of assistance and feedback from students on Slack which improved my project.
My mentor Seun Owonikoko I received feedback an encouragement from Seun.
The High Kings I love this band and because of that I enjoyed creating this website

About

First Milestone Project

Languages

Language:HTML 84.3%Language:CSS 15.7%