code-institute-submissions / zywek5000-index.html Goto Github PK

#THIS README GIVES BACKGROUND INFORMATION FOR THE DEVELOPMENT OF THE NEON GREEN webpage, and contains links to stages of the development process.

Code from other sources: The webcounter, some help (modified by the author) for the 'buy button'; navbar help from code institute tutorials and slackoverflow; Liverpool Skyline from google image search; the idea for using social media links in the footer inspired by an earlier code institute tutorial. The method and code for the flashing 'order now' banner was taken from an online tutorial.

The 'Sounds' page was helped greatly by 'Soundcloud' and I would like to acknowledge the inclusion of their media player. The music is entirely the work of Jake Zywek, including all of the music, lyrics, and song titles.

ALL OTHER code has been commented/referenced in the Gitpod development source.

NEON GREEN: A webpage for a Semi-Fictional Band

Due to my interest in music, both playing and listening to, as well as production, I decided to play it safe by creating a website for a band. The sound files on the page are my own work, music as well as lyrics. I had considered other ideas, such as a website for a bar featuring gluten free beers, but I decided because I am new to web development, choosing a topic I am familiar with, such as music, would be a wiser option. To make the site uniform in appearence, and to give a nod to the Band's origins, I decided to feature the Liverpool Skyline, because it is instantly recognizable.

Regarding the band name, any resemblance to a real or fictional band, is purely coincidental.

I wanted to stick to the brief, and did not want to overreach myself by creating something too unwieldly, so I opted for a number of pages that dealt with each aspect of a live, functioning band-the cover page, a band biography, gallery, Frequently Asked Questions,Shop, Contact, and a page with sound files of the band's music.

##UX

This website is for fans of the band who want to know more, and who want to be informed of the band's latest activities, In addition, the site is also intended to provide information for the general public who might not be familiar with the band. The sound files were included for this reason. The website has been created with an 'official' vibe in mind, to ensure the user gets the highest quality content, and most importantly, content that is up to date. The visitor counter was added to give the site a sense of caring for the user, and keeping them upto date with site traffic, to properly gauge how relevant the site is.

*As a fan, I will see the homepage, with clear links to other parts of the site. These are located at the top, and clearly visible. I will see familiar and relevant content, which confirms my decision to visit the site.

I made sure to use the 'Media Screen' method to ensure the site sizes up properly on numerous devices.

*As a new visitor to the site, the layout provides information and makes the band immediately accessible.

Features

Homepage with navlinks to other parts of the site. This enables users to easily and quickly navigate the site.

A top banner offering a discount to order the band's new album online.

The code and layout for the card payment section was inspired by https://codepen.io/quinlo/pen/YONMEa.

Technologies Used

HTML-Boiler plate, in addition to custom code developed by the author.

CSS-the author's own work, as well as code lifted from earlier code institute projects.

Bootstrap (for custom CSS)-I only used Bootstrap to show I had an awareness of the technology and how to use it; it wasn't used to substitute my own creative process.

Deployment/Testing

The site was deployed onto Github in order to test whether the appearance and layout was working the same as on the Gitpod IDE. This proved to not be the case. Some editing was required, particularly on the Navbar and Headers, to make them center aligned. In addition, the banner offering a discount for the album was moved below the Navbar, and the 'Buy Album' button was moved onto the 'Sounds' page.

The picture gallery also needed work, and changes to the CSS were required to make it easier on the eye: introducing 'display: block;' solved some of the issues.

After these changes were wrought, the layout improved, and was more user friendly, and easier to navigate. The fact that the Navbar was now at the top of the home page, with nothing blocking its visibility, was a good improvement.

The reason for differences in the Gitpod IDE version were for common sense and ease of use- for example the 'buy album' option was moved to the 'sounds' page, because I felt it would be better to hear versions of the band's music, and then be presented with a purchase option.