View the deployed Sailing In Space Website
Please note: To open any links in this document in a new browser tab, press 'CTRL + Click'.
(click to expand or hide)
I am currently studying the Full Stack Development Course through Code Institute. Part of the course I am required to complete 4 milestone projects. This website is my first milestone project which is part of the User Centric Frontend Module.
This website has been created for local Sunshine Coast Band - Sailing In Space. The purpose of this website is for the band to promote gigs, their music and merchandise to their fans.
The final project was submitted 17 November 2021.
-
Fan Goals - which include potential fans and existing fans
- As a fan, I would like to listen to their songs
- As a fan, I would like to learn about the bands history and the band members
- As a fan, I would like to follow the band on social media
- As a fan, I would like to see the band at an upcoming gig
- As a fan, I would like the opportunity to book the band for a show
- As a fan, I would like to read the lyrics whilst listening to their songs
- As a fan, I would like to purchase the bands merchandise
- As a fan, I would like to see the site on all devices such as phone, tablet and desktop
-
Site Owner Goals
- As a band member of Sailing In Space, I would like to get more gigs
- As a band member of Sailing In Space, I would like the opportunity for fans to purchase tickets to upcoming gigs
- As a band member of Sailing In Space, I would like to sell merchandise
- As a band member of Sailing In Space, I would like to increase our social media following
- As a band member of Sailing In Space, I would like to receive a record deal
-
Record Company Goals
- As a record company, I would like to listen to the bands music
- As a record company, I would like to find out if they already have signed a record deal
- As a record company, I would like to contact the band
The purpose of this project is to create a website for Sailing In Space that showcases their talent to their fans and for a potential record deal.
The site owner goals of this website are:
- To receive a record deal
- To get more gigs which include functions and weddings
- For fans to purchase tickets to upcoming gigs
- To increase our social media following
- To sell merchandise
The existing and potential fan goals of this website are:
- To listen to their music
- To attend gigs
- To learn more about the band
- To purchase merchandise
- To follow the band on social media
- To book the band for functions and/or weddings
The record company goals of this website are:
- To listen to their music
- Find out if they already have a record deal
- Contact the band
The features of this project will include:
- The ability to listen to the bands music
- The ability to purchase merchandise
- The ability to learn more about the band
- The ability to see what gigs they are playing at
- The ability to contact the band
- The ability to go straight to social media platforms from the website
The information is grouped logically for all customers. The Interaction Design (IXD) will be consistent between pages where the navigation bar is fixed and tailored to have the priority items displayed first at the top of the screen. All social media icons will be in the footer and the footer will be fixed so users can access these icons at all times. Once the 'Contact Us' content has been submitted, the user will have clear feedback that the information has been submitted. The site will be consistent with what users expect from a band website.
The wireframes have been created 3 times using Balsamiq. I originally had too many wireframes so I cut them down after discussion with my Mentor and they became the 2nd version.
As I was developing the website, I noticed that how I had set out the wireframes wasn't working on a mobile and at times the desktop and tablet version needed to be changed as well. This has been included in my Lessons Learned.
Here are the final wireframes:
- Home Page Wireframe
- The Music Wireframe
- Gigs Wireframe
- The Band Wireframe
- Merchandise Wireframe
- Contact Us Wireframe
- Thank You Wireframe
- 404 Error Wireframe
Colour Scheme
-
I wanted to use black and white as colours that represented space. The main colour will be black #000 for the background and white #FFF for the text. I used blue #13A6DB (Cerulean Crayola) for the navigation bar, buttons and titles. The blue was selected from the logo by using Image Color Picker.
Colours sourced using Coolors -
I came up with this selection by firstly checking WebAIM to ensure that the foreground colour of #13A6DB and the background colour #000 were accessible.
- I then wanted a different colour to display when hovering over a link. I used Color Space and found the yellow #F9F871 (Icterine) in the generic gradient to use as my link colour.
- The final four colours chosen:
Colours sourced using Coolors
Typography
- The Roboto font is the main font used throughout the whole website with sans-serif as the fallback font. This font was chosen as it compliments the Titillium Web font that is used for the titles.
- The Titillium Web font was used for all headings with sans-serif as the fallback font. This font was chosen as it is a close font to Sailing In Spaces logo.
Imagery
- All images, except the 404 error page, were sourced from Sailing In Space and include images of the band, merchandise and gigs.
- The 404 error page was sourced from Freepik
I have designed the website for the mobile and desktop to have a different look. The reason for this, is due to the background images that display on a desktop didn't look good on a mobile and were hard to see.
Each page features:
- A fixed header that contains:
- a logo featured on the left hand side that when clicked takes you to the Home Page
- a responsive navigation bar that includes 6 links - Home, The Music, Gigs, The Band, Merchandise and Contact Us
- A fixed footer. The reason the footer is fixed is due to the user being able to access the band's social media icons at any time, as fans often want to follow their favourite band on social media. The fixed footer contains:
- an About and Contact Us link on the bottom left hand side
- copyright information placed in the middle
- social media icons on the right hand side linking to 6 social media and music pages
The Home Page features:
- 2 hero images on anything larger than a mobile
- 1 hero image on anything smaller than a tablet
- The introductory text that displays on a mobile is shorter than the desktop version. This does not compromise the user experience
- A link to the bands new single
- 1 Upcoming Event and a link to further upcoming events that is linked to the Gigs page
The Music Page features:
- An opaque background image of Jesse and Dylan playing in black and white displays on anything larger than a mobile
- A black background displays on anything smaller than a tablet
- You can play and/or read the lyrics to each of the bands songs
- When any song is played a new tab displays the song in Spotify where the user has control of when to press the play button
- The lyrics all display in their own modals
- A "read more / read less" button displays as there is too much text to display on the page initially and the user can click the button to read more and click the read less button to shorten the text
- A sneak preview to their new video "Like It" where the user has control of when to play the video
- On anything larger than a mobile, the Singles display 1st to the left of the screen, Coming Soon displays in the middle as your eyes are attracted to the middle of the screen and Albums display 3rd on the right of the screen
- On a mobile the order has been switched. The Coming Soon video displays 1st, the Singles displays 2nd and the Albums display 3rd
The Gigs Page features:
- An opaque background image of Jesse and Dylan playing displays on anything larger than a mobile
- A black background displays on anything smaller than a tablet
- A list of all the bands upcoming events with links to each gig in Facebook - Please Note: the upcoming events were upcoming at the time of development. If there were no upcoming events to display, the wording would be changed from Upcoming Events to Recent Events
- Information regarding private functions and venue bookings
- Two videos where the band had played at weddings
- A "read more / read less" button displays under "Private Functions and Venue Bookings" as there is too much text to display on the page initially and the user can click the button to read more and click the read less button to shorten the text
- A link to book the band that is linked to the Contact Us page
- The "Book Us Now" link has been duplicated on the page so you can either click the link just under the title or once you have finished looking at the page, you can click the link at the bottom of the screen
The Band Page features:
- A background image of Jesse and Dylan displays on anything larger than a mobile
- A black background displays on anything smaller than a tablet
- A "read more / read less" button displays as there is too much text to display on the page initially and the user can click the button to read more and click the read less button to shorten the text
- A link to a bio on each of the bands members
- On a mobile, a face image displays of both band members with a link to a bio underneath each image
- Each bio displays in its own modal
The Merchandise Page features:
- A link to order merchandise
- A carousel of the bands merchandise that includes the price of the item
- An image of the back of the shirt worn by Dylan
The Contact Us Page features:
- A form to contact the band about bookings, merchandise, general enquiries and anything else
- Once you click 'submit' on the form, you are taken to a thank you page
- An image of Sailing in Space which only displays on anything larger than a mobile
- Include Past Events. This will give the audience an idea of how many gigs they have done and the venues they play at
- A photo gallery
- A video gallery
- Sell the bands music
- Singles to be a stand-alone page
- Add thumbnail of album cover and link to album page
- Add thumbnail of singles and link to singles page
- A booking calendar so users can book the band and know when the band is available
- SEO Optimised
Languages Used
Frameworks, Libraries, Programs and Resources Used
- Am I Responsive - to create a Home Page image on each device for use in the Readme file
- Anna Greaves (portait-artist) - for ideas and information from the Readme file
- Autoprefixer CSS Online - to ensure all vendor prefixes were included in CSS
- Balsamiq - wireframes
- Bootstrap 4.6 CDN - to make the website responsive
- Code Institute course content - main source of fundamental knowledge
- ColorSpace - to generate a colour palette
- Commonmark - markdown language references
- Coolors - to display colour palettes
- Favicon Generator - to generate the favicon
- Facebook - for the images and videos
- Font Awesome - for their icons
- Freepik - 404 error page
- Gabriel Staples - to create a Table of Contents for the Readme and Testing files
- Google Fonts - typography
- GitPod - IDE
- Git - version control
- GitHub - hosting service
- Image Colour Picker - to select a main colour for navigation bars, buttons and titles
- Jim Lynx (Explore Island) - for ideas and information from the Readme file
- jQuery - for the responsive navbar
- Lighthouse to check for any issues on all pages
- Markdown Style Guide - for nested list spacing
- PIXLR - to reverse a photo
- Popper.js - for the responsive navbar
- Rachel Hyman - to assist with anchor links in the Readme and Testing files
- Slack - main source of assistance from other students, developers and documents/resources
- Snagit - screen capture and resizing images
- Stack overflow - for resolving specific issues
- TinyPNG - efficient compression of images for the site
- W3C CSS Validation Service - to ensure there are no errors in the CSS code
- W3C Markup Validation Service - to ensure there are no errors in the HTML code
- W3Schools - to assist with code
- Wave - to ensure the content was accessible
- WebAIM - web accessibility contrast checker
See Testing.md for testing information
- Don't try and do the whole website at once
- other features can be added later
- check for scope creep
- How to word commit messages and format them
- You don't need one huge line of text
- You can break the commit messages into different lines
- Take regular breaks
- You know more than you give yourself credit for
- Only go by videos that you have watched throughout the course
- For example, only use Bootstrap 4 as Bootstrap 5 is not supported by Code Institute
- There is so much to learn
- It takes time to introduce new features, it isn't as simple as copying and pasting code from Bootstrap and other sources
- Don't forget to commit after an introduction of an item. I get too excited learning and playing that I forget to commit regularly
- I need to take more time with my wireframes so I am not changing them after starting the website. This was the first time I had ever created wireframes and realised that what works on a desktop does not always work on a mobile or tablet. I did change some of the desktop wireframes too from the original wireframes as I now know what works well on a page
The code for this website was written in Gitpod and pushed to GitHub Pages from its GitHub repository using Chrome browser.
The following process was used to deploy this website:
- In the GitHub repository click Settings
- Select 'Pages' from the menu on the left hand side
- GitHub Pages displays
- Under 'Source', click 'Branch' and select 'Main'
- Click 'Save'
- A URL displays advising that you site has been published
- Use this URL for your live website
Each time the code is pushed from Gitpod to GitHub, the deployed site is automatically published.
Run this site locally
You can clone this repository directly into an editor of your choice and run the site locally.
To do this:
- From the GitHub repository which is on the 'Code' heading page
- Click the dropdown 'Code' button which is next to the green Gitpod button
- You can either copy the link into your own IDE or 'Download Zip' which can be unzipped on your local machine
- If you are copying the link into your own IDE - Open Git Bash
- Change the current working directory to the location where you want the cloned directory
- Type git clone, and then paste the URL you copied earlier.
- Press "Enter" to create your local clone
- Click index.html in the created folder and the website will open up in the default browser
Please Note: That if you are wanting to use Gitpod as your IDE you will need to install the Gitpod Browser Extentions for Chrome. After installation, restart the browser.
Code
- Dave Horrocks, Code Institute student for his assistance in helping me understand some code
and for showing me a new way to do the commits so it isn't all on 1 line - SuzyBee, Code Institute student for her assistance in helping me understand some code
- Tutor Support for assistance in helping me understand some code
- My mentor for all his support and assisting me with the deployment in the Readme file
- W3Schools for assistance with code
- Responsive CSS Aspect Ratio for how to make the videos responsive
- Stack Overflow for resolving specific issues
- See Bugs/Fixes in the TESTING.md for specific credits for code fixes
Content
- All content was courtesy of Sailing In Space
- The text for the Home Page was created by JJJ Unearthed
Media
- All images are courtesy of Sailing In Space except for the 404 error page
- 404 error page courtesy of Business Vector created by pikisuperstar - www.freepik.com
Readme
- Table of Contents, anchors and the (click to expand or hide) has been sourced from:
- Nested list spacing has been sourced from:
Acknowledgements
- Sailing In Space, my family and friends for their input and support