1 of 20

Tutorial 2: �HTML, CSS, JavaScript

Hyungyu Shin

Human-AI Interaction KAIST Spring 2021 | human-ai.kixlab.org

1

2 of 20

Learning Objective of Tutorial 2 & 3

“Students are able to build the following user interface”

2

3 of 20

How does it work?

3

User

Web-based User Interface

Server

4 of 20

How does it work?

4

User

Web-based User Interface

Server

5 of 20

How does it work?

5

User

Web-based User Interface

Server

HTML/CSS/JavaScript

Python

6 of 20

How does it work?

6

User

Web-based User Interface

Server

HTML/CSS/JavaScript

Python

React, Vue.js

Django, Flask

7 of 20

How does it work?

7

User

Web-based User Interface

Server

HTML/CSS/JavaScript

Python

React, Vue.js

Django, Flask

Tutorial 2

Tutorial 3

8 of 20

Let’s build the following website

8

9 of 20

Let’s build the following website

9

Bigger font size

Bold

Bigger font size

Bold

10 of 20

Let’s build the following website

10

Bigger font size

Bold

Bigger font size

Bold

Input box

11 of 20

Let’s build the following website

11

Bigger font size

Bold

Bigger font size

Bold

Input box

Button

12 of 20

Let’s build the following website

12

Bigger font size

Bold

Bigger font size

Bold

Input box

Button

Horizontal line

13 of 20

Let’s build the following website

13

Bigger font size

Bold

Bigger font size

Bold

Input box

Button

Horizontal line

Text in the input box

14 of 20

Three things to remember:

Structure, Presentation, and Action

  • Structure: How are elements organized?�
  • Presentation: How are elements presented?�
  • Action: How do elements behave?

14

15 of 20

Structure

15

16 of 20

Structure + Presentation

16

17 of 20

Structure + Presentation + Action

17

18 of 20

HTML, CSS, and JavaScript

  • HTML (Hypertext Markup Language) for structure�
  • CSS (Cascading Style Sheet) for presentation�
  • JavaScript for action

18

19 of 20

CodePen, an online code editor for web dev

19

https://bitly.com/cs492-tutorial2

20 of 20

Takeaway

  • HTML
    • A language for structure
    • tag (div, input, button, …)
    • id / class
  • CSS
    • A language for presentation
  • JavaScript
    • A programming language for action

20

Separation of concerns