Application Design II - Task 1: App Design I Self-Evaluation and Reflection

24.9.2024 - 15.10.2024 / Week 01 - Week 04
Tan Zhao Yi / 0363285
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1:


LIST

Lecture 1: Revisting HTML and CSS
Lecture 2: Introduction to DOM
Task 1: App Design I Self-Evaluation and Reflection
Feedback
Reflection
Further Reading


INSTRUCTION

 


LECTURE
 
Lecture 1: Revisiting HTML and CSS
In Week 1, we were invited to revise our HTML and CSS by replicating the ibandsnet app interface. The logo, images and icons are provided by the lecturer in Google Classroom.
ibandsnet app interface in Figma
The biggest difference of this exercise with others is we are applying the HTML and CSS in a mobile phone form. We have to preview it in Chrome and change the view to phone via Inspect.


Lecture 2: Introduction to DOM
DOM: Document Object Model
    • A programming interface provide by browsers
    • Allow developers to interact with and change HTML document
    • Represent the structure of a webpage / app
    • Can be modified using programming language like JavaScript
    • When a web page is loaded, browser converts HTML to DOM (an object-oriented representation of the page)
    • Structure: tree of nodes
Each HTML element (<html>, <head>, <body>, etc.) is a node in this structure. 

Why is HTML CSS important to website development?
1. Dynamic Interaction: Add / Delete / Modify elements, or respond to user interactions like clicks
2. JavaScript Manipulation: When user interacts with the webpage, JavaScript can respond by modifying DOM
3. Event Handling: DOM allows developers could listen user action (event) like keyboard input / clicks, then execute specific code 
4. CSS Manipulation: Dynamically change the elements' appearance by manipulating CSS properties through the DOM

Common DOM Methods:
  • document.getElementById(id): Selects an element by its ID. 
  • document.querySelector(selector): Selects the first element that matches a CSS selector. 
  • document.createElement(tagName): Creates a new HTML element. 
  • element.appendChild(newNode): Adds a new child node to an element.
  • element.innerHTML: Gets or sets the HTML content of an element.
  • element.textContent: Gets or sets the text content of an element.


 Task 1: App Design I Self-Evaluation and Reflection


FEEDBACK
 


REFLECTION
 


FURTHER READING
 

Comments

Post a Comment