Throughout this project I will be using everything that I have learnt so far from Code Institue. This project will consist of HTML5, CSS3. (I may add abit of JS)

My site is for the purpose of my friends in my town who create their own EDM (Electronic Dance Music). I have decided to go outside the scope a little as this could potentially be a good boilerplate for when they are ready for a website designing.

This website is designed to benefit my two friends from my hometown. They make and create music/entertainment under the band name 'M3DL3Y' I wanted to showcase my skills that I have learnt so far by creating them a website that they would of not been able to create without the likes of a web builder.

The UX for this project is quite simple, it's mainly a static site for people to be able to globally find the bands lastest info. New releases, keep up to date with the lastest informaiton, video updates and so on. The colour shceme was requested by the band. they have always been keen on a dark background with there main colour being purple.

Please note I have insisted for the contrast of the purple to be different as I advised it will be more beneficial to have a higher contrast for readability purposes.

• All the images for this project have been provided by the band, they create all their own artwork.

• Homepage ticker - JS fiddle ticker used to show visitors that the band have just released a new EP.

• Spotify and youtube 1 click follow buttons added for ease of ability to be able to follow the band on their social platforms.

• Scroll to top button implemented for quick access to get back to top of the site.

• Jquery scroll ticker used to replace redundent marquee html element.

• Nav - Bootstrap hamburger menu used for mobile/tablet. Bootstrap used for quick production of modern CSS and use of their predefinded classes.

• Spotify and soundcloud used for the music page, rather then using mp3's and hard coding the songs onto the site I have made use of spotifys and soundclouds API embeds. This is for ease of access to their songs instead of redirected the user to their platform site the user can have capability of listening to a song direct on the bands website.

• Videos section - All the videos used on this site are Youtube embeds. Yuotube used for ease of access to view the bands videos. Youtube follow button added + embed so the user does not have to be redirected from the bands site to see their youtube videos.

• Social buttons - I have added the bands social follow buttons to the footer of every page, this is aimed at hoping to increase their following by traffic coming from the website. I went with the approach of in sight in mind, if the socials icons are visible all the time in the footeer as the user gets to the bottom of each page I assumed htis could improve social following.

• Gallery - Images optimized to reduce size to improve page laod speed. Fancy box plug in use djsut for the purpose of this project. Fancy box was a improvment to improve the UX for the gallery when viewed by a visitor.

• Contact form - CSS used to add abit of interactivity to the contact page. I have used emailJS for the purpose of this contact form. UPDATE - I have changed the emailJS to a php mail function.

• Wireframing was done with the band present I just did some mock ups on paper of how the band wanted their site to generally look and feel.

• Pull soundcloud songs and spotify songs via API GET method, this way when the band update their platforms the updates can be pulled through via the API call rather then keep the embeds up to date.

• Youtube videos could be pulled through via the youtube API also.

• Subscription form could be added to site. Mailchimp or other tech could be used to gather a mailing list for the band to be able to do regular new updates to their subs.

• Instagram photos pull from their instagram account.

• Better form validation. UPDATE - I have added some custom JS to improve form validation.

The website is built using HTML5, CSS3 and Bootstrap framework, little JS/Jquery for interactivity.

The site is fully functional without any local files needed to be downloaded all frameworks and scripts used are loaded via an approved CDN. Before deployment the site was tested on several browsers and devices. This site is supported all browsers. Check below for tested devices and browsers.

• Bootstrap - The web framework used
• W3 Schools - Help & tips
• Font Awesome - Icons

• Bootstrap 3.3.7
• Font Awesome 4.7.0
• JQuery 3.2.1

I have created custom fonts using @facefonts CSS 'Exquisite Corpse' used to keep original band branding.

• Scroll-up.js - To add scroll to TOP button click. Jquery

• Ticker.js - Adds left scrolling effect to home alert (Replaced html marquee attribute) JSFiddle

• SendMail.js used for contact form. EmailJS

• Fancy box - Used to improve UX when viewing the gallery. Fancybox

• Validate form - Custom made JS script by me to improve form validation. Javascript

• PHP Mailto script - Custom made by me for the contact form post method. PHP

• Tested on Chrome (Tested in DevOps on all mobile and tablet devices possible for testing.)
• Tested on IE
• Tested on Samsung S8
• Tested on Samsung S9
• Tested on Iphone
• Tested on Firefox
• Tested on Opera

All my mark up is HTML valid All my styling is CSS valid

I will use GitHub for version control.

Shane - Muirhead - Project 1