_1738753706398.png){kind=logo}
đ299,000
599,000Bạn sẽ học được những gì
Có thể tự làm được trang web cá nhân với đầy đủ hiệu ứng như các giao diện web hiện nay được bày bán, giao diện web ảnh, trang trình bày sản phẩm, tự thiết kế trang blog cho cá nhân, trang giới thiệu công ty, cửa hàng, dịch vụ với đầy đủ hiệu ứng theo ý mình, với đầy đủ tính năng phản hồi.
Về lâu dài có thể ghép với Wordpress hoặc CMS khác để bán thành phẩm tại các trang web nổi tiếng như themeforest...
Nội dung
0 Chương
•
0 Bài học
•
0 giờ 0 phút
Mở rộng tất cả
GIỚI THIỆU KHÓA HỌC VÀ CÀI ĐẶT CÔNG CỤ
2 Bài học
•
16 phút 27 giây
Giới thiệu khóa học08:30
Cài đặt công cụ07:57
GIỚI THIỆU CÁC THẺ HTML CƠ BẢN
5 Bài học
•
23 phút 34 giây
Giới thiệu các thẻ HTML cơ bản06:12
Thẻ tiêu đề04:44
Nhóm thẻ xuống dòng03:41
Thẻ trình bày text và gắn link05:23
Thẻ ảnh03:34
GIỚI THIỆU CSS CƠ BẢN
4 Bài học
•
21 phút 17 giây
Giới thiệu CSS05:09
Học thuộc tính CSS qua bài thực hành - phần 107:50
Học thuộc tính CSS qua bài thực hành - phần 203:40
Học thuộc tính CSS qua bài thực hành - phần 304:38
THUỘC TÍNH FLEX TRONG CSS
4 Bài học
•
30 phút 32 giây
Giới thiệu class trong CSS06:57
Áp dụng class và chia cột05:22
Luyện tập chia cột bằng flex12:36
Cách gọi CSS nâng cao05:37
LUYỆN TẬP CHIA CỘT BẰNG FLEX
3 Bài học
•
28 phút 46 giây
Luyện tập công thức chia cột09:58
Cách cài đặt và sử dụng font icon08:35
Cách sử dụng nhiều Class cùng một lúc10:13
CHỮA BÀI TẬP
2 Bài học
•
19 phút 09 giây
Chữa bài tập làm website tin tức báo mới sử dụng kiến thức đã học13:54
Giải thích thuộc tính display block05:15
LÀM MENU VỚI HTML CSS
6 Bài học
•
63 phút 37 giây
Cách làm menu với HTML CSS04:10
Thực hành với menu website báo mới16:25
Cách căn giữa menu06:25
Cách làm hiệu ứng di chuột lên ảnh tương tác lên chữ13:28
Chữa bài sử dụng thuộc tính Flex - Phần 112:23
Chữa bài sử dụng thuộc tính Flex - Phần 210:46
LÀM HIỆU ỨNG SLIDE CƠ BẢN NHẤT
2 Bài học
•
15 phút 32 giây
Cách làm hiệu ứng slide ảnh cơ bản nhất10:18
Cách tinh chỉnh kích cỡ của hiệu ứng slide05:14
CHỮA BÀI TẬP TIKI.VN
4 Bài học
•
32 phút 37 giây
Chữa bài tiki.vn sử dụng Flex - Phần 106:32
Chữa bài tiki.vn sử dụng Flex - Phần 213:37
Chữa bài tiki.vn sử dụng Flex - Phần 305:44
Cách căn ngang và căn dọc phần tử sử dụng Flex06:44
THUỘC TÍNH CHIA LAYER
6 Bài học
•
69 phút 32 giây
Luyện tập chia layer với thuộc tính zoom11:07
Luyện tập chia layer kèm thuộc tính xoay06:58
Chữa bài sử dụng thuộc tính chia layer21:44
Chữa bài chia layer - Phần HTML07:13
Chữa bài chia layer - Phần CSS15:08
Chữa bài chia layer với thuộc tính Rotate và Perspective07:22
CHỮA BÀI TẬP CSS3 TỪ CÁC SẢN PHẨM THEMEFOREST BẤT KỲ
4 Bài học
•
33 phút 59 giây
Chữa bài tập CSS3 trên themeforest - Phần 108:03
Chữa bài tập CSS3 trên themeforest - Phần 205:04
Chữa bài tập CSS3 trên themeforest - Phần 312:53
Chữa bài tập CSS3 trên themeforest - Phần 407:59
LÀM MENU ĐA CẤP VỚI THUỘC TÍNH CHIA LAYER
4 Bài học
•
25 phút 28 giây
Cách làm menu đa cấp áp dụng thuộc tính chia layer - Phần 104:07
Cách làm menu đa cấp áp dụng thuộc tính chia layer - Phần 205:19
Cách làm menu đa cấp áp dụng thuộc tính chia layer - Phần 313:04
Cách làm menu đa cấp áp dụng thuộc tính chia layer - Phần 402:58
KỸ THUẬT NÂNG CAO - SỬ DỤNG BIẾN VÀ AFTER BEFORE TRONG CSS3
4 Bài học
•
36 phút 40 giây
Cách sử dụng biến trong CSS10:22
Kĩ thuật sử dụng After before12:59
Luyện tập After before và thuộc tính đổ màu Gradient09:00
Cách đặt Transition hai chiều04:19
ÔN TẬP KIẾN THỨC ĐÃ HỌC QUA VIỆC LÀM GIAO DIỆN HOÀN CHỈNH
9 Bài học
•
49 phút 53 giây
Thực hành làm giao diện Belton theme - Phần HTML top06:28
Thực hành làm giao diện Belton theme - Phần CSS top11:29
Thực hành làm giao diện Belton theme - Phần Gradient và chia Layer04:33
Thực hành làm giao diện Belton theme - Phần áp dụng after before01:37
Thực hành làm giao diện Belton theme - HTML phần text banner02:09
Thực hành làm giao diện Belton theme -CSS phần text banner10:07
Thực hành làm giao diện Belton theme - HTML CSS phần content 106:27
Thực hành làm giao diện Belton theme - Background attachment01:27
Thực hành làm giao diện Belton theme - Cách đưa icon vào before và after05:36
JAVASCRIPT - GIỚI THIỆU
1 Bài học
•
07 phút 17 giây
Giới thiệu khóa học07:17
CÀI ĐẶT
2 Bài học
•
13 phút 11 giây
Cài đặt editor và plugin javascript snippet09:07
Cài đặt template sử dụng trong khóa học04:04
CHƯƠNG TRÌNH ĐẦU TIÊN VÀ KHÁI NIỆM CƠ BẢN VỀ JAVASCRIPT
2 Bài học
•
15 phút 58 giây
Khởi động với hàm đầu tiên trong javasript10:45
Khái niệm về biến trong javascript05:13
TOÁN TỬ, ĐỊNH DANH VÀ CÂU LỆNH SO SÁNH TRONG JAVASCRIPT
3 Bài học
•
25 phút 58 giây
Toán tử và áp dụng trong viết hiệu ứng click13:39
Định danh trong javascript03:03
Câu lệnh so sánh trong javascript09:16
KIỂU HAY SỬ DỤNG NHẤT TRONG JAVASCRIPT - MẢNG VÀ ĐỐI TƯỢNG
5 Bài học
•
41 phút 03 giây
Mảng là gì? - Tại sao phải dùng mảng?06:12
3 cách khai báo mảng05:33
Kiểu dữ liệu đối tượng13:29
Thao tác với kiểu dữ liệu đối tượng07:54
Dấu nháy và các toán tử rút gọn07:55
XỬ LÝ TEXT, XỬ LÝ SỐ VÀ SỬ DỤNG VÒNG LẶP TRONG JAVASCRIPT
5 Bài học
•
31 phút 16 giây
Vòng lặp09:19
Vòng lặp for in05:06
Use Strict là gì?03:47
Xử lý text trong javascript08:55
Xử lý số trong javascript04:09
HÀM VÀ CÁC LOẠI HÀM SỬ DỤNG TRONG JAVASCRIPT
8 Bài học
•
71 phút 31 giây
Hàm là gì?10:59
Thực hành với hàm có tham số và không có tham số09:50
Return là gì? - hai tác dụng của return08:12
Clousure function hay sử dụng12:28
Thao tác với kiểu dữ liệu đối tượng - Vì sao cần phải có constructor?11:26
Khái niệm const04:51
Khái niệm chuỗi thay thế trong javascript09:58
Arrow function03:47
JAVASCRIPT THAY CHO JQUERY
4 Bài học
•
30 phút 32 giây
Giới thiệu 4 hàm mới sử dụng trong vẽ giao diện frontend bằng javascript10:19
Tạo dữ liệu demo và duyệt mảng phức hợp08:14
Hoàn thiện ví dụ demo bằng cách sử dụng Template String trong javascript06:09
Giới thiệu phần học javascript thuần viết cho frontend05:50
SỬ DỤNG VÒNG LẶP THAO TÁC VỚI THẺ HTML
2 Bài học
•
19 phút 15 giây
Cách truy xuất đến một phần tử và thay đổi giá trị của phần tử trong javas11:38
Sử dụng vòng lặp thao tác với các thẻ HTML07:37
CÁC HÀM TRUY XUẤT PHẦN TỬ DÀNH CHO FRONTEND
4 Bài học
•
35 phút 36 giây
Sử dụng ID trong javascript06:04
Sử dụng Class trong javascript11:31
Sử dụng hàm querySelector04:49
Hàm đa năng sử dụng nhiều nhất - querySelectorAll13:12
CÁC HÀM XỬ LÝ GIAO DIỆN CỦA JAVASCRIPT
2 Bài học
•
20 phút 59 giây
Ba hàm xử lý giao diện cực mạnh trong javascript10:35
Xử lý sự kiện trong javascript và khái niệm về document ready10:24
HỌC VIẾT HIỆU ỨNG THỰC TẾ QUA BÀI TẬP
2 Bài học
•
22 phút 44 giây
Bắt đầu viết hiệu ứng bằng javascript thuần dựa trên kiến thức đã học14:29
Phương pháp viết hiệu ứng javascript với Animation08:15
PHƯƠNG PHÁP VIẾT HIỆU ỨNG HAI CHIỀU VỚI ANIMATION
2 Bài học
•
29 phút 05 giây
Viết hiệu ứng 2 chiều nâng cao với javascript12:28
Áp dụng javascript vào animation 2 chiều16:37
VIẾT HIỆU ỨNG TƯƠNG TÁC NOTIFICATION CỦA FACEBOOK
4 Bài học
•
23 phút 59 giây
Viết lại các hiệu ứng tương tác của facebook bằng javascript - Phần HTML05:05
Hiệu ứng tương tác facebook - Phần CSS08:23
Viết hiệu ứng javascript như facebook - Phần 106:39
Viết hiệu ứng javascript như facebook - Phần 203:52
PHƯƠNG PHÁP VIẾT HIỆU ỨNG TỔNG QUÁT THÔNG QUA TRUYỀN THAM SỐ BẰNG HTML5
3 Bài học
•
22 phút 06 giây
Phương pháp viết hiệu ứng tổng quát hóa trong truyền dữ liệu của javascrip04:42
Truyền tham số giữa HTML và Javascript thế nào?07:05
Học cách viết javascript cho frontend dạng tổng quát10:19
VIẾT HIỆU ỨNG TỔNG QUÁT CHO FACEBOOK BẰNG PHƯƠNG PHÁP TRUYỀN THAM SỐ
4 Bài học
•
29 phút 03 giây
Áp dụng phương pháp tham số HTML qua thực hành hiệu ứng Facebook - Phần HTML10:31
Tạo CSS cho phần giao diện hiệu ứng04:58
Xử lý hiệu ứng cho Icon bằng javascript03:09
Hoàn thiện phần gửi nhận thông tin qua HTML bằng javascript10:25
TÓM TẮT PHẦN KIẾN THỨC CƠ BẢN JAVASCRIPT
2 Bài học
•
21 phút 35 giây
Xử lý if else đối với hiệu ứng click12:40
Tổng kết kiến thức javascript học được08:55
VIẾT HIỆU ỨNG TƯƠNG TÁC MENU - PHẦN HTML-CSS
3 Bài học
•
17 phút 53 giây
Tổng kết kiến thức đã học và giới thiệu phần bài tập xử lý menu04:42
Phần HTML cho hiệu ứng Menu bằng javascript03:42
Phần CSS cho giao diện menu09:29
VIẾT HIỆU ỨNG TƯƠNG TÁC MENU - PHẦN JAVASCRIPT
3 Bài học
•
22 phút 18 giây
Phần javascript cho hiệu ứng08:15
Phần javascript hoàn thiện và cách sử dụng biểu đồ tốc độ06:21
Hướng dẫn cách xử lý các hiệu ứng còn lại07:42
CÁC HÀM CẦN THIẾT ĐỂ THAO TÁC VỚI HIỆU ỨNG SCROLL
2 Bài học
•
15 phút 35 giây
Bắt sự kiện và tính vị trí07:38
Bài tập đầu tiên với hàm scroll07:57
XỬ LÝ PHẦN GIAO DIỆN VÀ TƯƠNG TÁC CHO HIỆU ỨNG SCROLL ĐẦU TIÊN
3 Bài học
•
15 phút 09 giây
Xử lý phần giao diện03:50
Xử lý phần javascript08:04
Hoàn thiện hiệu ứng scroll sử dụng javascript03:15
VIẾT HÀM TƯƠNG TÁC SCROLL QUA BÀI TẬP THỰC TẾ TRÊN FACEBOOK - KENH14
4 Bài học
•
35 phút 13 giây
Thực hành viết hàm scroll qua bài tập thực tế11:01
Viết hàm javascript xử lý phần Menu Scroll06:18
Viết javascript tương tác cho cột bên phải10:27
Tổng kết các hàm javascript xử lý cho tương tác scroll07:27
VIẾT HIỆU ỨNG LOAD BẰNG JAVASCRIPT
1 Bài học
•
12 phút 23 giây
Viết hiệu ứng load bằng javascript12:23
'ĐỔ BÊ TÔNG' KIẾN THỨC QUA BÀI TẬP THỰC HÀNH JAVASCRIPT
21 Bài học
•
206 phút 06 giây
CSS3 tóm tắt các thuộc tính cơ bản22:59
Áp dụng thuộc tính tâm quay kết hợp với javascript19:21
Áp dụng hiệu ứng CSS3 sử dụng thuộc tính tâm quay08:54
Sử dụng After Before kết hợp với Scale09:29
Sử dụng thuộc tính Transform Style và Perspective cho hiệu ứng 3D17:00
Thực hành thuộc tính CSS 3D qua bài tập đặc trưng tạo hình lập phương bằng 6 DIV15:45
Thực hành làm hiệu ứng Youtube bằng Javascript - Phần 1 khởi động12:56
Thực hành làm hiệu ứng Youtube bằng Javascript - Phần 2 xử lý Javascript09:56
Thực hành Javascript qua bài tập làm tương tác trên Lazada.vn03:11
Tạo hiệu ứng Logo cho website Lazada.vn05:50
Xử lý phần cuộn chuột cho website Lazada.vn12:26
Hoàn thiện phần hiệu ứng logo cho website Lazada.vn07:33
Xử lý phần hiệu ứng cuộn chuột thay đổi menu cho Lazada04:27
Xử lý hiệu ứng tương tác cho nút 'Tất cả danh mục'05:31
Xử lý phần logic của việc click vào nút 'Tất cả danh mục'05:58
Hoàn thiện phần tương tác menu của Lazada07:09
Khởi động hiệu ứng Content Slider với phần HTML06:27
Xử lý giao diện Content Slider với CSS09:07
Logic và thao tác với phần nút điều hướng Content Slider09:31
Phần Javascript tương tác với nội dung09:03
Hoàn thiện hiệu ứng Content Slider03:33
KHỞI ĐỘNG PROJECT VIẾT HIỆU ỨNG SLIDE BẰNG JAVASCRIPT
2 Bài học
•
06 phút 58 giây
Viết hiệu ứng Slide bằng javascript03:29
Khởi động project slide bằng javascript03:29
PHƯƠNG THỨC XỬ LÝ PHẦN CHUYỂN SLIDE BẰNG JAVASCRIPT
2 Bài học
•
12 phút 23 giây
Xử lý CSS phần chuyển slide05:00
Viết javascript cho phần chuyển slide07:23
CÁCH XỬ LÝ GIAO DIỆN LUÔN LUÔN FULL MÀN HÌNH
2 Bài học
•
16 phút 13 giây
Xử lý phần bố cục HTML cho nội dung slide06:57
Cách xử lý giao diện lúc nào cũng full màn hình09:16
DỰNG BỐ CỤC VÀ NỘI DUNG CHO SLIDE
2 Bài học
•
21 phút 24 giây
Dựng bố cục cơ bản cho Slide bằng relative và absolute10:09
Xử lý chi tiết giao diện của Slide và hoàn thiện giao diện11:15
LOGIC CỦA VIỆC TẠO HIỆU ỨNG CHUYỂN ĐỘNG TRONG SLIDE
3 Bài học
•
24 phút 55 giây
Tính vị trí của đối tượng bằng Javascript11:14
Viết hiệu ứng Slide chuyển động tương ứng khi click vào nút06:18
Logic của việc tạo hiệu ứng chuyển động bằng CSS3 kết hợp với javascript07:23
HOÀN THIỆN HIỆU ỨNG
2 Bài học
•
13 phút 18 giây
Viết hoàn chỉnh hiệu ứng chuyển động của toàn bộ slide - Phần 105:19
Viết hoàn chỉnh hiệu ứng chuyển động của toàn bộ slide - Phần 207:59
VIẾT HÀM AUTO SLIDE
5 Bài học
•
31 phút 01 giây
Lý thuyết về auto slide04:38
Tính xem đang ở Slide nào10:08
Viết hàm tự chuyển động05:10
Hoàn thiện hiệu ứng Javascript auto slide05:46
Ý nghĩa của hàm clearInterval05:19
KHỞI ĐỘNG PROJEC THỨ 2 VIẾT HIỆU ỨNG SLIDE NÂNG CAO
2 Bài học
•
16 phút 26 giây
Giới thiệu phần hướng dẫn viết hiệu ứng nâng cao05:48
Khởi động project với HTML10:38
HOÀN THIỆN PHẦN GIAO DIỆN
2 Bài học
•
16 phút 03 giây
Xử lý giao diện Project trực tiếp bằng Chrome Dev Tool08:06
Hoàn thiện giao diện chuẩn bị cho viết tương tác bằng Javascript07:57
LOGIC CỦA HÀM JAVASCRIPT
2 Bài học
•
21 phút 00 giây
Phân tích logic của chương trình08:38
Cách xác định phần tử hiện tại và phần tử tiếp theo khi ấn nút Next12:22
VIẾT CHUYỂN ĐỘNG BẰNG JAVASCRIPT VÀ CSS3
2 Bài học
•
11 phút 26 giây
Thêm chuyển động bằng Javascript05:24
Viết CSS3 cho chuyển động đầu tiên06:02
GIỚI THIỆU HÀM JAVASCRIPT CHECK TRẠNG THÁI CỦA CHUYỂN ĐỘNG
2 Bài học
•
13 phút 45 giây
Phân tích luồng hoạt động tiếp theo của hiệu ứng tương tác05:09
Giới thiệu hàm Javascript check trạng thái của chuyển động08:36
HOÀN THIỆN HÀM XỬ LÝ NÚT NEXT CỦA HIỆU ỨNG
1 Bài học
•
04 phút 08 giây
Hoàn thiện hiệu ứng tương tác cho nút next trong slide04:08
XỬ LÝ LỖI CLICK LIÊN TIẾP NHIỀU LẦN
2 Bài học
•
20 phút 44 giây
Xử lý lỗi khi click liên tiếp nhiều lần09:18
Xử lý chi tiết biến 'trạng thái' trong chương trình11:26
HOÀN THIỆN HÀM XỬ LÝ NÚT PREVIOUS CỦA HIỆU ỨNG
4 Bài học
•
21 phút 49 giây
Viết hàm Javascript xử lý cho nút Previous09:50
Tạo chuyển động sử dụng Javascript05:08
Tạo chuyển động sử dụng CSS03:11
Hoàn thiện logic cho nút Previous03:40
PHƯƠNG PHÁP ĐÓNG GÓI CODE TRONG JAVASCRIPT
2 Bài học
•
20 phút 39 giây
Sử dụng kiến thức về Function và tham số để đóng gói code09:45
Viết Javascript chi tiết cho việc đóng gói Code10:54
SỬ DỤNG THÀNH THẠO TOÁN TỬ 3 NGÔI QUA VIỆC ĐÓNG GÓI CODE
4 Bài học
•
35 phút 57 giây
Sử dụng toán tử ba ngôi viết 1 dòng bằng 6 dòng10:22
Áp dụng toán tử 3 ngôi trong việc đóng gói code - Phần 110:10
Áp dụng toán tử 3 ngôi trong việc đóng gói code - Phần 208:17
Áp dụng toán tử 3 ngôi trong việc đóng gói code - Phần 307:08
THIẾT KẾ HIỆU ỨNG SỐ 2 VÀ SỐ 3
2 Bài học
•
12 phút 12 giây
Chữa bài tập số 2 về thiết kế hiệu ứng hiển thị trên Slide07:50
Chữa bài tập số 3 về thiết kế hiệu ứng hiển thị trên Slide04:22
PHẢN XẠ VỀ CÁCH VIẾT HIỆU ỨNG CSS3 QUA 6 BÀI TẬP
6 Bài học
•
43 phút 25 giây
Ứng dụng 4 về xử lý hiệu ứng06:29
Bài tập 5 về hiệu ứng javascript10:10
Bài tập 6 về hiệu ứng javascript07:40
Bài tập 7 về hiệu ứng javascript06:42
Bài tập 8 về hiệu ứng javascript06:45
Bài tập 9 về hiệu ứng javascript05:39
KHỞI ĐỘNG PROJECT VIẾT HIỆU ỨNG TƯƠNG TÁC ẢNH CỦA FACEBOOK BẰNG JAVASCRIPT
2 Bài học
•
10 phút 44 giây
Viết chức năng tương tác ảnh của facebook bằng javascript native03:39
Dựng HTML cho project viết tương tác ảnh trên facebook07:05
HOÀN THIỆN PHẦN SETUP HTML - CSS
3 Bài học
•
26 phút 06 giây
Hoàn chỉnh HTML nội dung cho tương tác ảnh trên facebook06:41
Phần CSS cho nội dung10:56
Hoàn thiện giao diện HTML - CSS08:29
VIẾT JAVASCRIPT CHO CHỨC NĂNG BAN ĐẦU CỦA CHƯƠNG TRÌNH
3 Bài học
•
18 phút 19 giây
Xử lý logic ban đầu cho chương trình08:16
Xử lý javascript cho khối nền03:06
Viết Javascript cho chức năng đóng cửa sổ06:57
LẠI XỬ LÝ TIẾP CSS
3 Bài học
•
14 phút 45 giây
Xử lý phần nội dung hiển thị ra03:00
Xử lý phần CSS cho khối thông tin ảnh facebook06:01
Xử lý hiển thị khối thông tin bằng javascript05:44
BẮT ĐẦU CODE PHẦN ẢNH
3 Bài học
•
25 phút 26 giây
Bắt đầu làm phần ảnh04:00
Xử lý phần CSS cho khối các ảnh12:40
Căn giữa một phần tử theo chiều dọc thế nào08:46
LẠI XỬ LÝ TIẾP JAVASCRIPT
3 Bài học
•
30 phút 21 giây
Logic code của phần gallery ảnh08:01
Sử dụng Javascript nhận biết ảnh Active13:37
Cách xử lý code sau khi active và bí mật của nút X08:43
LOGIC THỰC HIỆN HIỆU ỨNG CHUYỂN ẢNH CỦA FACEBOOK
3 Bài học
•
16 phút 50 giây
Logic thực hiện việc chuyển ảnh của Facebook03:43
Xác định chỉ số phần tử hiện tại bằng Javascript04:48
Xác định chỉ số phần tử tiếp theo bằng Javascript08:19
HOÀN THIỆN HIỆU ỨNG ẢNH FACEBOOK
2 Bài học
•
11 phút 05 giây
Xử lý hoàn thiện logic cho nút Next facebook07:16
Xử lý nút Prev Facebook03:49
BÀI TẬP NÂNG CAO CHO PHẦN TƯƠNG TÁC ẢNH FACEBOOK
1 Bài học
•
05 phút 09 giây
Bài tập làm hoàn chỉnh hiệu ứng ảnh facebook05:09
Quản trị viên
Nguyễn Đức Việt