Giter Club home page Giter Club logo

fproject's Introduction

The Monkees front-end project.

This is a front-end project consisting of four pages , index.html, WhoWeAre.html,OurSongs and OurConcerts. The project is using Bootstrap, responsive design, photographic backgrounds, creating a subject-related environment. The project is responsive and is using a mobile-first approach.It is easy to use and has a positive effect on the visitor/user.The backgrounds are carefully chosen and are underlining the band's long experience.Overall, it is a easy to use , mobile-friendly web page that will lead to a pleasant experience for the desired target audience.

UX.

The project is designed for the band's audience and the band's fan base and not only.Every music fan and people who are looking for e planned event entertainment they should realize using this web-page that the band is approachable and affordable, getting easy in contact with the band using the contact form .The navigation bar is a way to get to the home page but the more attractive navigation menu situated center-lower side of the page will take the user to the next pages that contains photos of the band members,information about the band, music samples from the rich portofolio and a schedule of the concerts from the band next tours.There are also user experience feedbacks from around the social-media and buttons designed to help the users to contact the band representatives for organising future events. Please find inside the main project directory inside "sketches folder" , the drawings that helped me to plan the creation of the project.

Features.

The landing page includes a navbar with a home page repeated on the next pages, link to a page with informations about the band,social media links, a central section containing a promotion for free tickets at the next concert, as well as a button triggering a modal for accessing a booking system for various events. a feedback section with few social-media quotes of band's fans or clients. a main navigation menu comprised of four collapsable links to the next pages allowing the users to access the desired pages. a footer containing the social media icons where the band can be followed by the fans or anyone who desires more info.

The WhoWeAre page contains the same responsive navbar, album covers and informations about the band , the band members, being accessible by clicking on the collapsable buttons next to the photos.

The OurSongs page contains: a videoclip from the band's portfolio, few audio tracks with controls allowing users to listen to the band's most notorious hits. the same navigation menu, a footer with social media links.

The OurConcerts page contains:

a collapsable list of concerts from the present band's tour, few feedback impressions of fans following the concerts. the navigation menu, the footer with the social media icons and links.

The Contact page

brings up a modal with a message window the users being able to contact the band for any querries.

Tehnologies used.

I have used for this project: HTML5, CSS3, Bootstrap 3.37. for creating a responsive design. jQuerry 3.31. for the dropdown menu in navbar bootstrap js. this was necessary for creating the modals . rock-salt font, for styling the name brand font-awesome. used for social media links icons.

Testing.

I have went trough an extensive testing for this project , accessing every link repeatedly. please find more details on the README.1.md

Deployment

I have deployed my project on Github Pages where i've had some problems with the links, i have asked a tutor for help to link my external css file as it wasn't recognised .After that, i've had some problems with links addresses in the css file for background images, but after a research on internet i was able to fix it. I haven't seen any major bugs during the project building. I've tried to keep it simple. I have built this project using Notepad++ and continued in c9.

Credits.

Credits to "The Monkees" for their great story and audio/video.

Credits to Code Institute offered assets for the project,

Credits to Wikipedia for informations about "the Moonkees", the singers and their story. "https://en.wikipedia.org/wiki/The_Monkees"

Credits to pxhere.com ,where i was able to find photos licenced "free to use with modification"

https://pxhere.com/en/photo/887979 https://pxhere.com/en/photo/558617 https://pxhere.com/en/photo/719913 https://pxhere.com/en/photo/627956 https://www.pexels.com/photo/photography-of-a-man-wearing-black-shirt-903661/ these are some of the photos used.

I would like to offer credits to a tutorial for a navbar that i've modified ,I believe it was this :https://www.youtube.com/watch?v=CPvZzJlUz20.

fproject's People

Contributors

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