Developer: Mark Wilde
Guidelines for project development:
- Create a website of around 4-5 pages.
- Incorporate main navigation and grid layout.
- Whenever possible, strive to use semantic HTML5 elements to structure your HTML code better.
- Make sure your site is as responsive as possible. You can test this by checking the website on different screen sizes and browsers.
- We advise that you write down user stories and create wireframes/mockups before embarking on full-blown development.
- The site can also make use of CSS frameworks such as Bootstrap.
- You should conduct and document tests to ensure that all of your website’s functionality works well.
- Write a README.md file for your project.
- Use Git & GitHub for version control.
- Deploy the final version of your code to a hosting platform such as GitHub Pages.
This website provides event bookers, current fans and future fans an opportunity to watch and listen to the bands back catalog of videos and songs. Information about new material and free access to new songs will also be made available here.
The website provides pictures and information about the band, as well as links to their social media accounts and Wiki page. Several booking options for private events are available and clearly presented.
Balsamiq was used to create the wireframes.
Homepage
Music page
Customers page
Contact page
-
Development of the website adhered to a mobile first approach. The site consists of four separate pages. Two of the audio tracks, and a customer story, have been hidden on smaller screens to improve the aesthetic.
-
All pages share the same navbar and footer, though each page has a clear purpose and some unique functionality.
-
The Bootstrap framework underpins the project and was implemented as per convention.
-
The project also made use of the CloudFlare and Font Awesome libraries.
-
The websites color scheme and layout were chosen in an attempt to represent the Animals long standing brand style with their peak popularity coming in the 1960s. A retro, classic-style approach was undertaken; to invoke The Animals experience.
-
Two of the audio tracks on the music page, and one user testimonial from the customers page, are not displayed on some smaller screen sizes. This was done in an attempt to improve the user experience.
-
The website includes a side article regards the bands ongoing activism in the field of animal rights and welfare. Customers are informed that 20% of all band earnings are made available to several animal charities. A link is provided for users if they would like to visit the webpage of one of their favorite charities. It is hoped that this commitment may be appealing to potential customers and increase event bookings.
Several user stories were considered before development began:
-
"As a current Animals fan I want to be able to quickly access the bands music online via an official website. I also want to be up-to-date with new material, news and announcements."
-
"As a current Animals fan I would like to recommend an official Animals website to my friends (as potential new fans). So that they can watch and listen to the bands videos and music; and learn more about the bands history."
-
"As a potential Animals fan, I would appreciate access to an official band website were I can easily access the bands material for free. I would also like to see some pictures of the band and be provided with up-to date information about the band."
-
"As a potential customer who is considering booking the band for an event, I want easy access to the means of doing so through an official website. I also want quick access to some of their greatest hits which I would expect to find freely available on their website. Furthermore, I would like access to useful information such as band availability and event prices. Again, I would expect this information to be clearly presented and easily accessible via the bands website."
-
"As a current fan interested in the day to day news and activities of the band, I would like to be provided easily accessed links to their social media accounts, so that I can follow them and be the first to know of any exciting developments."
| Page | Description |
|---|---|
| Index | This is the landing page. It includes the bands logo, information about the band an iconic band photograph and two embedded YouTube videos of the bands hit songs. |
| Music | This page includes 6 audio tracks with individual album covers, current band news and a link to lead singer Eric Burdons latest solo album. It will also host new material as it becomes available. |
| Customers | This page includes some kind words of recommendation from some of the bands famous customers. It also documents the bands ongoing animal activism and charity work. |
| Contact | This page displays information on how to contact the band and book an event. A simple booking form is provided for potential customers. Links to the bands availability throughout the year and event pricing, are also included. |
- A merchandise page.
- A page listing the music festivals and concerts the band will be playing a in the coming calendar year.
- A page hosting a photo collection and personal stories about each band member.
- Cloud9
- The project was developed using the Cloud9 Integrated Development Environment.
-
- The project uses HTML to create the pages.
-
- The project uses CSS to style the pages.
-
- The project uses Bootstrap for styling and responsive design.
-
- The project uses FontAwesome for the social media icons and the navbar buttons.
-
- The project uses Hover for button hover animations for social media icons and the navbar buttons.
-
- The project uses GoogleFonts to import and use unique fonts.
User Story Tests
- Verify fans of the band can quickly access the bands music on the website.
- Verify fans of the band can quickly access up-to-date news and new material on the website (if and when it's published).
- Verify that the website has the potential to be recommended to friends of current website users. As the site hosts band videos and songs, and includes historical band information; it is hoped that this condition is met.
- Verify that potential fans of the band can access some of the bands best material for free.
- Verify that users can see some pictures of the band.
- Verify that potential event bookers can do so through an official website, in a straightforward manner.
- Verify that potential event bookers have instant free access to some of the bands greatest hits.
- Verify that potential event bookers have clearly presented and easily accessible information on the bands availability throughout the year and booking prices.
- Verify that site users have easy access to the bands social media accounts, allowing them to keep up with the latest band news and exciting developments.
Manual Tests
- Open the app.
- Click on each of the four links in the navbar and verify each one is working as intended, i.e., when the user clicks the music link he/she is taken to the music page; and so on.
- Verify that the embedded Youtube videos are working as intended. Press play in both videos and ensure each song plays.
- Verify that each link in the footer is working as intended, users will be taken to the relevant webpage.
- Verify that, in the case of the pricelist link, a PDF document will open in the browser which users can read, download or print.
- Verify that the pricelist PDF includes all the information a potential event booker would expect to find.
- Verify custom styles are working as intended, for example, when the page loads the embedded Youtube videos slide in from the left side of the screen.
- Verify the navbar links display a transparent dark shadow when the cursor is hovered over them.
- Verify all links change color when the cursor hovers over them.
- Verify that there are no grammatical errors in the band info section.
- Verify that users can click on the picture of Eric Burdon, verify this action takes users to his latest solo album on the Youtube website.
- Verify that the album covers in the audio section are displaying correctly.
- Verify that the audio bars in the audio section are displaying and functioning correctly, i.e., users can play each individual song and adjust the volume in the audio bar controls.
- Verify custom styles are working as intended, for example, audio bars should expand when the cursor hovers over them.
- Verify that there are no grammatical errors in the band info section.
- Verify that the customer images and quotes are displaying as intended.
- Verify the twitter icon link for each customer is working correctly.
- Verify that users can click on the picture of the dog, verify this action takes users to the intended animal charity website.
- Verify custom styles are working as intended, for example, twitter icons should change color when the cursor hovers over them.
- Verify that there are no grammatical errors in the animal charity info section.
- Verify that the image in the booking section is displaying as intended.
- Verify the booking form in the booking section is displaying as intended.
- Verify the 'Make a booking request below' link displays the pricelist on a separate web page when clicked.
- Verify the Name, Email and Event description fields each display a prompt to enter some text when left blank.
- Verify that when each field has been filled and the user clicks on the 'Send Event Request' button, the form is cleared so that further requests can be made.
- Verify custom styles are working as intended, for example, the text in the 'Send Event Request' button should change color when the cursor hovers over it.
- Verify that there are no grammatical errors in the booking section.
Miscellaneous
- Google chrome developer tools where used at every stage of production to isolate issues and improve mobile responsiveness.
- The app has been tested on various browsers, including Chrome, Firefox, Opera, and Safari.
- The app was tested across many screen sizes, from very small to very large.
- Some family members tested the app on their own devices and their recommendations, such as which band picture might be best for each page, were taken on board.
- The app is displaying as intended across various devices and in different browsers.
-
The logo image top left of each page only slides in from the left on the index page (when the page is loaded). It was originally intended that it would perform this action on every page. However, it only ever worked on the index page. After considerable time spent, and a discussion regards same with a mentor; the author was unable to fix the issue. Thus, a separate class was created for this style so that it was unique to the index page. The remaining pages share another class, which does not include a slide in from left style.
-
On very large or very small screen sizes the band pictures may display as significantly more zoomed in or zoomed out. This isn't ideal as some band members, or band members heads may not be visible on viewports at either end of the scale. This could be addressed using image-editing software such as Photoshop to create various photo sizes for various screen sizes, although it may be quite time consuming.
-
The embedded Youtube videos also show a logo of the Youtuber who has shared the content. It would be preferable aesthetically if these logos were not present. The author attempted to remove the logos with some custom styles, but was unsuccessful.
The website has been deployed to Github Pages and can be accessed here
This project has been saved to a Github repository from the beginning of development. Hosting it to Github Pages was very straightforward. In the repository, from the settings menu, Github Pages was activated and the master branch was included as the source. A message is then generated by Github containing the following information: Your site is published at https://markwilde33.github.io/CI-project-one/
In my case when I clicked on the link it returned a 404 error. After visiting Stackoverflow, I took the following advice:
<!-- input the following commands in your terminal -->
$ git commit --allow-empty -m "Trigger rebuild"
$ git push
This fixed the issue and the website loaded as intended.
from the console type:
$ git clone https://github.com/markwilde33/CI-project-one.git
$ cd CI-project-one
Open index.html in your web browser.
App available at http://127.0.0.1:5000/
The Html Fundamentals module, Css Fundamentals module and the User Centric Front End Development module were used for guidance.
- Google Images was used for band pictures.
- I received inspiration for this project from Code Institute, The Net Ninja, Brad Traversy and Corey Schafer.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent