CSC2005 Lab

GitHub Repo | Website QR Code | Lab Assignments

1: Git / Web dev

Web dev overview

Look at Git UI solutions (Git Desktop) and tools like Sourcetree. Will also look at and give a brief overview of web development in 2020 and what we'll be covering in the CSC2005 HCI Lab.

Learn web core technologies – HTML / CSS / Javascript. Understand how these are used together to build the websites that we use. This segment willl touch on all three aspects, but will concentrate more on HTML and CSS.

3: JS in more depth

Useful JS design patterns

Learn about useful Javascript design patterns that you will see over and over again. How function chaining makes code more readable (pioneered by Jquery), interfacing with backend systems with JSON and AJAX, dealing with asynchronous issues with callbacks and promises.

4: Responsive design

Bootstrap, CSS framework

A CSS framework like Bootstrap makes coding frontend interfaces faster and easier. It helps in making your design responsive to all device form factors (desktop, tablet, mobile) instead of having to write your own layouts, and it also has many helper classes.

5: Reactivity

Vue, JS framework

Modern MVC frameworks like Angular / React / Vue have become the norm for frontend coding work. One big benefit of these design patterns is reactivity, and we are going to see how to do data binding and how it helps UX work.

6: CLI tooling

Vue, JS framework

An introduction to how to setup a modern frontend project using everything you've learnt so far. Learn how to use toolchains to speed up your development process. Here's where you get a sense of componentization and how it works.

By Chan Chi-Loong |