Chia sẻ khóa học Html Css trong 21 Ngày - Thành thạo xây dựng giao diện web thực tế từ bản thiết kế Photoshop trên unitop

Click chuột lên hình để phóng to

Chia sẻ khóa học Html Css trong 21 Ngày - Thành thạo xây dựng giao diện web thực tế từ bản thiết kế Photoshop trên unitop

Mã sản phẩm: 4572181333991103536

Giới thiệu khóa học Xin chào các bạn, hôm nay Ngocvutheme xin giới thiêu khóa học Hướng dẫn thành thạo xây dựng giao diện web thực tế ...

Số lượng:

Thông tin chi tiết

Giới thiệu khóa học
Xin chào các bạn, hôm nay Ngocvutheme xin giới thiêu khóa học Hướng dẫn thành thạo xây dựng giao diện web thực tế từ bản thiết kế Photoshop với html css chỉ trong 21 ngày.
Đây là bộ khóa học lập trình online giúp các bạn thành thạo việc xây dựng web với các công cụ hỗ trợ cần thiết như html, css, photoshop,... trên unitop.vn
Khóa học này dành cho :
Bạn là sinh viên đang muốn học Xây dựng giao diện web để đi theo nghề lập trình sau khi ra trường
Bạn là người tự học html css trên google, youtube mất định hướng muốn học tập trung để đi làm trong vài tháng tới
Bạn là người đã đi làm Backend và muốn học Front end để đi theo hướng Full Stack
Bạn là dân Marketing muốn có thêm kiến thức để tự làm nên các Langding page để phát triển bán hàng
Bạn là người đi làm trái ngành muốn bắt đầu học thêm web để kiếm thêm thu nhập
Khóa học này sẽ giúp bạn:
Xây dựng giao diện website với HTML, CSS là kỹ năng mà bất kỳ ai muốn đi theo nghề lập trình web đều cần phải có. Một điều khó khăn mà hầu hết người mới học lập trình web gặp phải là có quá nhiều thứ cần học không biết học cái gì trước, cái gì sau để có thể đi làm, dẫn đến mất nhiều thời gian, ra trường nhiều người thất nghiệp.
Trước vấn đề đó chương trình HTML CSS 21 này được tạo ra giúp bạn có thể hoàn thiện kỹ năng xây dựng giao diện website thực tế chỉ sau 21 ngày nếu bạn thực sự nỗ lực và làm theo hướng dẫn. 21 ngày là con số không quá dài nhưng nếu bạn kiên trì sẽ hoàn thành mục tiêu.
Khi bạn tham gia chương trình, bạn có quyền lợi được truy cập vào chương trình học bất kỳ lúc nào bạn có thời gian. Bạn có thể học bất kỳ đâu ví dụ như ở nhà trọ, thư viện, quán cafe... bất kỳ nơi nào có máy tính và mạng internet.
Tất cả các bài tập, bài thực hành bạn được reviews tỉ mĩ để giúp bạn nhận ra những lỗi sai "chết người" khi xây dựng giao diện website từ bản thiết kế Photoshop.
Bạn nhận được từ khóa học:
Nắm được lý thuyết gốc Html, Css trong xây dựng giao diện web
Bài học từng bước từ cơ bản đến nâng cao xen kẽ Lý thuyết và thực hành thực tế
Bạn được chia sẻ những kinh nghiệm code html, css nhanh và chuyên nghiệp
Bạn được kèm cặp qua nhóm chat hỏi đáp thắc mắc trong quá trình học và nhóm kín reviews bài tập/đồ án
Bạn được reviews bài tập, bài đồ án để nhận ra những điểm yếu của mình và tối ưu
Bài học bạn có thể xem đi xem lại nhiều lần, xem đến khi nào hiểu thì thôi
Cuối khóa bạn có đồ án chất lượng để tham gia tuyển dụng
Còn rất nhiều chia sẻ cách học tập, kinh nghiệp kiếm việc làm...
YÊU CẦU KHI THAM GIA:
Bạn không cần có kiến thức nền tảng, chỉ cần có máy tính nối mạng
Bạn có thời gian ít nhất 2h mỗi ngày để tập trung học tập và rèn luyện
Bạn có quyết tâm mục tiêu rõ ràng
Bạn cam kết học theo hướng dẫn để đạt hiệu quả tối đa

Nội dung khóa học

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

Chia sẻ khóa học Html Css trong 21 Ngày - Thành thạo xây dựng giao diện web thực tế từ bản thiết kế Photoshop trên unitop

Xem thêm Thu gọn