Xây dựng giao diện web với HTML và CSS

Căn bản về UX/UI

[Bài đọc] Sử dụng mẫu chữ F để trình bày nội dung
[Bài đọc] 10 nguyên tắc để thiết kế Type tốt hơn
[Bài đọc] Các vấn đề thường gặp khi kết hợp các kiểu chữ trong Typo
[Bài đọc] Tản mạn về Typography
[Bài đọc] Các nhà thiết kế web nên học typography
[Thực hành] Sử dụng Adobe Color
[Thực hành] Sử dụng màu sắc trong trang web
[Bài tập] Thiết kế UI/UX giao diện trang đăng ký người dùng.
[Bài tập] Phối màu cho newsletter
[Bài tập] Xây dựng Landing Page

Cấu trúc và các thẻ HTML cơ bản

[Bài giảng] Một trang web cơ bản và các thẻ HTML
[Bài đọc] Tổng quan HTML
[Bài đọc] Các thẻ heading, paragraph, formatting trong HTML
[Bài đọc] Thẻ tạo đoạn văn trong HTML
[Bài đọc] HTML Styles
[Bài đọc] Thẻ danh sách trong HTML
[Bài đọc] HTML Text Formatting
[Bài đọc] Chú thích trong HTML
[Bài đọc] Thẻ hiển thị hình ảnh, liên kết trong HTML
[Thực hành] Sử dụng thẻ HTML cơ bản
[Thực hành] Định dạng văn bản với HTML Styles
[Thực hành] Tạo danh sách trong HTML
[Bài tập] Sử dụng các thẻ tiêu đề và đoạn văn
[Bài tập] Sử dụng danh sách trong HTML
[Bài tập] Tạo liên kết trong HTML
[Bài tập] Định dạng văn bản với HTML Styles
[Bài tập] Sử dụng thẻ hình ảnh

HTML Form & Table

[Bài đọc] Tạo biểu mẫu cho trang web
[Bài đọc] Sử dụng input, button và text-area
[Bài đọc] Sử dụng select, option
[Thực hành] Tạo form cơ bản
[Thực hành] Tạo một form tìm kiếm Google
[Bài đọc] Table Trong HTML
[Thực hành] Tạo bảng đơn giản với tiêu đề và dữ liệu
[Thực hành] Gộp ô trong bảng với rowspan và colspan
[Bài tập] Tạo form đơn giản
[Bài tập] Tạo giao diện form đăng ký người dùng
[Bài tập] Tạo form lấy survey khách hàng
[Bài tập] Tạo bảng danh sách sản phẩm trong HTML
[Bài tập] Gộp ô trong bảng với rowspan và colspan

CSS

[Bài đọc] Tổng quan CSS
[Bài đọc] Các bộ chọn (selector) khác nhau trong CSS
[Bài đọc] Đường viền trong CSS
[Bài đọc] Điều chỉnh màu nền và ảnh nền
[Bài đọc] Sử dụng màu sắc trong trang web
[Thực hành] Danh sách trong CSS
[Thực hành] Bảng trong CSS
[Thực hành] Tạo trang web cá nhân với CSS
[Bài tập] Nhúng CSS vào trang HTML
[Bài tập] Sử dụng bộ chọn CSS để định dạng trang web
[Bài tập] Tạo trang web với màu nền và ảnh nền

CSS Box Model

[Bài giảng] Mô hình hộp trong CSS
[Bài đọc] Mô hình hộp (Box Model)
[Bài đọc] Thuộc tính box-sizing và cách sử dụng
[Bài đọc] Cách tối ưu khoảng cách trong Box Model
[Thực hành] Sử dụng Box Model 1
[Thực hành] Sử dụng Box Model 2
[Thực hành] Sử dụng Box Model 3
[Bài tập] Sử dụng Box Model 1
[Bài tập] Sử dụng Box Model 2

CSS Position

[Bài giảng] Thuộc tính position
[Bài đọc] Các giá trị của thuộc tính position và cách sử dụng
[Bài đọc] Sử dụng z-index để kiểm soát thứ tự hiển thị của phần tử
[Thực hành] Tạo bố cục các fixed header và fixed footer
[Thực hành] Tạo menu dọc
[Thực hành] Tạo menu ngang
[Thực hành] Tạo thanh điều hướng sticky khi cuộn trang
[Bài tập] Tạo giao diện giản lược của trang chủ
[Bài tập] Phát triển trang web xem hoạt hình trực tuyến

CSS Layout

[Bài giảng] Tạo Layout với div và CSS
[Bài đọc] CSS Layout – Thuộc tính display
[Bài đọc] CSS Layout – width and max-width
[Bài đọc] CSS Layout – Overflow
[Bài đọc] CSS Layout – Float
[Bài đọc] CSS Layout – Clear
[Bài đọc] CSS Layout – display: inline-block
[Bài đọc] CSS Layout – Horizontal & Vertical Align
[Thực hành] Quản lý nội dung bị tràn với Overflow
[Thực hành] Tạo bố cục hai cột bằng Float và Clear
[Thực hành] Tạo bố cục cơ bản
[Bài tập] Tạo layout với các thẻ HTML5 và CSS
[Bài tập] Xây dựng bố cục trang web với display và inline-block
[Bài tập] Quản lý bố cục trang với overflow và float

