Giter VIP home page Giter VIP logo

monkeesproject-1's Introduction

The Monkees

Built by Cecilia Barriga

This website is a milestone project for Code institute. The aim of this webpage is to target fans of the group that wish to listen to their favorite tunes as well as being informed of new material coming out; but also to attrack new potentiel listeners.

UX

Users have access to their most famous albums, and a link to their spotify page so they can listen any album they wish to listen to. Regarding videos, they will be able to find the most played videos, and all the links to their social media, including youtube, in case they wish to see more videos and/or info about them.
They will also be able to see what new materials might be coming out as well as the dates of their upcoming tours.
In case they wish to have The Monkees playing at their event, they have a contact form in order to send their request.
And finally, they will find some information of the band and their band members. I pair this with their picture, for user to identify easily each member.

Features

The website is composed of 4 pages:

  1. Home page: front page of the site where users can play 4 of the most played songs, also the latest materials and finally publicise their availability to perform at events with a button that link to the contact page.
  2. About page: background of the band and its members.
  3. Media page: there is a list of the best spotify albums, and a link to their spotify page. Also the users will find the 2 most played videos.
  4. Contact page: where the band can be booked for any type of events.

Each page has a nav and a footer:

  1. Nav: has a link to each page that toggles for smaller devices.
  2. footer: has all the social links of the band inluding "The Monkees" Youtube page.

Technologies

  • HTML5
  • CSS3
  • BOOTSTRAP 3.3 (css, JS, Components)
  • Fontawesome (for "Keep updated!" in Home page section icons)
  • Hover.css (for hovering effects)
  • JQuery

Testing

Testing tools used to verify codes:

  • Chrome DevTools

The website has been testing in different screen sizes to make sure is responsive. Differences depending on screen sizes:

  • The nav is toggled in sm and xs devices
  • In home page realingment of the different sections to suit the screen size, and also the modal is reduce of size to fit in smaller screens.
  • In about page in order for the user having a better experience, I changed some of the pictures in the smaller devices.
  • In media page realingment of music and videos in Listen page to suit screen size

Deployment

Published on GitHub, and built in Cloud9.

Credit

The content was taken from Monkees website and Wikipedia. The imagery was mainly taken from google images.

Acknowledgements

The project was all inspired from various projects all along the Code Institute course. I used the red, yellow and blue colors from the Monkees website.

monkeesproject-1's People

Contributors

cesole 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.