So this a website I created for the band Nirvana to honor them and Kurt Cobain my main goal is to explain more about the band. I made this website to explain what knowledge I have and show case their music and to explain to the user know the stoy about the band. Most importantly to get information about concert their main pages and bookings so the band can get more sold out shows.

The projects goal is to create a website for all user to enjoy Nirvana's music and to explain a little about thier upcoming to fame. And to honor Kurt Cobain

• As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the band and thier backstory.
• As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
• As a First Time Visitor, I want to look for their music to understand why they were so popular. I also want to locate their social media links to see their followings on social media to determine how trusted and known they are.

• As a Returning Visitor, I want to find more information about the band and more music .
• As a Returning Visitor, I want to find the best way to get in contact with the band with any questions I may have and how to book them for show's.
• As a Returning Visitor, I want to find more sales on merchandise more discounts and more backstory on Kurt Cobain.

• As a Frequent User, I want to see where I can find information about the band and ticket sales .
• As a Frequent User, I want to see multiple songs of nirvana and many music videos.
• As a Frequent User, I want to find out how sign up to get more discounts on merchandise.
• As a Frequent User, I want to able to get in contact with the band so i can hire them for shows.

• The two main used are black and white the front page we use blue and light blue for the background.

• The Montserrat font is the main font used throughout the whole website with Sans Serif as the fallback 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 is important. The large, Nav bar image is designed to be striking and catch the user's attention. It also a cover of the bands most famous album.

1. Home page wireframe : https://share.balsamiq.com/c/8zBRJykPSeStPzfX2UGkSw.png
2. Moile wireframe : https://share.balsamiq.com/c/8zBRJykPSeStPzfX2UGkSw.png

• Responsive on all device sizes

• Interactive elements

• HTML5
• CSS3

• Bootstrap 4.4.1:
• Bootstrap was used to assist with the responsiveness and styling of the website.
• Hover.css:
• Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.

• Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub is used to store the projects code after being pushed from Git.

• Photoshop was used to create the logo, resizing images and editing photos for the website.

• Balsamiq was used to create the wireframes during the design process.

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 - https://validator.w3.org/nu/?doc=https%3A%2F%2Ffreddy2296.github.io%2FThe-Process-2%2F.

• W3C CSS Validator - http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ffreddy2296.github.io%2FThe-Process-2%2F.&profile=css3svg&usermedium=all&warning=1&vextwarning=

• As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the band and their music.

• 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 the page there is a audio of the of the song smells like teen spirit one of the bands most famous songs. The user has the option of signing down below or can go to the mutiple options on top in the nar bar to check the other pages As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

• The site has been designed to be fluid and never to entrap the user. At the top of each page there is a clean navigation bar and a photo of the band, each page has a bottom section where there is information about the band like background stories or information on events, music etc or images and information about social media. The merch page is to get merchandise and prices , the event's page is to book the band for shows and events there's also links to the bands facebook page and ticket master for tickets. The home page gives some information on the band and honors Kurt Cobain. Finally the music page has music video's and audio songs so you can listen to the bands music As a First Time Visitor, I want to look for information and music to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their following on social media to determine how trusted and known they are.

• Once the new visitor has read the About Us and What We Do text, they will notice the Why We are Loved So Much section. The user can also scroll to the bottom of any page on the site to locate social media links in the footer. At the bottom of the Contact Us page, the user is told underneath the form, that alternatively they can contact the organisation on social media which highlights the links to them.

• As a Returning Visitor, I want to find stories background stories on the band , information about any events and music .

• You can find these options on the nav bar pages such as the home,events,merch,music

• As a Returning Visitor, I want to find the best way to get tickts and book events .

• The navigation bar clearly highlights the "Events" Page. Here they can contact the bands manger we h gave them a link to the bands facebook page which they get in contact with the bands manger , form the can book events or show, also a link to ticket master where the can find tickets and information on new shows.

• As a Returning Visitor, I want to find music videos and songs about the band The user can go to the nav bar and find the "music page" and find a couple music videos and a spotify audio where they can go and check out more music if they choose to.

• As a Frequent User, I want to know information on any new shows. The website would update as soon you sign up with your email on the front page or the music page.

• As a Frequent User, I want to be able to get new song updates In the music page you can click on the spotify link and sign for a memebership to spotify and get new music when it ever it drops.

• As a Frequent User, I want to know as much about the band and understand why their so famous In the home page you can get some knowledge on the band and their upcomings and how they get sign and which songs of theirs are the most know.

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone11 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

• In the home the photo didn't load well i had trouble in git pushing the right one
• The page might take a while to load

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

• Log in to GitHub and locate the GitHub Repository

• At the top of the Repository (not top of page), locate the "Settings" Button on the menu.

• Alternatively Click Here for a GIF demonstrating the process starting from Step 2.

• Scroll down the Settings page until you locate the "GitHub Pages" Section.

• Under "Source", click the dropdown called "None" and select "Master Branch".

• The page will automatically refresh.

• Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

• Log in to GitHub and locate the GitHub Repository
• At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
• You should now have a copy of the original repository in your GitHub account.

• Log in to GitHub and locate the GitHub Repository
• Under the repository name, click "Clone or download".
• To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
• Open Git Bash
• Change the current working directory to the location where you want the cloned directory to be made.
• Type git clone, and then paste the URL you copied in Step 3. $ git clone https://freddy2296.github.io/The-Process-2/.
• Press Enter. Your local clone will be created. $ git clone https://freddy2296.github.io/The-Process-2/.

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.

• I got the idea for the page layout and navbar image form W3Schools https://www.w3schools.com/howto/default.asp

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

• All content was written by me Freddy Garcia.

• All Images were found on Google.

My Mentor, for continuous helpful feedback.

Tutor support at Code Institute for their support.