Bài 2 - Trang Web Giới Thiệu (2).docx

Bài 2 – Web Giới Thiệu Môn Học Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 1
BÀI 2 – WEBSITE GIỚI THIỆU MÔN HỌC
Mục tiêu bài học
- Khái niệm về CSS
- Mối quan hệ giữa CSS và HTML
- Bố cục và cấu trúc của một đoạn CSS
- Ưu điểm của CSS (Đọc thêm)
- CSS hoạt động như thế nào? (Đọc thêm)
- Chèn CSS vào HTML
- CSS text, CSS background
- Xây dựng website giới thiệu môn học
CSS là một thành phần quan trọng tạo nên các website hiện nay. Với CSS, bạn có thể tạo ra các trang web ấn
tượng cho công ty của mình hoặc cho chính bạn. Vậy CSS là gì? Ngôn ngữ CSS dùng để làm gì và tại sao
CSS lại có vai trò quan trọng trong một website, hãy cùng tìm hiểu trong bài học hôm nay nhé!
1. CSS là gì?
CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản
hóa quá trình tạo nên một website. CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C).
HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website.
- CSS xử lý một phần giao diện của trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản,
kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh
hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước
màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.
- Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class,
v.v. Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn.
- CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu
HTML. Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML.
⚠️ Lưu ý: HTML và CSS có mối quan hệ gắn bó mật thiết với nhau. Nếu HTML là nền tảng của một trang
web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó.
2. Mối quan hệ giữa HTML và CSS
Như đã đề cập, CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website. Nếu HTML là các
thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe.
Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tình thẩm mỹ. CSS làm cho
giao diện người dùng của một trang web tỏa sáng và mang đến trải nghiệm người dùng tuyệt vời. Nếu không
có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều. Ngoài bố cục và định dạng,
CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.
3. Bố cục và cấu trúc của một đoạn CSS
3.1.Bố cục của một đoạn CSS
Bố cục của một đoạn CSS chủ yếu dựa vào hình hộp với mỗi hộp chiếm những khoảng trống trên trang web
với các thuộc tính chính như:
 Padding: Là các không gian xung quanh nội dung (ví dụ: không gian xung quanh đoạn văn bản).

 Border: Là các đường nằm ngoài phần đệm.
 Margin: Là khoảng cách bao quanh phía ngoài của phần tử.
3.2.Cấu trúc của một đoạn CSS
Thông thường, một đoạn CSS sẽ bao gồm các phần:
Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong dấu ngoặc nhọn. Mỗi thuộc tính
là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã có trong danh sách của CSS.
Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗi dòng khai báo thuộc
tính cần có dấu chấm phẩy cuối cùng. Các thuộc tính không bị giới hạn ở một vùng chọn.
Trong đó:
 Bộ chọn (Selector): mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Bạn có thể áp
dụng các selector cho các trường hợp sau:
 Tất cả những phần tử được định dạng theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h2.
 Thuộc tính id, class của phần tử.
 Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp tài liệu.
 Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng được phân tách
với nhau bằng dấu chấm phẩy. Mỗi khai báo lại bao gồm tên & giá trị đặc tính CSS, dược phân tách
với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và
khối khai báo phải nằm trong các dấu ngoặc móc.
 Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho một phần tử HTML.
Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác động nhất trong bộ quy tắc bạn đã
tạo ra.
 Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một thuộc tính trong số đó phụ
thuộc vào số lần xuất hiện của thuộc tính.
📒 Các bạn có thể xem danh sách các thuộc tính CSS tại đây.
4. Ưu điểm của CSS (Đọc thêm)
Ngôn ngữ CSS có một số ưu điểm như sau:
 Tăng tốc độ tải trang: CSS cho phép bạn sử dụng ít đoạn mã vì vậy tốc độ tải trang sẽ được cải thiện
đáng kể. Ngoài ra, bạn còn có thể sử dụng một quy tắc CSS và áp dụng nó cho tất cả các lần xuất hiện
của một thẻ nhất định trong tài liệu HTML.
 Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn hơn, nó còn giúp các
