https://deganoth.github.io/the-monkees-band-website/

https://ide.c9.io/deganoth/the-monkees-band-website

This is project aimed at designing a fully responsive mobile first designed web application. The styling is that of a 60's era band. The project requested a means of contact for their fans, social media links, and to showcase their music online, along with being able to book the band for upcoming events.

Since the website was initially aimed at people of an older generation, large fonts with easy to navigate areas were chosen. Fans want to access band media, and stay up to date via email or social media. What the band wants is to make themselves available to play to their fans. During the wireframe mockup, I decided on a one page design. For the user, it means they never have to leave the page with everything they need on it. Each section rolls on to the next and with mobile centric design in mind, a button linking back to the home menu at the bottom of each section allows the user to get back to the menu at all times. This was a later addition made after testing on multiple screen sizes.

The navbar menu is fixed to the top of the primary page. In desktop mode it is a scrolling menu which follows to each section. On mobile, tablet and notebooks the menu is fixed in place above the home content. It's scaling ability is controlled by the grid system of v4.1.3 of Bootstrap.

A button is appears on screens smaller than 1280px. It allows the user to select any main menu item and instantly have a way to return to the main menu. It displays as a small button on the bottom right of the screen and activates within 20px of movement from the top of the webpage. This feature makes use of a W3Schools JavaScript example.

This section includes an additional fanclub signup option, a further booking option, and all social media links. The fanclub signup activates a modal requesting and email address. The booking button brings the user to the booking form at the bottom of the main page. Each social media icon changes color on hovering, and when clicked opens a new page directly to the associated platform and profile. The modal was created using the same code form the Whiskey bootstrap bootcamp module of the course.

To stick with the one page design, a smooth scrolling script was used. An assigned ID with a # symbol in front was associated with each page section. A link to each page section was assigned to each main menu item. Once clicked, the respective menu item scrolls to it's associated page section. The timing is set to 800 milliseconds by default. This along with the jQuery animate function allows for smooth scrolling.

With bootstrap's grid system in use, a flexible two column design was used. Labeled "top" and "button" sections for mobile design reasons, the top section shows a band logo with a paragraph linking to each feature of the page. In the bottom section, a fanclub signup modal call to action is available.

This area shows 4 embedded music tracks in the top section, and one video in the bottom section. Each track has a background image of the associated song, and the video container is fully scalable to any device screen size.

A collection of band photos along with a short bio of each member adds a personal touch to the website. While showcasing the photos supplied by the band, it also shares a short career history of each member.

With a band image on one side and a booking form on the other, this area allows the user to send details to the band regarding events they wish to book them for.

These pages are linked to both the fanclub sign up, and booking form submit pages. They have the same layout as the home section, with only one column showing a band logo, and a thank you message.

These tools were used to create the basic layout and style of each element on the webpage

This is a rapid prototyping platform for developers. It allowed me to test any additions or changes made to my code.

As an extensive library for CSS3, jQuery and Javascript, this allowed me to write less unique CSS, and use existing functional templates accepted across all browsers.

I made use of this for social icons. It has a vast collection of fonts, icons and images available for use.

I found my font here. It has a huge collection of freely available fonts for use in such projects. I chose "Righteous"

I made use of this to host my project. I communicated via Cloud9 and shared all project files and folders, including this file.

For some simple animation and interactivity on the webapage, I use this. I added the smooth scrolling, floating "Top" button.

This was added via Google API. It integrates with JavaScript and Bootstrap to make them available for use.

While struggling with image filepaths, I copied my script to this editor and downloaded the website content. It allowed my to discover the absolute file paths were not accepted by GitHub. Cloud9 allows short hand referencing. I resolved this conflict with local testing.

Through the many iterations of section scaling, I made use of the inspector tool to determine correct choices, and which CSS classes were at play.

To check functionality of all parts, I made use of the webpage as a typical user would. I ran into issues with the sign up modal, and booking form buttons. I made use of the Bootstrap Bootcamp to see what order a HTML file requires JavaScript items to be placed.

I found this tool most useful and somewhat more detailed than the browser developer tools. It included smaller notebook and latop screen sizes. This allowed my to see flaws in my layout regarding floating navabars and footers. Sizes were altered to suit smaller screens. With the help of friends and work colleagues I determined the ease-of-use on the following devices.

• iPhone 5 - 8
• Samsung Galax7 S5, S7, S8
• ChromeBook 10"
• iPad Mini
• iPad Pro
• iPad 2

I made use of GitHub to deploy this project. The link is shown above in this project, along with my cloud9 Developer link. The image file paths are different, as discussed above when referencing Sublime.

With the help of my Mentor, Spencer Bariball, I found solutions to the following issues, with the listed links.

Scrolling effect - W3 Schools - JjQuery Script with adjustable parameters for scroll time

• https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

A fixed footer for making a frame of information around each window

• https://stackoverflow.com/questions/4069734/fixed-header-footer-with-scrollable-content

Image filepaths changed between prototype and github repository.

• Cloud9 - /images/monkees-newsize.jpg
• Github - /the-monkees-band-website/images/monkees-newsize.jpg

Modal use taken from Bootstrap- Bootcamp project.

Back to top button - W3Schools

• https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

• My Mentor, Spencer Bariball for showing me the ropes, and being a great teacher.
• https://wikipedia.org/ - Used to get information about each member of the band.
• https://www.w3schools.com/ - An invaluable resource to problem solving and troubleshooting.
• https://codeinstitute.net/ - For making this possible.