|
Bài 1.1: Giới thiệu Phan Văn Cương và tổng quan chương trình |
Bài 1.2: Cách tham gia 2 nhóm kín hỗ trợ 24/7 |
Bài 1.3: 5 bước học online hiệu quả trên unitop |
Bài 1.4: Những thiết bị/vật dụng cần chuyển bị |
Bài 1.5: Cách thiết lập mục tiêu - Xác định ngày hoàn thành khóa học |
Bài 1.6: Lên bản kế hoạch học tập của bản thân |
Bài 1.7: Cài đặt và sử dụng server ảo phục vụ code web |
Bài 1.8: Cặt đặt trình soạn thảo code chuyên nghiệp |
Bài 1.9: Chạy test dự án lên server localhost |
Bài 1.10: Cấu trúc file, thư mục khóa học |
Bài 1.11: Cách chạy dự án với Live Server trên Visual Studio Code |
Phần 2: Bộ thẻ Html cốt lõi xây dựng khung website |
Bài 2.1: Cấu trúc html của website |
Bài 2.2: Cách chú thích dòng, đoạn code trong html |
Bài 2.3: Thẻ định nghĩa tiêu đề trong website |
Bài 2.4: Thẻ định nghĩa đoạn văn bản trong website |
Bài 2.5: Tạo văn bản demo tiện lợi lorem ipsum |
Bài 2.6: Thẻ xuống dòng trong website |
Bài 2.7: Thẻ thêm hình ảnh vào website |
Bài 2.8: Các loại đường dẫn trong website |
Bài 2.9: Tạo liên kết các trang trong website(link) |
Bài 2.10: Tạo mục lục bài viết trong html |
Bài 2.11: Thẻ In nghiêng, in đậm, in gạch chân text |
Bài 2.12: Xây dựng file html làm trang chủ tự động quy cập |
Bài 2.12.2: (Update) Lỗi khi sử dụng link trong bài viết, sản phẩm |
Bài 2.13: Bài tập 1: Thực hành xây dựng website tin tức cơ bản |
Bài 2.14: Thẻ định nghĩa danh sách không có thứ tự |
Bài 2.15: Thẻ định nghĩa danh sách có thứ tự |
Bài 2.16: Thẻ hiển thị thông tin phụ(số lượng, mô tả phụ) |
Bài 2.17: Thẻ định dạng gạch ngang text (giá cũ) |
Bài 2.18: Hiển thị thông tin dạng bảng trong website |
Bài 2.19: Form nhập dữ liệu text, password |
Bài 2.20: Tạo tiêu đề phần tử form - auto focus |
Bài 2.21: [HTML5] Tạo phần tử form nhập dữ liệu email, số lượng |
Bài 2.22: [HTML5]Tạo phần tử form nhập dữ liệu ngày tháng |
Bài 2.23: Tạo phần tử form select box |
Bài 2.24: Tạo phần tử form radio box |
Bài 2.25: Form nhập dữ liệu checkbox |
Bài 2.26: Phần tử form nhập liệu đoạn văn bản |
Bài 2.27: Phần tử form ẩn - input hidden |
Bài 2.28: Phần tử form submit dữ liệu lên server |
Bài 2.29: Thẻ Div phân chay layout |
Bài 2.30: [HTML 5] Thẻ định nghĩa header, footer |
Bài 2.31: [HTML 5] Thẻ định nghĩa thanh điều hướng - nav |
Bài 2.32: [HTML 5] Thẻ định nghĩa bài viết - article |
Bài 2.33: [HTML 5] Thẻ định nghĩa một nhóm cấu trúc liên quan - Section |
Bài 2.34: [HTML 5] Thẻ định nghĩa thông tin phụ, liên quan - Aside |
Bài 2.35: [HTML 5] Layout website cơ bản bằng html 5 |
Bài 2.36: Bài tập 2: Xây dựng website html nâng cao |
|
Bài 3.1: Giới thiệu css và một số thuộc tính cơ bản |
Bài 3.2: Cú pháp viết code css |
Bài 3.3: 3 Cách kết nối css vào html |
Bài 3.4: Cách comment code Css |
Bài 3.5: Selector toàn cục universal |
Bài 3.6: Selector Element Html |
|
Bài 3.8: Selector theo id |
Bài 3.9: Selector con cháu, hậu duệ |
Bài 3.10: Selector cha con |
Bài 3.11: Selector theo nhóm |
Bài 3.12: Selector theo thuộc tính |
Bài 3.13: Selector hover chuột |
Bài 3.14: Selector before, after |
Bài 3.15: Selector kết hợp - khoanh vùng |
Bài 3.16: Selector định vị trí phần tử con (:fist-child, :last-child, :nth-child) |
Bài 3.17: Selector loại trừ (:not) |
Bài 3.18: Selector phần tử anh chị em liền kề (+) |
Bài 3.19: Selector phần tử đằng sau cùng cấp (~) |
Bài 3.20: Form - Selector :focus |
Bài 3.21: Form - Selector :checked |
Bài 3.22: Thứ tự ưu tiên và cách thăng hạng style css |
Bài 3.23: Bài tập 3: Bài tập luyện css selector |
Phần 4: Bộ thuộc tính Css định dạng text |
Bài 4.1: Thuộc tính hiết lập font chữ text |
Bài 4.2: Thuộc tính thiết lập font size |
Bài 4.3: Thiết lập line height cho text |
Bài 4.4: Thuộc tính căn chỉnh text(trái, phải, giữa, đều) |
Bài 4.5: Thuộc tính quyết định chữ hoa - thường |
Bài 4.6: Thuộc tính thiết lập đậm - nhạt text |
Bài 4.7: Thuộc tính thiết lập in nghiêng text |
Bài 4.8: Thuộc tính thiết lập đường gạch ngang text |
Bài 4.9: Hủy bỏ đường gạch chân cho text |
Bài 4.10: Thuộc tính thiết lập màu sắc cho text |
Bài 4.11: Một số mã màu thường dùng |
Bài 4.12: Bài tập 4: Bài tập tổng hợp luyện css cho text |
Phần 5: Bộ thuộc tính Css định dạng khối |
Bài 5.1: Thuộc tính thiết lập kích thước rộng cao cho khối |
Bài 5.2: Thuộc tính thiết lập màu nền khối |
Bài 5.3: Thuộc tính thiết lập ảnh nền khối |
Bài 5.4: Thuộc tính thiết lập kích thước hình nền khối |
Bài 5.5: Thuộc tính thiết lập chế độ lặp hình nền khối |
Bài 5.6: Thuộc tính thiết lập vị trí hình nền khối |
Bài 5.7: Thuộc tính thiết lập cố định hình nền khi cuộn trang |
Bài 5.8: Thuộc tính background rút gọn |
Bài 5.9: Thuộc tính tạo vùng đệm cho khối |
Bài 5.10: Thuộc tính tạo đường viền cho khối |
Bài 5.11: 2 cách xác định kích thước khối |
Bài 5.12: Thuộc tính tạo lề, tạo khoảng cách 2 khối |
Bài 5.13: Thuộc tính float điều khiển nhiều phần tử trên một hàng |
Bài 5.14: Cách hiển thị danh sách bài viết với float |
Bài 5.15: Thuộc tính clear khắc chế ảnh hưởng float |
Bài 5.16: Thuộc tính ẩn một phần tử html trong website |
Bài 5.17: Thuộc tính hiển thị inline, inline-block |
Bài 5.18: Thuộc tính hiển thị block |
Bài 5.18.2: (Update) Tạo cấu trúc html của layout 2 cột |
Bài 5.18.3: (Update) Sai lầm khi sử dụng height trong website |
Bài 5.19: Bài tập 5: Dựng layout web hai cột với float css |
Bài 5.20: Thuộc tính display flex, hướng hiển thị flex-direction row/column |
Bài 5.21: Thuộc tính quy định xuống dòng flex wrap |
Bài 5.22: Thuộc tính căn chỉnh item theo chiều ngang justify content |
Bài 5.23: Thuộc tính thay đổi vị trí hiển thị order |
Bài 5.24: Thuộc tính quy định kích thước flex basis |
Bài 5.25: Thuộc tính quy định tỉ lệ nở flex grow |
Bài 5.26: Thuộc tính quy định tỉ lệ co flex shrink |
Bài 5.27: Cách viết rút gọn flex-basis, flex-grow, flex-shrink |
Bài 5.28: Thuộc tính căn chỉnh flex item theo phương thẳng đứng |
Bài 5.29: Thay đổi thuộc tính display trên đối tượng |
Bài 5.30: Bài tập 6: Xây dựng layout web 2 cột với flex |
Bài 5.31: Thuộc tính tịnh tiến khối so với vị trí ban đầu |
Bài 5.32: Điều chỉnh vị trí khối con trôi nổi trên một khối cha |
Bài 5.33: Thuộc tính giúp cố định một khối trong layout |
Bài 5.34: Thuộc tính xác định vị trí hiển thị khi xếp chồng layer |
Bài 5.35: Thuộc tính xử lý nội dung tràn khối |
Bài 5.35.2: (Update) Lỗi thường gặp khi sử dụng ul li |
Bài 5.35.3: (Update) Cấu trúc hiển thị thông tin sản phẩm, bài viết theo hàng ngang |
Bài 3.36: Bài tập 7: Hiển thị danh sách sản phẩm |
Phần 6: Các hiệu ứng CSS3 quan trọng |
Bài 6.1: [CSS3] Thuộc tính làm trong suốt khối - opacity |
Bài 6.2: [CSS3] Hiệu ứng làm mềm quá trình thay đổi css - transition |
Bài 6.3: [CSS3] Thuộc tính xoay đối tượng theo một góc cho trước - ratio |
Bài 6.4: [CSS3] Tăng giảm kích thước đối tượng theo tỉ lệ - scale |
Bài 6.5: [CSS3] Hiệu ứng đổ bóng khối - box-shadow |
Bài 6.6: Bài tập 8: Ứng dụng hiệu ứng |
Phần 7: Một số quy tắc quan trọng |
Bài 7.1: Quy tắc đặt tên chuyên nghiệp(file, folder, class, id...) |
Bài 7.2: Cấu trúc thư mục tạo theme |
Bài 7.3: Quy tắc chống sập độ cao khi sử dụng float |
Bài 7.4: Tư duy tạo hệ thống file css dùng chung |
Bài 7.5: Quy tắc chống ảnh tràn khung |
Bài 7.6: Xây dựng định dạng hiển thị chung - reset css |
Bài 7.7: Bài tập 9: Xây dựng hệ thống file thư mục cho dự án |
Phần 8: Một số công cụ, plugins quan trọng |
Bài 8.1: Thêm google font vào website |
Bài 8.2: Thêm icon fontawesome vào website |
Bài 8.3: Thêm slider show vào website |
Bài 8.4: Nhúng fanpage facecbook vào website |
Bài 8.5: Cách nhúng comment facebook vào website |
Bài 8.6: Thay đổi kích thước Comment facebook tương thích đa thiết bị |
Bài 8.7: Nhúng nút like, share facebook vào webiste |
Phần 9: Kỹ năng đọc bản thiết kế Photoshop |
Bài 9.1: Vai trò của Photoshop trong xây dựng giao diện web |
Bài 9.2: Hướng dẫn cài đặt phần mềm Photoshop |
Bài 9.3: Thao tác với file trong Photoshop |
Bài 9.4: Tùy chọn hiển thị các cửa sổ quan trọng(window) |
Bài 9.5: Các tùy chỉnh hiển thị trong Photoshop(view) |
Bài 9.6: Hiển thị thước, lưới căn dòng trong Photoshop |
Bài 9.7: Thay đổi đơn vị trong file thiết kế (Ctrl - K) |
Bài 9.8: Làm việc với Layer và Group |
Bài 9.9: Lấy thông tin của text trên bản thiết kế |
Bài 9.10: Lấy thông tin của khối trên bản thiết kế |
Bài 9.11: Xử lý thiếu fonts trong photoshop |
Bài 9.12: Cách xuất hình ảnh trong bản thiết kế |
Bài 9.13: Xuất hình ảnh trong Photoshop CS6 |
Bài 9.14: Xuất nhiều ảnh một lúc trong bản thiết kế |
Bài 9.15: Xuất icon trong bản thiết kế |
Phần 10: 7 loại layout phổ biến trong website |
Bài 10.1: Yêu cầu thực hành layout 1 |
Bài 10.2: Tạo cấu trúc file, thư mục |
Bài 10.3: Hướng dẫn xây dựng layout 1 |
Bài 10.4: Yêu cầu thực hành layout 2 |
Bài 10.5: Hướng dẫn xây dựng layout 2 |
Bài 10.6: Bài tập xây dựng layout 3 |
Bài 10.7: Hướng dẫn xây dựng layout 3 |
Bài 10.8: Bài tập xây dựng layout 4 |
Bài 10.9: Hướng dẫn xây dựng layout 4 |
Bài 10.10: Bài tập xây dựng layout 5 |
Bài 10.11: Hướng dẫn xây dựng layout 5 |
Bài 10.12: Bài tập xây dựng layout 6 |
Bài 10.13: Hướng dẫn xây dựng layout 6 |
Bài 10.14: Bài tập xây dựng layout 7 |
Bài 10.15: Hướng dẫn xây dựng layout 7 |
Bài 10.16: Tổng kết tối ưu |
Phần 11: Xây dựng dự án UNITOP NEWSPAPER |
Bài 11.1: #01. Tổng quan Project Unitop Newspaper |
Bài 11.2: #02. Lên cấu trúc thư mục dự án |
Bài 11.3: #03. Tách logo - ảnh - icon |
Bài 11.4: #04. Lên ý tưởng layout |
Bài 11.5: #05. Code html - thêm icon fonts, google fonts |
Bài 11.6: #06. Code html - header, menu |
Bài 11.7: #07. Code html - bài viết nổi bật |
Bài 11.8: #08. Code html - content - bài viết mới |
Bài 11.9: #09. Code html - sidebar - quảng cáo, chủ đề nổi bật |
Bài 11.10: #10. Code html - footer, copyright |
Bài 11.11: #11. Code css - tổng quan body + container |
Bài 11.12: #12. Code css - tổng quan header, form search |
Bài 11.13: #13. Code css - main menu |
Bài 11.14: #14. Code css - tiêu đề khối bài viết nổi bật |
Bài 11.15: #15. Code css - danh sách bài viết nổi bật |
Bài 11.16: #16. Code css - khối bài viết mới |
Bài 11.17: #17. Code css - quảng cáo sidebar |
Bài 11.18: #18. Code css - khối chủ đề nổi bật |
Bài 11.19: #19. Code css - khối footer |
Bài 11.20: #20. Code css - khối copyright |
Bài 11.21: #21. Check chuẩn code W3C và tối ưu |
