Milarby Acoustic Duo

Stream One Project: User-Centric Frontend Development - Code Institue

The Music industry is very competitive with my friends only having a Facebook page this was an opportunity to build a website for them to promote their great talents and enhance their future ambitions.

UX

The outset was to keep everything simple and get the users to access each section via a full navbar (full screens) or collapse navbar (for smaller devices) or to cover all the sections by scrolling down the index.html page without realising it. That way they would get a feel for the bands atmosphere and be targeted to the 'Contact Us' areas.

Technologies.

• Adobe XD,
  • To design the mockup for full screen and mobile which was also changed slightly while developing the website through reviews with the band. (bit of an Agile approach). This can be found in the assets/wireframe folder.
• HTML5
  • Elements
• Bootstrap
  • Used the Grid structure, Jumbotron, Form and styling classes provided to build the basic layout.
• CSS
  • Expanded the style.css file to enhance the structure that was built using Bootstrap.
• Google Fonts
  • Use the body font to keep the text with the same style.
• Font Awesome
  • Footer Facebook and YouTube icons.
• JavaScript
  • Collapsible Navbar and Contact Modal.

Features

This comprises of a fullpage main cover image (Home) and 4 sections being About, Photos, Video and Audio with a slightly different backdround colour to give a subtle division. The navbar was structure to only collapse for smaller devices because of the space they took and the expanded navbar for full screens had a better feel as it included a dropdown Media menu. The 'Contact' navbar link and the 'Contact Us' button use a Modal/Form with validation. The Video uses an embeded YouTube link and plays on the current index page as this is faster than loading the MP4 footage. (Discovered this feature at Facebook>developers>docs>plugins). The Audio elements came from a google search with the solution being at W3Schools. The Facebook and YouTube footer ICONS open new pages via target="_blank" to ensure the Milarby website remains active.

Features Left to Implement

Connect the submit function to send an email to the Milarby Acoustic Duo band with an automated reply to the requestor.

Testing.

• Added the required Grid structure, with colors to each section with placeholders and tested they worked for different device sizes.
• Checked that the navbar tabs redirected you to the correct sections.
• Tested the 'contact tab and contact us button' to ensure the modal worked for both.
• Tried to submit an empty form but all required fields and email formatting was highlighted to proceed before submitting.
• Tested that the video uses a YouTube link with the current index page.
• Tested that the Facebook and YouTube icon links open a new page and keep the current Milarby page actice.
• Tested the MP3 audio icons played correctly, at first I used links to the songs on SoundCloud but it gave
• the impression that they were not part of the website so I decided on the Audio elements with the MP3 tracks
• as they were not taking long to load.
• Used W3C markup validator to ensure all tags were open ,closed and correct attributes were used.

Deployment

GitHub was frequently used from the initial commit and after each milestone or test fix to ensure no rework was required. The master branch https://github.com/hurter3/Milarby was used throught this project. The website is published using GitHub Pages.

Credits

Author

Mark Hurter

Content

The content is similiar to the Bands facebook page and they expanded on the paragraph in the About section.

Media

All the media JPG and MP3 files were provided by the BAND via Dropbox.

Acknowledgement

Bootstrap and W3Schools were a great resource to enhance the ideas delivered through the Whiskey landing page and Resume projects (course material).
I received inspiration for this project from the participation of the band.