Before Class

1. Download slides and code from Moodle

2. Install VSCode
3. Install VSCode Extension: Live Server
4. Read HTML/CSS Introduction

1
1. VSCode: download

Download link: Visual Studio Code

2
1. VSCode: download(windows)

3
4
5
6
7
8
9
Install 'Live Server Extension'

10
11
 2. Front-End Basic
HTML

Mandarin HTML - Web | MDN

English HTML basics - Learn web development | MDN

CSS

Mandarin CSS - Web | MDN

English CSS basics - Learn web development | MDN

Read these two documents before class to make sure you understand the basic concepts of HTML
and CSS.

12
Front-End
Author: Mavis Tsai

13
1. Frontend vs Backend:
Frontend: Visual elements on the web page (images, text, buttons).
Backend: Saves and manages data (e.g., order history).

14
2. HTML (HyperText Markup Language):
Adds content to the web page.
Used to structure elements like buttons, images, and text.

<p>My cat is very grumpy</p>

15
 3. CSS (Cascading Style Sheets):
Styles the web page to improve its appearance.
Allows adjustments in colors, sizes, spacing, etc.

<p id="cat" class="text-lg" >My cat is very grumpy</p>

p{
color:red;
}

#cat{
background: blue;
}

.text-lg{
font-size: 16px;
}

16
4. JavaScript:
Makes the web page interactive.
Utilizes the Document Object Model (DOM) to change the web page dynamically.

17
5. CSS Frameworks:
E.g., Bootstrap.
Pre-written CSS code to solve common problems Saves development time.

18
Bootstrap

Document

English: Bootstrap · The most popular HTML, CSS, and JS library in the world.
Mandarin: Bootstrap 5
19
Bootstrap
Layout
Container
Grid
Columns
Utilities
Components

20
Layout-Container

Source:

21
22
<div class="container">
<div class="row">
<div class="col">
column1
</div>
<div class="col">
column2
</div>
</div>
</div>

23
24
Bootstrap: Utilities-Colors

Color & background · Bootstrap v5.2

25
Bootstrap: Utilities-Margin&Padding

Margin adjusts the spacing between elements

Padding adjusts the spacing between all content inside an element and the element itself

Spacing · Bootstrap v5.2

26
Practice

Try to create it.

27
Components

28
 Bootstrap Icon

Bootstrap Icons · Of cial open source SVG icon library for Bootstrap

29
Dynamic Website
DOM
Axios

30
DOM Document Object Model

31
 DOM: change your text
users = [
{
"id": "111356034",
"name": "John Jiang",
"email": "111356034@nccu.edu.tw"
},
{
"id": "111356042",
"name": "Andy Lee",
"email": "111356042@nccu.edu.tw"
}
]

<div>
<div id="users">
<div>
</div>

32
function displayUsers(users) {
var usersElement = document.getElementById("users");
var str = "";

// Iterate through each user

users.forEach((user) => (str += user.name + " : " + user.email + "<br>"));
usersElement.innerHTML = str;
}

33
 Axios: Fetch your data
function getUsers() {
axios
.get("https://jsonblob.com/api/jsonBlob/1221767613406633984")
.then(function (response) {
displayUsers(response.data);
})
.catch(function (error) {
console.error("Error fetching users:", error);
});
}
// Call the getUsers function when the window loads
window.onload = getUsers;

34
Final Practice
Create your own blog homepage

35
Bootstrap Template

Free Bootstrap Themes & Templates - Start Bootstrap

Bootstrap Templates | Premium & Free Download | BootstrapMade

1400+ Free Bootstrap HTML5 CSS3 Website Templates | High Quality Bootstrap Theme

36
 Final Practice
Try to modify a template.

Template Source: Blog Home - Free Bootstrap 5 Blog Template - Start Bootstrap

37
Final Practice: Before

38
Final Practice: After

39
40
1. Add your name & student ID
2. Modify the column layout to 8:4
3. Change the button color & make it bigger by using padding
4. Add Radio Button
Checks and radios · Bootstrap v5.3

5. Change link to pill badges

Badges · Bootstrap v5.3

6. Use icon to replace text Home

Bootstrap Icons · Of cial open source SVG icon library for Bootstrap

House door ll · Bootstrap Icons

7. Fetch TAs info API & Show it at "Side Widget"

API URL: https://jsonblob.com/api/jsonBlob/1222775686480912384
le: js>scripts.js

41