Front End Development Projects

Toronto public library image

Toronto Public Library Branch Filter

www.kahoucheong.ca/frontend-projects/5-Toronto-Public-Library-Info/

Introduction: It is a library filter which can filter libraries that have wheelchair accessibility, wireless WiFi, and operation days for the week.

Project Details:

  • Used simple HTML and CSS to arrange a simple responsive filter toggle theme
  • Fetched JSON data from Toronto Public Library open data
  • Implemented jQuery's event handlers to toggle branch description
  • Applied functionality for each toggle switch and displayed the filtered result into the display using CSS

Technologies used: HTML, CSS, jQuery, Media queries, and Bootstrap

Marisa Hoicka image

Marisa Hoicka

www.marisahoicka.com

Introduction: Marisa Hoicka is a multimedia and performance artist who creates installation, videos and paintings. She shows all her art works on her own website.

Project Details:

  • Setup project in Wordpress and backed up a copy of the website
  • Modified menu functionality where user can click on the name of each section to toggle the submenu
  • Removed unexpected bug of the menu, where the entire menu physically moves down when the menu is clicked.
  • Integrated Google Analytics to track PDF downloads and user's visits

Technologies used: HTML, CSS, jQuery, Wordpress, Media queries, and Google Analytics

Simple calculator image

Simple Calculator

www.kahoucheong.ca/frontend-projects/4-Calculator/

Introduction: It is a mathematical calculator which can evaluate addition, subtraction, multiplication and division calculations.

Project Details:

  • Used simple HTML and CSS to arrange a simple calculator theme
  • Implemented jQuery's click event handler to select each buttons
  • Applied functionality for each button and displayed the final result into the display

Technologies used: HTML, CSS, Javascripts, and jQuery

Harry's Realtor Site image

Harry's Realtor Site

www.kahoucheong.ca/frontend-projects/2-Realtor-site/

Introduction: It provides a platform for Harry Cheong to visualize all his past and current listings on the market.

Project Details:

  • Setup the project using simple HTML, implemented CSS styles and Bootstrap grid system
  • Responsive design
  • Setup tables to display different listings
  • Created a slideshow to display different images in a loop

Technologies used: HTML, CSS, jQuery, and Bootstrap

My Resume image

My Resume

www.kahoucheong.ca/frontend-projects/1-Resume/

Introduction: The resume is an digital copy for recruiters to see.

Project Details:

  • Created HTML struction from scratch
  • Implemented CSS styles
  • Responsive Design

Technologies used: HTML, CSS and Bootstrap