CSS Motion-Path
Đây là thuộc tính mới của CSS hỗ trợ cho việc đi chuyển đối tượng theo 1 đường vẽ (path) được định sẵn.Step 1: chuẩn bị hình ảnh
- Có thể sử dụng hình ảnh dạng PNG, JPG hay hình hoạt ảnh để hiệu ứng được đẹp hơn. Trong ví dụ sẽ sử dụng hình ảnh GIF để minh họa.
- Chép hình ảnh vào thư mục của dự án.
Step 2: tạo file HTML chèn hình ảnh
- Tạo file
index.html - Nội dung file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiệu ứng Animation Motion Path CSS</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="motion-demo">
<img src="img/giphy.webp" />
</div>
</body>
</html>
Step 3: tạo file CSS
- Tạo file
app.css - Nội dung file:
#motion-demo {
offset-path: path('M 0 0 L 0 175'); /* vẽ đường path theo chiều dọc để object chạy theo */
animation: move 3000ms infinite alternate ease-in-out; /* hoạt cảnh diễn ra trong 3s và lặp lại liên tục theo gia tốc */
width: 200px;
height: 200px;
background: cyan;
border: 1px solid red;
margin: 30px auto;
transform: rotate(-90deg);
}
#motion-demo img {
width: 100%;
height: 100%;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Kết quả:
Truy cập để xem demo: http://frontend-basic.learning.nentang.vn/example/tao-hieu-ung-animation-motion-path-css/index.htmlMục lục
Chương trình học
- Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
-
HTML5 là gì? Các thẻ (tag) HTML cơ bản
19
- HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML #37
- Khác biệt giữa HTML và HTML5 #2623
- Cấu trúc file HTML5 cơ bản #32
- Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS #10192
- Các thói quen cần có khi lập trình web sử dụng HTML #38
- Các thẻ (tag) định nghĩa mô tả (meta) cho trang web #2614
- Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text) #10249
- Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule) #10242
- Các thẻ (tag) định dạng kiểu font chữ #33
- Các thẻ (tag) định dạng hiển thị cho văn bản (text) #10260
- Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF #10256
- Các thẻ (tag) tạo Siêu liên kết (hyperlink) #2615
- Các thẻ (tag) tạo Danh sách (list) #2618
- Các thẻ (tag) chèn hình ảnh vào trang web #10276
- Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web #9589
- Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web #9611
- Các ký tự đặc biệt trong HTML #2636
- Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình #9996
- Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE #10314
-
Thiết kế bố cục trang web (layout)
12
- Thẻ TABLE (TABLE tag) là gì? #39
- Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) #35
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản #9102
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ #8499
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu #8500
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ #8501
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm #8502
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết #8504
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng #8506
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm #8509
- Thẻ DIV (DIV tag) là gì? #36
- Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) #34
-
Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM
21
- Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì? #44
- Tạo ô nhập liệu INPUT 1 dòng (single line text) #45
- Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text) #46
- Tạo ô nhập liệu INPUT dạng ẩn (hidden) #47
- Tạo nút bấm BUTTON #51
- Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn #49
- Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn #48
- Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn #50
- Tạo ô nhập liệu INPUT kiểu COLOR #59
- Tạo ô nhập liệu INPUT kiểu DATE #57
- Tạo ô nhập liệu INPUT kiểu EMAIL #52
- Tạo ô nhập liệu INPUT kiểu NUMBER #55
- Tạo ô nhập liệu INPUT kiểu RANGE #56
- Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại) #54
- Tạo ô nhập liệu INPUT kiểu TIME #58
- Tạo ô nhập liệu INPUT kiểu URL #53
- Tạo thanh đo lường METER #61
- Tạo thanh tiến trình PROGRESS #60
- Tạo biểu mẫu (Form) đặt vé Máy bay #2641
- Tạo biểu mẫu (Form) Đăng nhập #2642
- Tạo biểu mẫu (Form) Đăng ký #2643
-
CSS là gì?
34
- CSS là gì? Cú pháp sử dụng CSS #62
- Các cách áp dụng CSS để định dạng trang web #40
- Các thuộc tính CSS định dạng font chữ #41
- Các thuộc tính CSS quy định màu sắc đối tượng #42
- Đơn vị đo lường trong CSS #43
- Bài tập - Tạo menu ngang đa cấp bằng CSS #8796
- Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử #9153
- Tìm hiểu về Thuộc tính vị trí Position trong CSS #8923
- Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS #9724
- Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix #9733
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1 #9437
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2 #9458
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3 #9459
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action #9462
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product #9464
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services #9466
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team #9467
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience #9470
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1 #9473
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2 #9475
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3 #9476
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic #9480
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials #9482
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables #9484
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1 #9486
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2 #9487
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer #9490
- Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS #9754
- Bộ lựa chọn trong CSS (CSS Selector) #10020
- Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography #10155
- Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic #10330
- Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web #10344
- Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS #11632
- Bài tập - Thiết kế mẫu hóa đơn bán hàng cho máy in nhiệt khổ giấy K80 và K57 #12222
-
Javascript căn bản
9
- Javascript là gì? Ứng dụng của Javascript #2692
- Các cách sử dụng Javascript trong trang web #2693
- Biến trong Javascript #2694
- Hàm trong Javascript #2695
- Lab 01 - tạo chương trình tính toán cơ bản #7864
- Bài tập Ghép chuỗi String #8156
- Kiểm tra Kiến thức JS #8230
- Cấu trúc điều khiển sử dụng IF ELSE #8896
- Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM) #2696
-
JQuery căn bản
10
- Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web #8243
- Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web #8245
- Tìm hiểu quy tắc vận hành của JQUERY #8244
- Toàn tập về Bộ lựa chọn (selector) #8248
- Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY #8995
- Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout #8996
- Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval #9020
- Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY #9033
- Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR #9037
- Tích hợp công cụ chọn Ngày Tháng Date Picker #9040
-
Bootstrap là gì? JQuery là cái chi?
8
- Giới thiệu Bootstrap #2698
- Cách sử dụng Bootstrap trong dự án của bạn #2699
- Hệ thống Lưới (GRID) của Bootstrap #2700
- Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap #2701
- Ràng buộc dữ liệu (validation) bằng Bootstrap #8270
- Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty #8332
- Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) #9805
- Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query #10114
-
Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap
14
- Lộ trình (Roadmap) Thực hiện Đồ án #10356
- Khởi tạo thư mục dự án #2702
- Phân tích Bố cục (layout) #2703
- Xây dựng Trang chủ (index) #2704
- Xây dựng Trang Giới thiệu (about) #2705
- Xây dựng Trang Liên hệ (contact) #2706
- Xây dựng Trang Danh sách Sản phẩm (products) #2707
- Xây dựng Trang Chi tiết Sản phẩm (product_detail) #2708
- Xây dựng Trang Giỏ hàng (cart) #2709
- Xây dựng Trang Thanh toán (checkout) #2710
- Xây dựng Trang Đăng nhập (login) #2711
- Xây dựng Trang Đăng ký (register) #2712
- Xây dựng Trang Tìm kiếm (search) #2713
- Thưởng thức Kết quả (demo version) #2714
- Kiểm tra
- Tài liệu tham khảo 4
-
VueJS
7
- VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd #8237
- Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel #10161
- Component trong VueJS #8238
- Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản #9406
- Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap #8354
- Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ #8271
- Test #8925
- UI/UX trong lập trình Web 2
- CSS Flexbox 1
- Extras 2
- Video khóa học 1
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
- Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
-
HTML5 là gì? Các thẻ (tag) HTML cơ bản
19
- HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML #37
- Khác biệt giữa HTML và HTML5 #2623
- Cấu trúc file HTML5 cơ bản #32
- Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS #10192
- Các thói quen cần có khi lập trình web sử dụng HTML #38
- Các thẻ (tag) định nghĩa mô tả (meta) cho trang web #2614
- Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text) #10249
- Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule) #10242
- Các thẻ (tag) định dạng kiểu font chữ #33
- Các thẻ (tag) định dạng hiển thị cho văn bản (text) #10260
- Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF #10256
- Các thẻ (tag) tạo Siêu liên kết (hyperlink) #2615
- Các thẻ (tag) tạo Danh sách (list) #2618
- Các thẻ (tag) chèn hình ảnh vào trang web #10276
- Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web #9589
- Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web #9611
- Các ký tự đặc biệt trong HTML #2636
- Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình #9996
- Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE #10314
-
Thiết kế bố cục trang web (layout)
12
- Thẻ TABLE (TABLE tag) là gì? #39
- Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) #35
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản #9102
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ #8499
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu #8500
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ #8501
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm #8502
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết #8504
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng #8506
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm #8509
- Thẻ DIV (DIV tag) là gì? #36
- Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) #34
-
Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM
21
- Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì? #44
- Tạo ô nhập liệu INPUT 1 dòng (single line text) #45
- Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text) #46
- Tạo ô nhập liệu INPUT dạng ẩn (hidden) #47
- Tạo nút bấm BUTTON #51
- Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn #49
- Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn #48
- Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn #50
- Tạo ô nhập liệu INPUT kiểu COLOR #59
- Tạo ô nhập liệu INPUT kiểu DATE #57
- Tạo ô nhập liệu INPUT kiểu EMAIL #52
- Tạo ô nhập liệu INPUT kiểu NUMBER #55
- Tạo ô nhập liệu INPUT kiểu RANGE #56
- Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại) #54
- Tạo ô nhập liệu INPUT kiểu TIME #58
- Tạo ô nhập liệu INPUT kiểu URL #53
- Tạo thanh đo lường METER #61
- Tạo thanh tiến trình PROGRESS #60
- Tạo biểu mẫu (Form) đặt vé Máy bay #2641
- Tạo biểu mẫu (Form) Đăng nhập #2642
- Tạo biểu mẫu (Form) Đăng ký #2643
-
CSS là gì?
34
- CSS là gì? Cú pháp sử dụng CSS #62
- Các cách áp dụng CSS để định dạng trang web #40
- Các thuộc tính CSS định dạng font chữ #41
- Các thuộc tính CSS quy định màu sắc đối tượng #42
- Đơn vị đo lường trong CSS #43
- Bài tập - Tạo menu ngang đa cấp bằng CSS #8796
- Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử #9153
- Tìm hiểu về Thuộc tính vị trí Position trong CSS #8923
- Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS #9724
- Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix #9733
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1 #9437
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2 #9458
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3 #9459
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action #9462
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product #9464
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services #9466
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team #9467
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience #9470
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1 #9473
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2 #9475
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3 #9476
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic #9480
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials #9482
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables #9484
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1 #9486
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2 #9487
- Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer #9490
- Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS #9754
- Bộ lựa chọn trong CSS (CSS Selector) #10020
- Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography #10155
- Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic #10330
- Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web #10344
- Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS #11632
- Bài tập - Thiết kế mẫu hóa đơn bán hàng cho máy in nhiệt khổ giấy K80 và K57 #12222
-
Javascript căn bản
9
- Javascript là gì? Ứng dụng của Javascript #2692
- Các cách sử dụng Javascript trong trang web #2693
- Biến trong Javascript #2694
- Hàm trong Javascript #2695
- Lab 01 - tạo chương trình tính toán cơ bản #7864
- Bài tập Ghép chuỗi String #8156
- Kiểm tra Kiến thức JS #8230
- Cấu trúc điều khiển sử dụng IF ELSE #8896
- Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM) #2696
-
JQuery căn bản
10
- Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web #8243
- Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web #8245
- Tìm hiểu quy tắc vận hành của JQUERY #8244
- Toàn tập về Bộ lựa chọn (selector) #8248
- Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY #8995
- Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout #8996
- Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval #9020
- Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY #9033
- Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR #9037
- Tích hợp công cụ chọn Ngày Tháng Date Picker #9040
-
Bootstrap là gì? JQuery là cái chi?
8
- Giới thiệu Bootstrap #2698
- Cách sử dụng Bootstrap trong dự án của bạn #2699
- Hệ thống Lưới (GRID) của Bootstrap #2700
- Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap #2701
- Ràng buộc dữ liệu (validation) bằng Bootstrap #8270
- Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty #8332
- Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive) #9805
- Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query #10114
-
Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap
14
- Lộ trình (Roadmap) Thực hiện Đồ án #10356
- Khởi tạo thư mục dự án #2702
- Phân tích Bố cục (layout) #2703
- Xây dựng Trang chủ (index) #2704
- Xây dựng Trang Giới thiệu (about) #2705
- Xây dựng Trang Liên hệ (contact) #2706
- Xây dựng Trang Danh sách Sản phẩm (products) #2707
- Xây dựng Trang Chi tiết Sản phẩm (product_detail) #2708
- Xây dựng Trang Giỏ hàng (cart) #2709
- Xây dựng Trang Thanh toán (checkout) #2710
- Xây dựng Trang Đăng nhập (login) #2711
- Xây dựng Trang Đăng ký (register) #2712
- Xây dựng Trang Tìm kiếm (search) #2713
- Thưởng thức Kết quả (demo version) #2714
- Kiểm tra
- Tài liệu tham khảo 4
-
VueJS
7
- VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd #8237
- Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel #10161
- Component trong VueJS #8238
- Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản #9406
- Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap #8354
- Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ #8271
- Test #8925
- UI/UX trong lập trình Web 2
- CSS Flexbox 1
- Extras 2
- Video khóa học 1
Bài học trước Bài học tiếp theo
Menu Tiện ích
Menu Hướng dẫn Học tập
❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜
Thực hiện các bước tuần tự theo nội dung Bài học nhé!