My project is an official website for a fictional band called "The Blades" The webiste aims to invite new people to the band's concerts and to listen to their songs on spotify

wireframes

Existing fans along with new fans are eager to find out more about their favourite band and to keep up with the band's everyday lives through social media.

My webiste addresses the fans goals by adding information about the band members, news section to show whats new with the band, gallery section to give samples of the band's music and tour dates.

• as a new fan, I want to check out the bands best tracks to find a new favourite song

• as a fan, I would like to find out more about the band's history and it's members

• as a fan, I would love to find out when and where the next concert is going to be held so I can book the tickets

• my hero images are supposed to catch the user's attention due to their large size and the slogan in the center

• the iconbar on the side of the screen has bright colors to stand out from the rest of the content

• news section provides images related to the news title to get a clear idea of what the news will be about

• tour dates are all centered with spacing between them to make it easier to reader

• the dark background helps the colorful content stand out

• navbar - allows the user to switch between pages

• hero image - gives the website a nicer look

• about section - provides the reader insight into what 'The Blades' do and each member's back story

• news section - provides the reader with recent events related to 'The Blades'

• gallery section images - shows 8 images from the band's latest tours to give an idea what their concerts look like

• gallery section music - shows 6 of the band's most popular songs with audio controls to welcome the new fans

• tour dates section - provides date and location for the band's next concert of the current tour

• tour dates section tickets - a button is located underneath tour dates which takes the user to ticketmaster.com to purchase tickets to a concert

• fixed social media bar - adds a bar on the side of the website that is fixed which has social media links inside

• HTML5 -I used html (HyperText Markup Language) as the markup language for this project

• CSS3 -I used css3 to style many aspects of the website -media queries were used to make certain parts of the website responsive on mobile and tablet

• Bootstrap -I used Bootstrap to help me make sections responsive and to create a responsive Navbar

• Google-Fonts -I used google fonts to import 'Anton' and 'Roboto' fonts

• Font-Awesome -I used font awesome to add social media icons in every page

• jQuery -jQuery was included with bootstrap and I used it to make the navbar responsive for smaller devices

• Git -I used gitpod's terminal to commit my code and then to push it to GitHub

• GitHub -I used GitHub to store my project code

• Balsamiq -I used Balsamiq to create my wireframes for the project

The W3C Markup Validator and W3C CSS Validator were used to validate my code for each page to make sure no errors were present

W3C Markup Validator

W3C CSS Validator

I have 5 errors in my css code which I was not able to resolve :

• text is not a background-clip value(3)
• Property text-decoration-skip-ink doesn't exist
• Property overflow-anchor doesn't exist

Tests

• I deployed my project to GitHub Pages by performing these steps:

1. Log in to GitHub and navigate to your repository
2. find the "Settings" button next to "Insights"
3. find the "Pages" button on the left side of the settings page
4. click on the dropdown titled "none" and select a branch
5. after the page refreshes scroll down the "Pages" section again to find your published site link

Forking the repository makes a copy of the original in your GitHub account to view/make changes without affecting the original. These are steps you can use to fork the repository:

1. Log in to GitHub and navigate to the repository
2. find the 'Fork' button at the top of the repository below your profile picture
3. You now have a copy of the repository in your account

1. Log in to GitHub and find the repository
2. Under repository find and click on "Clone or Download"
3. You can clone the repository using HTTPS by copying the link under "Clone with HTTPS"
4. Open Git Bash
5. Change directory to the location where you want to clone the new directory
6. Type git clone and paste the copied URL $ git clone https://github.com/USERNAME/REPOSITORY
7. Press enter

• Logo heading color-gradient code was used from a StackOverflow question

• social-media-bar code was used from w3schools and I added border-radius to each icon

• Bootstrap was used for Navbar and grid system

• All content was written by me personally

• background color #212529 was picked because that was the default color of the navbar in bootstrap version 5 beta3

• color gradients were picked from ColorSpace

• images of concerts, band members and news images were found on Google-Images

• Logo for the band was created using Canva

• songs used in gallery.html were taken directly from a Spotify playlist