This Milestone project uses skills learned from first three modules of the Full Stack Developer Course, HTML, CSS & User Centric Frontend Development, to build a mobile-first fully responsive website for a 1960's rock band. It fulfils the need for fans and potential fans to listen to Pink Floyd's music, watch their videos and images. Website includes tour dates and band member info with wikipedia links, link to social networks, YouTube channels and a link to Fan Club.
This website was made for all the fans and potential fans who want to enjoy music, videos and images of their favourite rock band.
Website has been created using Bootstrap Framework grid. Designed for mobile devices as a single page with simple navigation bar. Navigation bar is collapsed into a hamburger button for mobile devices, so it does not take much space on the screen. On the bigger screen navigation bar is expanded so all links are visible.
Links are connected to titles of the content sections with a return to top arrow icon next to
title. Website contains multiple working links to wikipedia, social media and two Pink Floyd YouTube
channels, all set to open in new browser tab. Ticket button is not connected to outside link. Form and modal are
also included for contact and Fan Club. Both form and modal hold data validation and all fields residing within are
set to required ensuring information submitted is of the correct format but they don't alert anyone from the Webteam
that a form has being filled nor do they fill a database. As is customary, form notify the user that their personal
information will not be shared with anyone, ensuring a sense of General Data Protection Regulations.
- HTML5#
- CSS3
- Bootstrap
- Ubuntu
- Bash
- Cloud 9 IDE
- Git
- Github
- Chrome developer tools
- Javascript and JQuery as a part of Bootstrap for modals
Website was created in Cloud 9 IDE. Through Cloud 9 a local GITHUB repository was used for version control and then uploaded to Git using Ubuntu / Bash script. Once in a GITHUB repositories it was made live using GITHUB Pages. The website can be found at:
https://swraab.github.io/milestone_project_1/
Throughout the work on the project, website was regulary tested locally and on GITHUB in Chrome developer tools to ensure every element is responsive. Starting from the mobile-first side every element was tested to ensure it functions as expected. Website was tested in Chrome, Opera, Mozilla and Brave browsers. Using the device selector through the dev tools, each device was selected to achieve the responsivness needed. All errors were fixed before new content was introduced on the page. On early stages problem were images. That problem was resolved with Bootstrap responsive images. All links were tested to ensure they all open in new browser tab. Modal and form have been tested to ensure all input fields require specific format (text or email adress) and display warning if wrong format was entered. Last tests were made in HTML and CSS validators and all errors were corrected.
- Fan Club
- Information about band tours and events
- Gallery
- Videos
- Information about band members
- Social media links
- Links to two YouTube channels
- Hire the band for weddings or parties
My first Milestone project is created as a single page website inspired by the "Whiskey Drop" lesson and Metallica website https://www.metallica.com. Pink Floyd images and band member photos were taken from several sources: https://www.udiscovermusic.com/artists/pink-floyd/, https://www.ticketmaster.com.au/echoes-of-pink-floyd-tickets/artist/1219651, https://www.miaminewtimes.com/music/brit-floyd-was-the-closest-well-ever-come-to-pink-floyd-7759567. Background images were taken from https://www.pexels.com. Rest of the code was inspired by Code Institute modules and some aditional help from https://www.w3schools.com.
I wish to thank my mentor Spence Barriball for great mentorship and advices, such as use of Carousel and advices about media queries and iframes.
This website was made for educational use.