Giter VIP home page Giter VIP logo

project-1_user-centric_frontend_development's Introduction

Guitar Studio

Assignment One: User-Centric Frontend Development - Code Institute

Guitar Studio website Problems: Mr. Goh from Guitar Studio requested to me to revamp his website, https://fredrickgohkh.wixsite.com/website. He shared with me his website cannot get any prospect interest to contact him and not really responsive . He is always very busy with his students or meeting and he will handle all request himself only.
My proposal of above challenge is to build a simple landing page cover five sections as Testimonials Gallery Our Rate and About Us This website will be only an English version.

** Demo https://github.com/kstan8668/Project-1_User-Centric_Frontend_Development.git

UX

I designed keep it simple “as a glance” landing page concept to minimise scrolling of the content. My objective is getting the prospect interest to call him as his requested he will personally handle any call or email from website. The bule mix with green colour scheme was provision a sleek feel. Click on the right top button, About us and Contact us will be shown, easy for prospect to brief understand the studio and to contact him. This website is focus on call of interest, Hotline button to allow any prospect to call him for enquiry.

** Technologies

  1. HTML
  2. CSS
  3. Bootstrap (v4.3.1)

Features

This site used ‘at a glance’ concept given less click and scrolling in Bootstrap with an extra Jumbotron function less smooth scrolling effect. As want to be difference, there is only one nav button, just client it and About Us & Contact Us will show, other area like Testimony and Tagline info will be fill within one desktop screen as minimised design. On the mobile, it will be responsive on all sections. Make it easy to scroll and read.

Features Left to Implement

An e-commerce platform would be implement to allow student to purchase guitar, basic guitar course and Ukulele too!. More comprehensive sections will be adding animations and sound effect on a hover, and a blog will be adding into it. I would like to propose a reward system into his future website to earn points and exchange items.

Testing

I have shown Mr. Goh on this website and he was pleased on this “at a glance’ simple design concept and I have achieved provided him to showcase his visual retail. He was very happy I provide a short content when viewing on a desktop between 13 to 17” screen, and more responsive & stable website then his current website. I will put this website live version in GitHub repository. https://github.com/kstan8668/Project-1_User-Centric_Frontend_Development.git

Tested multiple browsers : Chrome, FireFox, Safari, FireFox and Chrome >>> Past Tested multiple brand phone: iPhone (5,6,7,8 & x versions), Samsung Galaxy (J2 Pro, note 8 & 9), Xiaomi (max2 & 3)and Huawei (P30 series and mate 20 series) >>> Past Tested multiple tablet: ipad (mini 4 & pro versions) Huawei mediapad 5 >>> Past

Deployment

Fredrick Goh Guitar Studio website will be temporary host using GitHub. Mr. Goh can login Github to view the website and updated new commits. GitHub host location - https://github.com/?????? Landing page: index.html on local repository

Design Concept

One-page landing Design Concept was by me.

Credits

Content

All brief content was written by me. Colour schemes was chosen by me too!

Media

Images: Taken from Pexels(https://www.pexels.com/), a stock image library.

Acknowledgements

Jumbotron background: https://mdbootstrap.com/docs/jquery/components/jumbotron Bootstrap (v4.3.1): https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template W3schools : https://www.w3schools.com/html/html_css.asp

This is for educational use.

project-1_user-centric_frontend_development's People

Watchers

 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.