The milestone project of creating a band website for a 60's band was a joy! I love that era of rock and I hope it shows that Pink Floyd is one of my absolute favorites. This milestone project was created using Visual Studio Code. Rock on!🎧
In creating this website I wanted viewers to get what they wanted the music or next concert with little extra to distract them. I went with a simple black and white theme overall.
This website is for fans of Pink Floyd. It is for fans to hear their classics and contact them directly. It is for fans to read about the bands history and view photos. While this site is for Pink Floyd I can envision other small bands seeing this and using a similar layout to expand their online audience beyond various social media platforms.
User Story 1:
John doe wants to view band pics and read their history. He can doe this by clicking on the "Band" page and reading from there.
User Story 2:
Jane doe wants to view band concert dates. She can do this by clicking on the "Events" page and checking out where they will be soon.
User Story 3:
Jeff doe wants to hear band back catalog of songs. He can do this by clicking on the "Old but Gold" page and enjoying his favorite songs from there.
User Story 4:
Jerry Doe wants to check out the mock ups for the website. He can do so by clicking the "Mock up" page in the navbar.
•User is able to listen to their music by clicking on "Old but Gold" page then clicking on their chosen song.
•User is able to Contact the band by clicking on the Contact page and filling out the form and clicking send.
•User is able to read about the band by clicking on "Band" page and reading from there.
•User is able to check out concerts by clicking on the "Events" page and looking at the events scheduled.
•User is able to view website mock ups by clicking on the "Mock Up" page and viewing the images.
•HTML
•CSS
•Bootstrap - The project uses bootstrap for the navbar, contact form,events progress bar, events calendar, and image carousel.
•jQuery - The project uses JQuery to simplify DOM manipulation.
•Google Fonts - The project uses Google fonts in order to use the Roboto Font.
•Font Awesome - The project uses Font Awesome in order to display various icons for social media and the hamburger menu in mobile view.
•Compressor io - The project used compressor.io to compress the photos since many were very large and took a long time to load.
I tested this out the old fashion way. One page at a time using a visual studio extension called Live Server. This extension lets you view a page as it would be displayed online.
This site was tested across various browsers and browser sizes. Multiple times I used W3 validator to debug and remove extra tags in my code. Using the contact page with an invalid email address you will get an message to correct it. Using a correct email and submitting will simply reset the form.
This website was deployed through Github Pages directly from the master branch. In order to run the code locally simply download the files, start up Visual Studio Code or your IDE of choice to check it out. The difference between the development version and deployment version are little to none.
•The text for Band Page was copied from the Wikipedia page.
•The calendar snippet came from bootsnip user horseng
•The contact snippet came from bootsnip user flaviub
•The social media icons come from Fontawesome
•The favicon was generated from favicon.cc
•The photos used in this site were obtained from googling album covers and Pink Floyd band pictures.
- Fountain
- Group photo
- Studio
- Practice
- Airplane Background
- Back Catalog
- Dark Side of the Moon
- Wish you were here
- The Wall
- Animals
•I received inspiration for this project from the 5/5 example project