Application Design II - Lectures & Exercises

- October 11, 2024

23.09.2024 - 20.10.2024 / Week 1 - Week 5

Lim Rui Ying / 0358986

Application Design II / Bachelor of Design (Hons) in Creative Media

Lectures & Exercises

LECTURES

WEEK 3 | Introduction to DOM

INSTRUCTIONS

EXERCISES

WEEK 2 | HTML/CSS Revisiting Exercise

This week, we had an HTML/CSS recap exercise in class. We were required to code the interface (Figma link) provided by Mr Shamsul. I started coding in Visual Studio Code by creating an HTML and a CSS file. This exercise reviewed the Class and ID attributes in HTML and the Flex property in CSS. Mr Shamsul asked us to remember that the interface must be responsive by using percentages for the screen width.

Fig. 1.1 App interface provided

Fig. 1.2 Codes (HTML & CSS)

Fig. 1.3 Outcome of HTML/CSS recap exercise

WEEK 3 | Introduction to DOM

This week, we were introduced to JavaScript. We followed Mr Shamsul's tutorial to build a "To Do List" webpage that allows users to create tasks, mark them as done, and delete them. The functionality relies on JavaScript to handle these actions by modifying the HTML and CSS.

We first built the HTML structure for the "To-Do List" page and styled it with CSS. Then, we created a js file to generate the list items along with the "Done" and "Delete" buttons, and implemented event listeners to handle the click functions for these actions.

Fig. 2.1 "To Do List" webpage

Fig. 2.2 Add a task

Fig. 2.3 Mark the task as done

Fig. 2.4 Codes (HTML, CSS & JavaScript)

WEEK 6 | GSAP Tutorial

We learned to create animations using GSAP this week. Animations created include the logo, hamburger menu and panels in the hero section. Then, we created play/stop functions for the Featured Release.