Alsam Band

gifs

This website is a responsive website designed for an Austrailian based band with the aim of increasing their fan base with their music resonating with their fans when they listen to the audio and video files added on the webpage.

The website aims at targeting potential fans, giving them a feel of the band events and an opportunity to connect with them.

The website consist of four Pages:

1. Home page: This page consist of information about "The Band", the teams ,photos, videos and links to their social media pages.

2. About: This page gives details about the band, the team they work with and links to their social media platforms.

3. Media: The media page consist of photos, audios , videos and links to their social media platforms.

4. Events/Tours : This page consist of events,tour dates and bookings, comments from fans and links to their social media platforms.

Each page in the website has a link to their social media platforms.

Demo

A demo of the website is avaliable here

UX

My objective for this website is to design a responsive website to target a larger number of audience.

Photos, videos and Audios have been included in the website. It also includes their past and future events and tours on the website. Fans can also connect with the band via their social media pages.

Features

The website has the following features:

1. Comments

2. Booking

3. Audios

4. Photos

5. Videos.

6. Navbar

7. Comments

   1. "Go to the Events page" scroll down the page and go to the comment section
   2. "Fill in an empty field and press the submit button"
   3. "A thank you for submitting mesage will be displayed below"

8. Booking

   1. Go to the Events Page" scroll down the page to the to book an event/buy tickets.

9. Video 1.The video

• The video feature allows the user to watch present and past videos. It navigates to their Youtube Channel.
• The Audio feature which was embeded from spotify also sends you to their spotify page which gives all their music.
• The comment feature allows you to interract with the band directly whiles on the webpage.

4. Navbar 1.Allows your to navigate through the various pages/sections of the website.
5. Audio 1.Click on media link in the navbar,scroll down to the audio section to listen to audios via spotify

Mockups and Wireframes.

The sketches below were used to design the layout.

• Mobile
• Medium
• Desktop

Features left to Implement

I plan on allowing the photo feature to be clickable in other for the user to have a wider or larger view of the photos.As seen in the webpage. The photo is currently not clickable as intended but will be implemented in the near future. I would like to also implement a live chat section where fans or potential fans can be able to chat with band while they visit the webpage. A robot feature will be added in feature

Technologies Used

• HTML5 - It was used in defining the structure of the project.

• CSS - I used cascading style sheet(CSS) to style the project.

Libraries

• JQuery
• Bootstrap4
• Font Awesome
• Font Awesome Icons
• Bootstrap cdn

Framework

• [Bootstrap]

Other

• Am I Responsive - Online tool was used to display the project on various devices;

• Balsamiq - The software was used to create the project mockup and Wireframes

Testing

Code Validation

CSS

CSS code was validated using the W3C CSS Validation Service- Jigsaw

In the process of validation the CSS code, the following warning appeared: root Parse Error {--blue:#007bff; :root Parse Error ;--indigo:#6610f2; 6 :root Parse Error ;--purple:#6f42c1; 6 :root Parse Error ;--pink:#e83e8c; 6 :root Parse Error ;--red:#dc3545; 6 :root Parse Error ;--orange:#fd7e14; 6 :root Parse Error ;--yellow:#ffc107; 6 :root Parse Error ;--green:#28a745; 6 :root Parse Error ;--teal:#20c997; 6 :root Parse Error ;--cyan:#17a2b8; 6 :root Parse Error ;--white:#fff; 6 :root Parse Error ;--gray:#6c757d; 6 :root Parse Error ;--gray-dark:#343a40; 6 :root Parse Error ;--primary:#007bff; 6 :root Parse Error ;--secondary:#6c757d; 6 :root Parse Error ;--success:#28a745; 6 :root Parse Error ;--info:#17a2b8; 6 :root Parse Error ;--warning:#ffc107; 6 :root Parse Error ;--danger:#dc3545; 6 :root Parse Error ;--light:#f8f9fa; 6 :root Parse Error ;--dark:#343a40; 6 :root Parse Error ;--breakpoint-xs:0; 6 :root Parse Error ;--breakpoint-sm:576px; 6 :root Parse Error ;--breakpoint-md:768px; 6 :root Parse Error ;--breakpoint-lg:992px; 6 :root Parse Error ;--breakpoint-xl:1200px; 6 :root Parse Error ;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; 6 :root Parse Error ;--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace} 6 abbr[data-original-title], abbr[title] Property text-decoration-skip-ink doesn't exist : none 6 .toast Property backdrop-filter doesn't exist : blur(10px)

Posted this Stack Overflow thread explained that it is just an information that imported style sheet will not be validated.

These warnings remain unresolved I have conducted enough testing and i strongly believe that the site works properly and as intended to be.

The website works perfectly on as intended. It is responsive and works on different screens. -iPad Pro, iPad, iPad Mini (portrait & landscape);

iPhone 5/SE (portrait; each column takes the full width on the row)

iPhone 6/7/8 (portrait each column takes the full width on the row)

iPhone 6/7/8 Plus (portrait; each column takes the full width on the row)

iPhone X (portrait each column take the full width on the row)

Large screens (Each row has 3-4 columns)

Deployment

-The website was deployed to the branch master on Github.

Media

• The photos used in this site were obtained from the link below: facebook Instagram

Videos

• Videos were obtained from their official Youtube Page

Audios

-The Audious on the webpage was embeded from spotify spotify

Acknowledgements

• This project was inspired by [Hillsong]
• The content in the about section was taking from wikipedia
• The codes in the events page were inspired by w3schools

I would like to thank my Mentor Maranatha Ilesanmi for his guidance and support throughout this project.

I would also like to thank my wife for the support throught this project

Disclaimer

This is for educational purposes