Giter VIP home page Giter VIP logo

user-centric-frontend-development-milestone-project-12's Introduction

Halveksia Band Page - Jai Austin

User Centric Frontend Development - Code Institute

This sites aim is to promote the band Halveksia and promote the upcoming shows, while also giving an informative look at each band member and the genral direction of the band.

Demo

A live demo can be found here.

UX

With the design of the site I aimed towards a dark tone, white and black sleek design with some grey put in for features. As the band and its potential users will more or less be attracted to the darker portrayal of the band. The layout is smooth and easily operable, straight forward and clear.

Technologies

  1. HTML
  2. CSS
  3. javascript

Features

The site has a fixed nav bar for ease of access to all parts of the page, with the logo acting as a return to top. the nav bar is also collapsable. A link to be able to purchase tickets and social links in the footer (please note that only the facebook one works due to there only being a facebook page for the band, no other social media pages exist.)

Testing

This site was tested across multiple browsers and on multiple mobile devices to ensure compatibility and responsiveness.

Deployment

This site is hosted using GitHub pages, deployed directly from the master branch. The live site updates automatically each time there is a new push to the repository. You can git clone the code to run it locally on your machine.

Content

I've written the basic structure and design of the entire website by myself, the site is laid out as a single page scroll down, with each section in its own sectoin. I have used some template code in my nav bar for the collapsable menu from w3schools for the Jave script as as far as my course has taken me we have not used java script hyet and this was a feature i wanted to include in my project. social links are provided in the bottom, though the only active link is to the official facebook page as the band does not have any other social media, thus making the instagram, twitter and youtube as dummy icons for effect.

Media

All photo media was given full permission by the band to use in this project, I was givin permission to upload them to an Imgur account in order to link them to the web page. Photos are not publicly released on imgur.

Acknowledgements

w3schools for the javascript link. https://www.w3schools.com/jquery/html_toggleclass.asp

codepen for the hamburger menu. https://codepen.io/designcouch/pen/Atyop?fbclid=IwAR3cUszE-V_OFBSLBYPM9AFFyPb3TqTpojMFTz5kDcznZ3El2gJueWBFDn8

user-centric-frontend-development-milestone-project-12's People

Contributors

jai-austin95 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.