CSS RWD

[Bài đọc] Responsive Web Design
[Bài đọc] Grid View
[Bài đọc] RWD Media Queries
[Bài đọc] RWD với DIV và CSS
[Bài đọc] RWD với Flexbox
[Bài đọc] Thiết lập Viewport và Meta Tags trong RWD
[Thực hành] Tạo thanh điều hướng responsive
[Thực hành] Xây dựng trang web Landing Page Responsive
[Bài tập] Tạo layout với RWD
[Bài tập] Tạo gallery đơn giản sử dụng RWD

CSS Grid

[Bài đọc] CSS Grid Layout
[Bài đọc] CSS Grid Container
[Bài đọc] CSS Grid Item
[Bài đọc] CSS Grid Template Rows
[Bài đọc] CSS Grid Auto Flow
[Thực hành] CSS | grid-template-columns Property
[Thực hành] CSS | grid-column-start Property
[Thực hành] CSS | grid-row-gap Property
[Thực hành] CSS | grid-row Property
[Thực hành] CSS | grid-gap Property
[Thực hành] Xây dựng bố cục trang web với CSS Grid
[Bài tập] Tạo bố cục responsive bằng CSS Grid

CSS Flex

[Bài đọc] CSS Flexbox
[Bài đọc] CSS Flex Container
[Bài đọc] CSS Flex Items
[Bài đọc] CSS Flex Responsive
[Bài đọc] CSS Flexbox – Justify Content & Align Items
[Bài đọc] CSS Flexbox – Order & Align-Self
[Thực hành] CSS | flex-wrap property
[Thực hành] CSS | flex-basis Property
[Thực hành] CSS | flex-grow Property
[Thực hành] CSS | flex-flow Property
[Thực hành] Xây dựng bố cục trang web với CSS Flexbox
[Bài tập] Tạo bố cục responsive bằng CSS Flexbox

Bootstrap 1

[Bài đọc] Định nghĩa và ứng dụng của Bootstrap
[Bài đọc] Ưu nhược điểm của 2 cách cài đặt Bootstrap
[Bài đọc] Phân tích bố cục trang web
[Bài đọc] Navbar – Navbar Dropdowns
[Bài đọc] Containers
[Bài đọc] Grid system
[Bài đọc] Buttons
[Bài đọc] Images
[Bài đọc] Text
[Thực hành] Tạo Navbar với Bootstrap
[Thực hành] Xây dựng Landing Page với Bootstrap
[Thực hành] Tạo Trang Giới Thiệu Doanh Nghiệp với Bootstrap
[Bài tập] Thiết kế Trang Web với Bootstrap Grid System
[Bài tập] Thiết kế Trang Đăng Ký với Bootstrap Forms
[Bài tập] Tạo Landing Page với Bootstrap và Hình Ảnh

Bootstrap 2

[Bài đọc] Display property
[Bài đọc] Margin & Pading
[Bài đọc] Contents
[Bài đọc] Flex/Wrap/justify
[Bài đọc] Font Awesome
[Bài đọc] Carousel
[Bài đọc] Form và Input trong Bootstrap
[Thực hành] Tạo layout trong Bootstrap
[Thực hành] Xây dựng Trang Chủ với Bootstrap
[Thực hành] Tạo Bố Cục 3 Cột bằng Bootstrap Grid và Flexbox
[Bài tập] Tạo Trang Đăng Ký Người Dùng
[Bài tập] Xây dựng Landing Page
[Bài tập] Thiết kế Trang Giới Thiệu Sản Phẩm

Website Template

[Bài đọc] Tổng quan về Website Template
[Bài đọc] Header Section
[Bài đọc] Navigation Menu
[Bài đọc] Content Section
[Bài đọc] Footer Section
[Thực hành] Template web page using HTML and CSS
[Thực hành] Tạo Website Template Có Giao Diện Đẹp Mắt
[Bài tập] Phân tích và Xây dựng Cấu Trúc Website Template

SASS

[Bài đọc] Tổng quan về SASS
[Bài đọc] Variables: Biến trong SASS
[Bài đọc] Extend & Inheritance: Mở rộng và Kế thừa trong CSS
[Bài đọc] Mixin: Nhóm CSS
[Bài đọc] Navigate Between Pages and CSS Styling
[Bài đọc] Nesting: Lồng CSS Selector
[Bài đọc] Partials và Importing
[Bài đọc] Cách tổ chức thư mục và file SASS hiệu quả
[Bài đọc] Thiết lập Build Process
[Bài đọc] Hướng dẫn cài đặt SASS bằng npm & SASS CLI
[Bài đọc] Best Practices & Debugging SASS
[Thực hành] Chuyển đổi CSS có sẵn sang SASS theo chuẩn
[Thực hành] Tạo mixins & biến để tối ưu CSS của website mẫu
[Bài tập] Tái cấu trúc mã CSS cho sẵn
[Bài tập] Tái cấu trúc mã CSS của các bài tập đã làm

Case Study 2

Xây dựng giao diện web với HTML và CSS

Course Content

Default Module