The Monkees Band Website

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

This is the website for the band The Monkees as part of the first milestone project for Code Institute.

UX

My goal was to create a clean and responsive UX with easy access to media files. The website also contains a page section for the history of the members and a contact form.

Technologies

1. HTML
2. CSS
3. Bootstrap framework
4. Balsamiq for website mockups

Design

The page comprises a responsive navigation bar with a toggle button in medium and small devices, the navbar uses scroll spy to show the current section the user is in, media controls to play music, iframe for video and a carousel of images, a body separated in 4 sections and a footer only containing copyright information.

Testing

To ensure the correct functioning of the page, version control was applied. Every new styling and structure added to the page was extensively tested through refreshing, resizing the page and checking the links. All links to external pages will open in a separate browser tab. The form in contact.html will deny incorrect entries in the fields e-mail and telephone. The site was tested across different browsers and devices, such as IE, Edge, Mozilla, Chrome, Chromium, Firefox, Safari and Opera and laptop, tablet and mobile phones (Oneplus 6 and iPhone 8 plus) to ensure correct functionality.

Deployment

The source code is hosted in GitHub and deployed in GitHub Pages for web access.

If the repository is clone you are able to run the website locally. In order to achieve that, you can either download the zip file, extract it to a folder and run the file index.html or clone via git command. To do so, run git clone https://github.com/leonardofratini/ci-first-project.git in your terminal.

Credits

Media

All the media files files were provided by Code Institute, including video, images and audio.

Acknowledgements

The scrollSpy function and carousel were part of the Bootstrap framework created by the Twitter team.