Wonderbrass Band webpage - https://davidbuck84.github.io/Wonderbrass-MS1-project/
This page was created by David Buck, it's primary purpose is to promote the community band "Wonderbrass" based in Cardiff, South Wales.
My wife is a member of the band and she suggested their website was to busy and tired looking.
The website has been created with a mobile first design, and is easy to navigate to the revelevent areas.
-
Visitor goals
-
When a first time user visits this page, they want to easily understand the purpose of the page.
-
See and hear the music.
-
Easily find contact details for the band.
-
Find links to band youtube content and social media.
-
-
Returning visitor goals
-
When a user returns to this page, they would like to find content is updated regulary.
-
Easily be able to contact the band.
-
Find links to band youtube content and social media.
-
-
Band's goals
-
Promote the band.
-
Recruit new members.
-
-
Colour schemes
- There are two main colours used in the design, orange and white text with a black background.
color: rgb(255, 166, 0) = Orange
-
Fonts
- Two fonts were used from Google fonts. These were "Oswald" and "Zen Dots". Both were given a backup of "cursive".
-
Images
- The site comprises of one extra large Hero Image, with a text overlay on both the home screen and and contact page.
-
Website is responsive to variable device screen sizes using Media Queries and Bootstrap libraries
-
Features simple and clean navigation links and sign up page for more band info.
-
Languages Used
- HTML5
- Bootstrap V4.3.1
- CSS3
-
Frameworks / Libraries Used
-
Google Fonts - https://fonts.google.com/
- Google fonts were used to adjust the styling of the page.
-
Font Awesome - https://fontawesome.com/
- Font awesome was used to provide social media links at the footer of each page.
-
Git Hub - https://github.com/
- GitHub was used to store the projects code after being pushed from Git.
-
Git Pod - https://www.gitpod.io/
- Gitpod was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
Hover.css:
- Hover.css was used on the navbar to highlight the links on mouse over.
-
- Was used to creat wireframes in the plannig of the project.
-
Bootstrap - https://getbootstrap.com/
- Bootstrap was used to assist with the responsiveness and styling of the website.
-
# Testing
This site has been tested through 2 Validators.
-
Validators
-
W3C HTML Markup Validator - https://validator.w3.org/ -
-
W3C CSS Validator - https://jigsaw.w3.org/css-validator/ -
-
-
First Time visitor testing
-
When first loading the site, the user sees a large hero image with overlay text.
-
Easy navigation links to conatact the band and view media content.
-
Contact links can be found at the bottom of the main home page, or through the nav bar links.
-
-
Returning visitor goals
-
When a user returns to this page they will find content is updated regularly. As well as social media links and content remaining current.
-
Easily be able to contact the band through contact us page.
-
-
Website has been loaded on multiple browsers, such as Chrome, Safari, Internet Explorer and Firefox.
-
It has been tested for mobile responsiveness using Chrome Dev Tools.
-
Friends and family have experience the website and have been asked for feedback.
-
Changes have made to responsiveness after publishing to GitPages and testing on real world devices.
-
This site has also been subjected to "Google Chrome, Dev Tools Lighthouse Report"
The embeded youtube video on index.html is not very responsive, after multiple tests and discussions with colleagues, I have reached the conclusion that the low quality of the original video, prevents the expected result.
-
The website was coded using HTML5 and Custom CSS3.
-
Whilst adding Bootstrap 4.4.1 at a later stage in the project, this subsquently overwrote the custom CSS and affected the layout/responsiveness of the site. With hindsite, Bootstrap should have been implemented from the start of the project, allowing me to make the site more responsive on a greater range of devices. It would also allow me to add more custom/fluid CSS content.
----------- edit ------------
-
All future projects, Bootstrap and other libraries will be added at the start of the project.
-
GitHub Pages
- 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.
- 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.
-
Forking the GitHub Repository
- 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.
- Making a Local Clone
- 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://github.com/YOUR-USERNAME/YOUR-REPOSITORY Press Enter. Your local clone will be created. $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
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.
(Credit GITHUB template README)
-
The full hero image came from Shutter Stock - https://tinyurl.com/d6c7w2en
-
Quotes and videos were taken from https://wonderbrass.org.uk as my project was to upgrade their website.
-
All other content was written by the developer David Buck.
-
All Balsamiq content was created by the developer David Buck.
-
My mentor Gerard Mc Bride.
-
Tutor support for helping fix issues in my sign up form.
-
The Slack comunity. With special thanks to "Maggie Walsh", and "BrianMike"
-
Github and Code Institute sample readme files.