My first Milestone project from the code institute is a fictional fan orientated website for the 60's rock band called the Monkees who are supposed to be the client in this situation. The website is a front end responsive four page site that is supposed to be for new and existing fans of the band. It allows the fans to interact with the bands music and video they provided us to allow fans to listen to and watch their video. It also gives a brief background of the band and provides information on events and allows fans to book the band for smaller functions like parties for example. It also encourages fans to visit the bands social media accounts as requested. It contains pictures of provided by the band for use on the website.
My website has used bootstrap to try make it responsive on multiple platforms eg.desktop or mobile. I also tried coding myself so that it was not solely bootstrap based but a mix. Based on my testing using codepen i have determined it to be responsive. Given my limited knowledge at this stage i have tried to use what i have been able to learn to make it responsive.
- HTML5
- CSS3
- Bootstrap
- GITHUB
- Google Chrome developer tools
- VScode
- Codepen
- Balsamiq
I used Balsamiq to make a skeleton plane so that i was able to map out my design and layout for my project. It was divided into seperate pages that i planned to be similair in layout and linked to each other with a navigation bar. I tried to make it as easy and uncomplicated as i could because of my limited knowledge so far and to also decrease the negative user experience which might come about if i over complicated the website. Website was coded in vscode and coded and tested on codepen. I saved the documents on my laptop and then uploaded to GITHUB via github's upload file function.
Each page was tested locally with codepen and Vscode and on GITHUB pages using Chrome developer tools, testing its functionality as well as look and feel (in landscape and portrait mode) on Galaxy S5, Nexus 5S, Nexus 6P, iPhone 7, iPhone 7 Plus, iPhone 8, iPhone 8 Plus, iPhone X, iPad, iPad Pro and responsive desktop. All links were tested along with music tracks audio controls and video player. I also tested out the red button that helps navigate fans who want to hire the band to the appropriate user input form on the Contact page while they are looking at the Events page.
I based my code and layout similar to the mini-resume-project from the course and modified it and changed it to make it my own.
I also used www.Wikipedia.com for some information on the band as i was not cued in on them till now and then reworded the content to my own words. I sourced the images,video and music from the project brief which contained a link to the github repository which i was allowed to access to use the given content to put in the website. The links for the social media such as Twitter,facebook and Youtube were copied into my html so that they function when clicked on by the user.
I general layout stayed similar to my initial plan but i decided to not change the photo at the top left corner to a different one on each page and instead kept things familiar to the user with a one decent photo of the whole band in that position. Also the links to the social media I decided looked better in the footer than in the left bottom corner. Finally before i submitted the website i made sure i touched up anything i thought could be done better.