website có định dạng thân thiện với người dùng. Khi các nút và văn bản ở vị trí hợp lý và được sắp đặt
tốt, trải nghiệm người dùng sẽ được cải thiện.
 Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu định dạng cụ thể cho
nhiều trang bằng một chuỗi mã. Một biểu định kiểu xếp tầng có thể được sao chép trên một số trang
web. Ví dụ: nếu bạn có các trang sản phẩm tất cả phải có cùng định dạng, giao diện, thì việc viết quy
tắc CSS cho một trang sẽ đủ cho tất cả các trang cùng loại.
 Thay đổi định dạng dễ dàng: Nếu bạn cần thay đổi định dạng của một nhóm trang cụ thể, bạn có thể
dễ dàng thực hiện việc này với CSS mà không cần phải sửa từng trang riêng lẻ. Chỉ cần chỉnh sửa biểu
định kiểu CSS tương ứng và bạn sẽ thấy các thay đổi được áp dụng cho tất cả các trang đang sử dụng
biểu định kiểu đó.
 Khả năng tương thích trên các thiết bị: Thiết kế web đáp ứng là một vấn đề cần được chú trọng. Trong
thời đại ngày nay, các trang web phải hiển thị đầy đủ và có thể điều hướng dễ dàng trên tất cả các thiết
bị. Cho dù thiết bị di động hay máy tính bảng, máy tính để bàn hay thậm chí là TV thông minh, CSS
kết hợp với HTML để tạo ra thiết kế đáp ứng.
vùng chọn {
thuộc tính: giá
trị;
thuộc tính: giá
trị;
...
}

5. CSS hoạt động như thế nào? (Đọc thêm)
Khi trình duyệt hiển thị một tài liệu, nó phải kết hợp nội dung của tài liệu với kiểu cách mà nó sẽ xuất hiện.
Nó xử lý tài liệu theo một số giai đoạn mà Glints sẽ liệt kê bên dưới. Hãy nhớ rằng đây là một phiên bản rất
đơn giản của những gì xảy ra khi một trình duyệt tải một trang web và các trình duyệt khác nhau sẽ xử lý quy
trình theo những cách khác nhau.
 Bước 1: Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
 Bước 2: Trình duyệt chuyển đổi HTML thành DOM (Document Object Model – Mô hình đối tượng
tài liệu). DOM đại diện cho tài liệu trong bộ nhớ của máy tính.
 Bước 3: Trình duyệt tìm nạp hầu hết các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như
hình ảnh nhúng, video và thậm chí cả CSS được liên kết. Sau đó, JavaScript được xử lý trong quá trình
này.
 Bước 4: Trình duyệt phân tích cú pháp CSS đã tìm nạp và sắp xếp các quy tắc khác nhau theo loại bộ
chọn của chúng thành các “nhóm” khác nhau. Ví dụ: phần tử, lớp, ID, v.v. Dựa trên các bộ chọn mà
nó tìm thấy, nó sẽ tìm ra các quy tắc nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu
cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất).
 Bước 5: Cây kết xuất được đặt trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng
cho nó.
 Bước 6: Hình ảnh hiển thị trực quan của trang được đưa ra màn hình (giai đoạn này được gọi là
painting).
6. Chèn CSS vào HTML
Có ba cách nhúng CSS vào website:
 Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)
 Nội tuyến (Internal CSS)
 Ngoại tuyến (External CSS)
