This is a promotional website for "The Monkees" whereby fans and potential fans can experience multimedia clips, purchase music and browse an image gallery. As well as showcasing the band, it publicises their availability to perform at events such as weddings and Christmas parties. The site was built using HTML, CSS and Bootstrap using a mobile first approach. Visit the site at this address: julian-garcia.github.io/the-monkees

Pre development wireframes were created using Balsamiq (see wireframes.pdf). Website coolors.co was used to determine a colour scheme that uses complementary colours (see palette.pdf).

To ensure content readability, sufficient colour contrast of text against the background has been verified using the WebAIM colour contrast checker. According to the WCAG (Web Content Accessibility Guidelines) the contrast for this site is rated level AAA for normal and large text. For the navigation and page title sections the contrast ratio is 9.24:1 (it needs to be least 7:1 for normal text and 4.5:1 for large text).

Album time line - designed using custom CSS to complement bootstrap CSS.

Image Gallery - makes use of bootstrap modals, displaying each picture in its own container.

Event Listing & Booking form - Simple contact form to book a date time for a gig. Includes CSS styled event listing using bootstrap components.

Media Gallery - video and audio elements to enable the user to play popular videos and songs

• HTML5/CSS3
• Bootstrap v4.1.1
  • Define site structure and pre-defined components
• Fontawesome v5.0.10
  • Icons throughout various sections
• Google Fonts
  • Title and body fonts (Dosis and Crimson Text)
• Balsamiq
  • Wireframing software
• Coolors
  • Definition of a colour scheme

Used W3C validator to identify HTML errors which were resolved. To test for site responsiveness, browser responsive mode was used to render the site simulating various screen widths. Tested across various browsers including: Safari, Firefox, Chrome and Internet Explorer. Cross browser compatibility can be confirmed by visiting browsershots.org and feeding in the URL https://julian-garcia.github.io/the-monkees/index.html. Visual checks were also performed on an Apple iPhone SE and Apple Macbook Pro.

Various manual checks were carried out to ensure proper website functionality and responsiveness:

The site was deployed using the Github Pages feature of Github which provides a server side address hosed by GitHub in order to render a static website. To contribute to this you'll need to do the following:

• create your own Github repository on GitHub
• create a local project directory on your PC,
• navigate to that directory on the command line (for command line I use iTerm2 on my mac),
• clone this github repository by entering: git clone https://github.com/julian-garcia/the-monkees.git. Then use any text editor to make your changes to the CSS, HTML and/or content. To test, simply open index.html or the other html files locally in any web browser. Having finished development and testing:
• Navigate to your project directory on the command line and enter git add .
• Enter git commit -m 'My changes' - replace 'my changes' with a brief overview of your changes
• Finally deploy using git push -u origin master
• To set up the static website, go to the settings of your github repository and select "master branch" from the source dropdown in the Github pages section

Images were obtained from commons.wikimedia.org and Pixabay. Usage rights permit the general public to use them.