This website was designed for a singer, in it, you can easily find his social media links, listen to some of his musics and watch his music videos. You can also check the dates and location of the next shows, check tickets availability, buy tickets for the shows and even arrange for the band to come to an event by filling and submitting the contact form.
In this project, the design was kept simple and intuitive, allowing everyone who will use the website, to easily locate what they are after and help them achieve what they want with maximum ease.
- As a user, I want to be able to check when and where the next shows are going to take place, so I can make plans to attend.
- As a user, I want to be able to hear some music samples.
- As a user, I would like to see some music videos.
- As a user, I want to know how I can get in contact to arrange the band/singer to attend an event.
Desktop Mockup In this link you will find the initial mockup for the desktop version.
Mobile Mockup In this link you will find the initial mockup for the mobile version.
This allows users who want to book the band to go to an event to get in touch with them by having they fill the form and submit it.
This page allows users to see when and where the next shows will be, know if there are any tickets available and purchasing tickets by clicking on the "Buy Tickets" button.
This page allows users to listen and watch videos of some of the singer's music.
The project uses JQuery to simplify DOM manipulation.
The project uses Bootstrap to allow for maximum responsiveness on various screen sizes.
The project uses Font Awesome to be able to use icons for social media links.
The project uses Google Fonts to apply the fonts used on the website.
To test the responsiveness of the website in various screen sizes, I used the developer tools inside the Google Chrome browser, verifying how the website reacted when shown in mobiles, tablets, and desktops. Always referring to the "Console" tab to make sure that the code didn't have any bugs. To test the markup of the files, I frequently used the W3C Validation Service to verify them.
- As a user, I want to be able to check when and where the next shows are going to take place, so I can make plans to attend.
- As a user, I want to be able to hear some music samples.
- As a user, I would like to see some music videos.
- As a user, I want to know how I can get in contact to arrange the band/singer to attend an event.
- Go to the "Shows & Tours" page, where you can verify the next shows dates and location, also you can verify the tickets availability for that show.
- Go to the "Shows & Tours" page, there you can listen to some music sample and watch their respective music videos.
- Go to the "Contact Us" page
- Try to submit the form with an empty input and verify that an error message about the required fields appears
- During the testing, I encountered a problem with the music files. To solve the issue I had to make them shorter, that way, making the file size smaller so they could run properly.
- During testing, there was a problem with the home link on the navegation bar. To solve it I had to redirect the page to the "index.html" file.
For the deployment, the hosting platform used was GitHub. With every change made, I would use the add command before commiting them to my local repository. After that I would use the push command to send them to my GitHub repository page.
- The information used on the home page was copied from the Wikipedia article Rag'N' Bone Man.
- The photo used in this site were obtained from google images.
- I received inspiration for this project from the classes and the mini projects made in the Code Institue Course.