Chúng ta hãy cùng nhau tìm hiểu 3 cách để nhúng CSS vào HTML trên nhé!
6.1.Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)
Với cách này, chúng ta đặt mã CSS vào thẳng thuộc tính style của phần tử. Và với cách nhúng trực tiếp, mã
CSS sẽ chỉ tác động lên chính phần tử đó.
Để chỉ định nhiều quy tắc CSS, chúng ta có thể sử dụng dấu chấm phẩy để ngăn cách giữa các rules. Các rules
này sẽ được đặt bằng cách sử dụng thuộc tính “style” kèm theo tên thuộc tính, giá trị thuộc tính.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Inline CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mô tả trang web của bạn ở đây">
</head>
<body>
<h1 style="color: #333; text-align: center;">Tiêu đề</h1>
<p style="font-size: 18px; line-height: 1.6; margin: 20px;">Đây là một đoạn văn
bản với các thuộc tính CSS nhúng trực tiếp vào thẻ p.</p>
<div style="width: 300px; height: 200px; background-color: #ccc; margin: 0
auto;"></div>
</body>
</html>

6.2.Nội tuyến (Internal CSS)
Với cách nhúng nội tuyến, bạn cần dùng thẻ <style> để tạo ra khu vực viết CSS. Bạn có thể để CSS ở bất kỳ
đâu trong HTML, nhưng nên đặt <style> trong thẻ <head>.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Internal CSS</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
margin: 20px;
}
div {
width: 300px;
height: 200px;
background-color: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đây là một đoạn văn bản với các thuộc tính CSS nhúng trực tiếp vào thẻ p.</p>
<div></div>
</body>
</html>
6.3.Ngoại tuyến (External CSS)
Trong External CSS, chúng ta sẽ sử dụng phần tử “link” để thêm các style sheet ở bên ngoài vào trong tài liệu
HTML.
Trước hết chúng ta cần tạo các rules (quy tắc) trong một file riêng có phần đuôi mở rộng là .css. Tiếp theo,
bạn cần thêm file CSS này vào phần tử head trong tài liệu HTML.

Style.css
body {
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
margin: 20px;
}
div {
width: 300px;
height: 200px;
background-color: #ccc;
margin: 0 auto;
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ External CSS</title>
<meta name="description" content="Mô tả trang web của bạn ở đây">
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đây là một đoạn văn bản với các thuộc tính CSS được áp dụng từ tệp tin
external.</p>
<div></div>
</body>
</html>
Đây là phương pháp phổ biến nhất để nhúng CSS vào tài liệu HTML. Với cách chèn này, các lập trình viên
có thể viết CSS cho nhiều trang web khác nhau và bổ sung cùng một file CSS cho tất cả các trang tương tự.
7. Một số thuộc tính CSS cơ bản
7.1.CSS – Color
CSS color (màu sắc trong CSS) là một thuộc tính cho phép bạn chỉ định màu cho phần tử HTML. Bằng cách
sử dụng CSS color, bạn có thể thay đổi màu chữ, màu nền, và các tính chất màu khác của các phần tử trên
trang web.

Cú pháp cơ bản của thuộc tính color trong CSS như sau:
Trong đó:
 selector là phần tử HTML bạn muốn áp dụng màu sắc.
 value có thể là một tên màu (ví dụ: "red"), mã màu HEX (ví dụ: "#ff4500"), giá trị RGB (ví dụ:
"rgb(255, 69, 0)"), giá trị HSL (ví dụ: "hsl(30, 100%, 50%)") hoặc các giá trị màu khác hợp lệ.
Dưới đây là một số ví dụ về cách sử dụng thuộc tính color:
Style.css
p {
color: red; /* Màu chữ đỏ */
}
h1 {
color: #336699; /* Mã màu HEX */
}
h2 {
color: rgb(0, 128, 0); /* Giá trị RGB */
}
h3 {
color: hsl(240, 100%, 50%); /* Giá trị HSL */
}
Các bạn có thể check mã màu tại đây.
7.2.CSS – Text
CSS Text (Văn bản trong CSS) là một tập hợp các thuộc tính cho phép bạn tùy chỉnh và định dạng văn bản
trên trang web. Dưới đây là một số thuộc tính quan trọng liên quan đến văn bản trong CSS:
⨷ font-family: Xác định kiểu phông chữ mà sẽ được sử dụng cho văn bản. Ví dụ:
p {
}
⨷ font-size: Xác định kích cỡ của phông chữ. Có thể được xác định bằng px, em, rem, vv. Ví dụ:
p {
font-size: 16px;
}
⨷ font-weight: Xác định độ đậm của văn bản. Có thể là normal, bold, lighter, bolder hoặc giá trị số từ 100
đến 900. Ví dụ:
p {
font-weight: bold;
}
selector {
color:
value;
}

⨷ font-style: Xác định kiểu chữ của văn bản, có thể là normal hoặc italic. Ví dụ:
p {
font-style: italic;
}
⨷ text-align: Xác định cách căn lề văn bản, có thể là left, right, center hoặc justify. Ví dụ:
p {
text-align: center;
}
⨷ color: Xác định màu sắc của văn bản. Ví dụ:
p {
color: #333;
}
⨷ line-height: Xác định khoảng cách giữa các dòng của văn bản. Ví dụ:
p {
line-height: 1.6;
}
⨷ text-decoration: Xác định hiệu ứng trang trí văn bản, như gạch chân, gạch ngang, vv. Ví dụ:
a {
text-decoration: none; /* Loại bỏ gạch chân liên kết */
}
⨷ letter-spacing: Xác định khoảng cách giữa các ký tự trong văn bản. Ví dụ:
p {
letter-spacing: 2px;
}
⨷ text-indent: thiết lập lề đầu dòng (lề thụ động) cho đoạn văn bản.
p {
text-indent: 20px; /* Lề đầu dòng là 20 pixel */
text-indent: 0; /* Loại bỏ lề đầu dòng */
}
⨷ text-transform: thay đổi việc viết hoa, viết thường hoặc biến đổi chữ in hoa.
p {
text-transform: uppercase; /* Biến đổi chữ thành chữ in hoa */
text-transform: capitalize; /* Biến đổi chữ cái đầu của từ thành chữ in hoa */
text-transform: none; /* Không áp dụng biến đổi nào */
}

7.3.CSS – Background
Thuộc tính background-color trong CSS được sử dụng để xác định màu nền của một phần tử HTML. Nó cho
phép bạn tùy chỉnh màu nền của phần tử, từ hình dạng cơ bản đến hình ảnh hoặc gradient phức tạp.
Cú pháp của background-color như sau:
Trong đó:
- selector là phần tử HTML bạn muốn áp dụng background-color.
- value có thể là một tên màu (ví dụ: "red"), mã màu HEX (ví dụ: "#ff4500"), giá trị RGB (ví dụ:
"rgb(255, 69, 0)") hoặc các giá trị màu khác hợp lệ.
Ví dụ 1 Trong ví dụ này, nền của trang web sẽ có màu xám nhạt
body {
background-color: #f0f0f0; /* Màu nền là một màu xám nhạt */
}
Ví dụ 2 Trong ví dụ này, nền của phần tử <div> sẽ có màu đỏ và sẽ có độ trong suốt 50%
div {
background-color: rgba(255, 0, 0, 0.5); /* Màu nền đỏ với độ trong suốt 50% */
}
Ví dụ 3 Trong ví dụ này, nút sẽ có màu nền là màu xanh lá cây và màu chữ là trắng
button {
background-color: green; /* Màu nền là màu xanh lá cây */
color: white; /* Màu chữ là trắng */
}
7.4.CSS – Background – image
Thuộc tính background-image trong CSS được sử dụng để đặt hình ảnh làm nền cho một phần tử HTML.
Bạn có thể sử dụng một đường dẫn tới tệp hình ảnh hoặc một liên kết đến một hình ảnh trên internet.
Cú pháp của background-image như sau:
Trong đó:
- selector là phần tử HTML bạn muốn áp dụng background-image.
- url('path-to-image') là đường dẫn tới tệp hình ảnh. Bạn có thể sử dụng một đường dẫn cục bộ trên
máy tính hoặc một URL của hình ảnh trên internet.
Ví dụ
div {
background-image: url('./background.jpg'); /* Sử dụng hình ảnh từ cùng thư mục */
selector {
background-color:
value;
}
selector {
background-image: url('path-to-
image');
}

background-image: url('https://example.com/image.jpg');/* Sử dụng hình ảnh từ một URL
*/
}
- Thuộc tính background-size xác định kích thước của hình ảnh nền. Nó có thể nhận các giá trị như
cover, contain, hoặc các đơn vị đo lường khác nhau như px, em, rem, vv.
- Thuộc tính background-repeat xác định cách hình ảnh nền lặp lại khi kích thước của nó nhỏ hơn kích
thước của phần tử chứa.
- Thuộc tính background-position xác định vị trí ban đầu của hình ảnh nền. Bạn có thể sử dụng các giá
trị như pixels, phần trăm, hoặc các từ khóa như top, center, bottom, left, right.
Ví dụ
div {
background-image: url('pattern.png');
background-size: cover; /* Kích thước hình ảnh sẽ được thay đổi để phủ toàn bộ phần nền
*/
background-repeat: repeat; /* Mặc định, hình ảnh sẽ lặp lại ngang và dọc */
background-size: cover; /* Kích thước hình ảnh sẽ được thay đổi để phủ toàn bộ phần nền
*/
}
THỰC HÀNH
Dựa vào các kiến thức đã học, xây dựng website giới thiệu về môn học như hình dưới đây:

NỘI DUNG THỰC HIỆN TRANG WEB TRÊN
MÔ TẢ KHOÁ HỌC
Học sinh sẽ tiếp cận với hoạt động phát triển sản phẩm và ứng dụng công nghệ vào thực tế; ngoài ra học sinh còn được
mở rộng các kiến thức liên quan tới khoa học máy tính, bảo mật và hack vốn đang ngày càng trở nên quan trọng hơn
trong thế giới công nghệ.
Python là ngôn ngữ lập trình hướng đối tượng, cấp cao, mạnh mẽ, được sử dụng bởi các công ty công nghệ khổng lồ
như Google, Dropbox, Instagram, Quora... nhưng lại vô cùng dễ học. Với cú pháp rất đơn giản, rõ ràng; nó dễ đọc và
viết hơn rất nhiều khi so sánh với những ngôn ngữ lập trình khác như C++, Java, C#. Python làm cho việc lập trình trở
nên thú vị, cho phép bạn tập trung vào những giải pháp chứ không phải cú pháp. Python đang là xu hướng ngôn ngữ lập
trình hàng đầu cho những người mới là
Để tạo ra một ứng dụng Web hoàn chỉnh, gồm cả Backend (logic) và Frontend (giao diện), học viên sẽ được làm quen
với Html/Css là các phần tối quan trọng tạo nên giao diện cho bất kì trang Web nào. Html giúp tạo cấu trúc nội dung
cho một trang Web. Css giúp căn chỉnh lề, định dạng và tạo hiệu ứng cho các thành phần tong file Html. Việc trang bị
thêm mảng kiến thức này sẽ giúp học viên hoàn chỉnh một nửa bức tranh về ứng dụng Web với Python.
Để xây dựng một Website với Python hoàn chỉnh, nhanh chóng và dễ dàng, chúng ta cần sự hỗ trợ của Framework.
Django là framework mã nguồn mở, được viết hoàn toàn bằng Python. Tương tự Python, Django cũng rất dễ học, giúp
phát triển ứng dụng nhanh chóng với thiết kế tinh gọn và thiết thực. Khả năng dễ đọc của Python, đơn giản, đầy đủ của
Django cho phép học viên tập trung vào các vấn đề phức tạp, logic nghiệp vụ hơn là mất nhiều thời gian cho các rắc rối
đã được người khác giải quyết.
HỌC SINH HỌC ĐƯỢC NHỮNG GÌ
Phát triển Tư duy & khái niệm
Chuyển dịch thói quen chơi Game, nghiện Game sang làm Game; Tư duy xử lý mã lệnh nâng cao.Có khái niệm tư duy
thiết kế tổng thể & khái niệm cơ bản của Sản xuất phần mềm, trò chơi, hoàn thiện đóng gói sản phẩm; Xây dựng ý
tưởng, cốt truyện, trò chơi, phần mềm, phim hoạt hình.
Khái niệm Thiết kế đồ hoạ và Tư duy thiết kế theo trải nghiệm người dùng Phát triển tư duy phân tích yêu cầu và hoàn
thiện sản phẩm, dự án Phát triển tư duy máy tính (computer thinking)
Sử dụng kiến thức về Html/Css cơ bản để hiện thực hóa thiết kế giao diện trên Mocking Bot thành trang web tĩnh thực
tế.
Phân tích một trang web bất kỳ để học cách thiết kế, biết cách thiết kế trang web responsive;
Nắm được các khái niệm cơ bản trong việc sử dụng framework Django để tạo ra các trang Web hoàn chỉnh (gồm phần
logic-backend và giao diện-frontend); Sử dụng Heroku để host trang web online.
Kiến thức
- Kiến thức về khoa học máy tính căn bản.
- Kiến thức về bảo mật trang Web căn bản.
- Kiến thức lập trình từ cơ bản đến nâng cao với hình thức lập trình bằng chữ (text-based coding) với Python.
- Kiến thức thẩm mĩ về màu sắc qua cách sử dụng Bánh xe màu / Bảng màu, áp dụng vào thiết kế giao diện bắt mắt.
- Kiến thức lên ý tưởng thiết kế Website (Website Wireframe) với Mocking Bot.
Phát triển Kỹ năng phần cứng, phần mềm
Phần mềm: Python,Wordpress, HTML/CSS , JS, Python Django Sử dụng thành thạo các chương trình vào các ứng dụng
thực tế
Kỹ năng thế kỷ 21
Kỹ năng phân tích yêu cầu Kỹ năng thích nghi (Adaptive): Thông qua giải quyết thách thức của những dự án mới trong
quá trình học.
Kỹ năng giao tiếp (Communication) Qua hoạt động trình bày, truyền đạt ý tưởng dưới dạng nói và viết
Tư duy phản biện (Critical Thinking) Với việc tự tin nói lên quan điểm và các lập luận cá nhân.
Năng lực sáng tạo (Creativity) Thông qua sáng tạo sản phẩm mới mẻ và hiện thực hoá, học sinh được đóng nhiều vai
trò của lập trình viên, nhà sản xuất, người kể chuyện, nhà thiết kế, nhà soạn nhạc
Kỹ năng hợp tác (Collaboration) Thông qua việc chia sẻ hiểu biết cho nhau, cộng tác, làm việc theo nhóm, hợp tác hoặc
phản biện để nâng cao hiệu quả.
NGUYÊN TẮC GIẢNG DẠY TẠI TEKY
Lớp học tiêu chuẩn 8 học sinh 1 giảng viên
Nhằm gia tăng hiệu quả học tập
Mô hình học tập theo dự án (Project Based Learning)
Sản phẩm được dựa trên các vấn đề và thực tế cuộc sống, hiện thực hoá từ ý tưởng thành sản phẩm.
Lấy học sinh làm trọng tâm
Giáo viên đóng vai trò là huấn luyện viên, theo sát năng lực học tập của từng học sinh.
Tích hợp kỹ năng 4C (Communication - Critical Thinking - Creativity - Collaboration)
Trong hoạt động của mọi lớp học, giờ học.

Bài 2 - Trang Web Giới Thiệu (2).docx

Recommended

Recommended

More Related Content

Similar to Bài 2 - Trang Web Giới Thiệu (2).docx

Similar to Bài 2 - Trang Web Giới Thiệu (2).docx (20)

More from TrongNguyn1

More from TrongNguyn1 (8)

Bài 2 - Trang Web Giới Thiệu (2).docx