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": "[email protected]"
},
{
"id": "111356042",
"name": "Andy Lee",
"email": "[email protected]"
}
]
<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
