Application Design II / Lecture & Exercises

25/09/2024 - / Week 1 - Week 
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media

Lectures & Exercises

---

---

LECTURE

Week 1

For the first week we didn't have any class but were given the MIB to go through in our own time. The first assignment submission box was also created.

Week 2

In week two we went over HTML and CSS to refresh our memory. Afterwards, we did an exercise which was to recreate a design using HTML.

Week 3

In week 3 we had a short lecture on DOM and then conducted an in class activity as our introduction to JavaScript.

Introduction to DOM

DOM stands for 'document object model'. Modern browsers have a JavaScript engine to run JavaScript files. DOM is a programming interface, provided by browsers, which allows you to edit HTML files. When a webpage is loaded, the browser converts the HTML into the DOM.

DOM Structure

The DOM displays a tree of nodes. Each element in the HTML file becomes a node in this tree structure.

Dynamic Interactions

The DOM allows developers to dynamically interact with the content of a webpage. Eg adding, deleting or modifying elements, change their styles or respond to user interactions.

JavaScript Manipulation

JavaScript can access and manipulate the DOM. When a user interacts with a webpage, JavaScript can respond by modifying he DOM to update the page's content in real time.

Event Handling

The DOM allows developers to listen for user actions (events) like clicks, keyboard input or page load events. When these actions happen you can execute specific code to make the web[age more interactive.

Common DOM Methods

- document.getElementById(id): Selects an element by its ID.

- document.querySelector(selector): Select the first element that matches a CSS selector

'const' adding/defining a new variable

Week 4

No class

Week 5

Micro Animations

Macro Animations

Week 6

This week we coded animations in the sample design given to us by using GSAP. Afterwards, I consulted about creating animations in Figma and about Task 2.

Week 7

During week 7, we worked on our task 2 and showed all our micro and macro interactions to Mr. Shamsul.

Week 9

This week we started coding our components. The first component I chose to work on is the navigation bar and I tried following an example from DaisyUI but I was facing a lot of issues with it concerning the svg.

Week 10

This week is when we stopped having classes. Instead, it would be based on consultation only. I continued working on my task 3 components.

---

INSTRUCTIONS

EXERCISE 1

Our in class activity for week 2 was to recreate an app design from Figma using HTML and CSS. 

Fig 1.1 - Figma Reference

Fig 1.2 - HTML Recreation

I had to inspect the html to view it as if it was on a mobile screen and adjusted all the elements according to how it looked in mobile mode. I also separated the whole design into four parts for each area; navigation, showcase, album gallery and footer.

The navigation bar was the hardest part for me since I was struggling trying to put each image in the right side. I tried separating the navigation into two columns but for some reason the two images in each column would stack vertically on top of eachother instead of being side by side. So I ended up just using 'position: relative' for each picture and manually adjusted their placement.

Fig 1.3 - Navigation HTML

Fig 1.4 - Navigation CSS

Fig 1.5 - Navigation Image CSS

For the band showcase, I placed the image and the text in their own div and also used z-index to place it behind the navigation. Then, i made the image fill up the whole width of the screen and used 'position: absolute' to manually adjust the placement of the text without disrupting the other elements.

Fig 1.6 - Showcase HTMl

Fig 1.7 - Showcase CSS

For the albums, I just grouped them all in the same div and class. Then, I used 'display: flex' and aligned everything in the center and added a gap. Afterwards, I adjusted the size of the albums and added padding to the bottom so that it looked equal with the gap on the sides.

For the footer, I wrote all the text in the same line and fixed the position to the bottom of the screen. I also added a background color and padding.

Fig 1.8 - Album HTML

Fig 1.9 - Footer HTML

Fig 1.10 - Album and footer CSS

I also embedded a font from Google fonts and adjusted the parent div all the elements lived in.

Fig 1.11 - Parent div and text CSS

EXERCISE 2

For our second exercise, we coded a simple form which created a new list item and buttons when typed into. This was an introduction to JavaScript.

EXERCISE 3

During week 6, we did a coding exercise to create animations by using GSAP.

---

REFLECTION