A front-end only website for a band called YELLO has been developed using technologies that have been learned throughout User Centric Frontend Development section of this full stack web developer course.
The primary target audience are fans and potential fans who wish to use the website to view videos and audio from their back catalog, and any new material as it becomes available. As well as showcasing their music and publicise their availability to perform at events.
A Wireframe Mock-up has been created using Balsamiq
Please see YELLO_Website_Mockup.pdf
The YELLO website was developed in AWS Cloud9 workspace using a mobile first approach.
To test this approach Google Chrome DevTools 'device mode' was used for the following devices.
Iphone 5/SE, Iphone 6/7/8, Iphone 6/7/8 Plus, Iphone x, Ipad, and Ipad Pro.
All changes commited to Git, Then when complete the website was pushed to GitHub.
AWS Cloud9
- Local Repository
Balsamiq
- Mockups 3 for Windows v3.5.15
Bootstrap CDN
- https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Css3
Fontawesome CDN
- https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Git
- Version Control
GitHub
- Remote Repository
Google Fonts Link
- https://fonts.googleapis.com/css
Hover.css CDN
- https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css
Html5
- Paul Edward Bennett
Color Scheme
- https://coolors.co
#5bc0eb - Blue Jeans
#747e8f - Slate Grey
#f6f942 - Maximum Yellow
#fa7921 - Princeton Orange
#6fa032 - Palm Leaf
Music Database & Marketplace
- https://www.discogs.com
Bands Facebook Link
- https://en-gb.facebook.com/yello.ch/
Bands Instagram Link
- https://www.instagram.com/yello_official/
Bands Twitter Link
- https://twitter.com/yello_band?lang=en
Bands YouTube Link
- https://www.youtube.com/results?search_query=yello
Video Player Link
- https://vimeo.com/