Giter Club home page Giter Club logo

user-centric-project-1's Introduction

WEBSITE FOR A BAND

This five page frontend web application was developed as part completion of the Code Institute Full Stack Developer course. It is the milestone project for the User Centric Frontend Development stream. The application attempts to follow the project brief and requirements. It presents a sample online presence for a 1960's style rock band. It showcases the band's history, upcoming events/gigs, photos, songs, video and a contact form.

DEMO

  • A live demo hosted on Heroku can be found "here"

UX

  1. The application has attempted to meet all the requirements laid out in the assignment outline and design brief. No additional features were added outside of the design brief.
  2. The developer decided to use the resources provided in the directed GitHub Repository in the assignment outline. This decision was made to save time researching similar resources.
  3. The colour scheme was chosen to reflect the fun 1960's psychedelic style and vibe that was associated with the original "The Monkees" band.
  4. The structure of the header and footer elements for the project was heavily influenced by the header developed in the "Putting It All Together | Mini Project" module of the User Centric Frontend Development stream.
  5. The structure of the contact form element used in contact.html was influenced by same design used in the "Putting It All Together | Mini Project" module of the User Centric Frontend Development stream.

Features

  • Navigation Bar: The application contains a navigation bar that allows the user to navigate through the site from any page on the site. The developer decided to use 1960s' slang terms to label each page/section of the site. A "hover" animation is used# to highlight the selected option.
  • SideBar: The application contains a sidebar that outlines the bands upcoming live performances.
  • Footer: The application contains a footer that provides basic information on the band and provides links to the bands fictitious facebook, twitter and instagram accounts using fontawesome icons.
  • The index.html file/page contains photographs of the band, which upon clicked, open a separate browser tab to show a larger version of the same image.
  • The sounds.html file/page contains embedded mp3 music files so that the user can listen to a a selection of the bands songs.
  • The flicks.html file/page contains one embedded mp4 video file so that the user can see the band perform.
  • The contact.html file/page contains a contact form that would allow the user to send messages or or requests to the band.

Features To Implement

  • An ecommerce feature/app to allow users buy tickets for upcoming concerts. This feature could also be used to allow the band sell merchandise to it's fans.
  • A blog feature to allow both fans and members of the band share stories, articles, etc. This feature could also allow fans to comment and upvote on other contributions.
  • I would like to have made the "Upcoming Gigs" section more dynamic, interactive or visually appealing using either a carousel or collapsible feature.

Technologies Used:

  • HTML
  • CSS

Files Included

  • index.html
  • history.html
  • sounds.html
  • flicks.html
  • contact.html
  • style.css
  • album.jpg
  • album2.jpg
  • band.jpg
  • cover.jpg
  • cover3.jpg
  • dj.jpg
  • md.jpg
  • mn.jpg
  • monkees.jpg
  • pt.jpg
  • Clarksville.mp3
  • DaydreamBeliever.mp3
  • ImABeliever.mp3
  • SteppingStone.mp3
  • TheMonkees.mp4

Testing

  • As no module for testing has yet been covered on the course, no technical tests were conducted on the application.
  • A form of White Box testing was conducted by the developer using potential use cases or user stories to ensure that each link in the application followed the intended path. This was also done for each feature outlined in the Features section to ensure they were working as intended.
  • A form of Black Box testing was done by asking both a friend and the student's mentor on the course to use the application without instruction. Their feedback was then used to make improvements.

Deployment

This project is deployed using GitHub pages. It was deployed as follows:

  1. In the GitHub repository of the project, select the settings menu.
  2. Scroll down to the gh-pahes section.
  3. From the source option, select the "Master Branch" and "save". For an app to deploy successfully on gh pages, the home page must be titled "index.html".
  • The Github repository for the project/application can be found here
  • The application is deployed using github pages and can be accessed by clicking "here"

Credits

Content

  • The textual content of the site is paraphrased by the developer from the following page on wikipedia about "The Monkees"

Media

  • The application uses the resources provided by the Code Institute team for the project located in the following GitHub Repository.

Acknowledgements

  • The structure of the image gallery used in index.html was heavily influenced by a design portrayed by w3schools.com located at this page
  • The structure of the mp3 track player used in sounds.html was heavily influenced by a design portrayed by w3schools.com located at this page

user-centric-project-1's People

Contributors

kikidow avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.