Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
IT & Software
Other IT & Software
Front End Web Development
Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

Loại khoá học: Other IT & Software

Bạn sẽ làm chủ kỹ năng xây dựng giao diện đẹp mắt, chuyên nghiệp và tạo thu nhập ngay cả khi bạn là người mới bắt đầu

image
50.000 VND
65 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

Chào mừng bạn đến với khóa học HTML CSS 21, nơi bạn sẽ khám phá và phát triển kỹ năng xây dựng giao diện website với Html Css từ những viên gạch đầu tiên.

Bạn có muốn trở thành một lập trình viên web thành công? Khóa học này sẽ là điểm bắt đầu hoàn hảo cho bạn. Với sự hướng dẫn chi tiết và dễ hiểu, bạn sẽ dần dần tiếp cận và hiểu rõ hơn về cách làm thế nào để tạo ra những giao diện website đẹp và chuyên nghiệp.

Một trong những thách thức lớn nhất mà người mới học lập trình web thường gặp phải là sự rối rắm và không biết bắt đầu từ đâu. Khóa học này sẽ giúp bạn vượt qua rào cản đó bằng cách tổ chức các bước học một cách có tổ chức và hiệu quả, giúp bạn tiết kiệm thời gian và tập trung vào những điều quan trọng nhất.

Với thời gian chỉ 21 ngày, bạn sẽ được dẫn dắt qua từng bước cơ bản đến nâng cao của HTML và CSS. Và không chỉ dừng lại ở việc học lý thuyết, mà bạn còn được thực hành trên các bài tập thực tế và được review kỹ lưỡng để nhận biết và sửa chữa những lỗi phổ biến nhất khi xây dựng giao diện từ các bản thiết kế Photoshop.

Tính linh hoạt của khóa học cho phép bạn học bất cứ khi nào và ở đâu bạn muốn, chỉ cần có máy tính và kết nối internet. Điều này giúp bạn tận dụng được mọi khoảng thời gian trống rảnh của mình mà không cần phải theo đuổi một lịch trình cố định.

Và đặc biệt hơn, trong suốt quãng thời gian học, bạn sẽ được hỗ trợ trực tiếp từ anh Phan Văn Cương, CEO của Unitop. Sự kết hợp giữa sự nỗ lực của bản thân và sự hướng dẫn chuyên nghiệp sẽ giúp bạn tiến bộ nhanh chóng hơn bao giờ hết.

Hãy bắt đầu hành trình của bạn ngay hôm nay và trở thành một chuyên gia về HTML và CSS để chuẩn bị cho tương lai sáng lạng trong lĩnh vực lập trình web!

Bạn sẽ học được gì

Nắm được lý thuyết gốc Html, Css trong xây dựng giao diện website chuyên nghiệp.

Cài đặt tư duy để sử dụng html và css tối ưu ở cấp độ cao

Quy trình triển khai xây dựng dự án thực tế từ bản thiết kế Photoshop, Figma

Bạn được đồng hành hỗ trợ hỏi đáp vướng mắc trong quá trình học

Các bài thực hành được reviews góp ý lỗi sai, giúp bạn tối ưu

Yêu cầu

  • Khóa học phù hợp ngay cả với người mới bắt đầu. Bạn 16 tuổi hay những anh chị 45 tuổi đều có thể học và làm tốt.
  • Bạn chỉ cần máy tính nối mạng và một góc học tập yên tĩnh và học từng bước theo bài giảng và nâng cấp kỹ năng của mình.

Nội dung khoá học

11 sections

Khởi động

12 lectures
Giới thiệu Phan Văn Cương và tổng quan chương trình
10:02
Cách tham gia 2 nhóm kín hỗ trợ 24/7
03:40
Đây là ưu đặc quyền đặc biệt
01:01
5 bước học online hiệu quả trên unitop
04:47
Những thiết bị/vật dụng cần chuyển bị
03:16
Cách thiết lập mục tiêu - Xác định ngày hoàn thành khóa học
06:02
Lên bản kế hoạch học tập của bản thân
05:18
Cài đặt và sử dụng server ảo phục vụ code web
06:16
Cặt đặt trình soạn thảo code chuyên nghiệp
02:53
Chạy test dự án lên server localhost
06:38
Cấu trúc file, thư mục khóa học
04:43
Cách chạy dự án với Live Server trên Visual Studio Code
08:59

Bộ thẻ Html cốt lõi xây dựng khung website

37 lectures
Cấu trúc html của website
14:58
Cách chú thích dòng, đoạn code trong html
10:23
Thẻ định nghĩa tiêu đề trong website
06:42
Thẻ định nghĩa đoạn văn bản trong website
03:58
Tạo văn bản demo tiện lợi lorem ipsum
04:03
Thẻ xuống dòng trong website
03:32
Thẻ thêm hình ảnh vào website
08:49
Các loại đường dẫn trong website
15:28
Tạo liên kết các trang trong website(link)
12:03
Tạo mục lục bài viết trong html
10:31
Thẻ In nghiêng, in đậm, in gạch chân text
03:56
Xây dựng file html làm trang chủ tự động quy cập
06:15
Lỗi khi sử dụng link trong bài viết, sản phẩm
04:48
Thực hành xây dựng website tin tức cơ bản
05:02
Thẻ định nghĩa danh sách không có thứ tự
06:59
Thẻ định nghĩa danh sách có thứ tự
06:42
Thẻ hiển thị thông tin phụ(số lượng, mô tả phụ)
05:46
Thẻ định dạng gạch ngang text (giá cũ)
02:52
Hiển thị thông tin dạng bảng trong website
12:15
Form nhập dữ liệu text, password
07:57
Tạo tiêu đề phần tử form - auto focus
05:33
Tạo phần tử form nhập dữ liệu email, số lượng
05:55
[HTML5] Tạo phần tử form nhập dữ liệu ngày tháng
03:30
Tạo phần tử form select box
04:30
Tạo phần tử form radio box
04:30
Form nhập dữ liệu checkbox
04:58
Phần tử form nhập liệu đoạn văn bản
04:28
Phần tử form ẩn - input hidden
04:59
Phần tử form submit dữ liệu lên server
07:45
Thẻ Div phân chia layout
05:26
[HTML 5] Thẻ định nghĩa header, footer
03:38
[HTML 5] Thẻ định nghĩa thanh điều hướng - nav
02:56
[HTML 5] Thẻ định nghĩa bài viết - article
03:16
[HTML 5] Thẻ định nghĩa một nhóm cấu trúc liên quan - Section
05:14
[HTML 5] Thẻ định nghĩa thông tin phụ, liên quan - Aside
02:08
[HTML 5] Layout website cơ bản bằng html 5
07:26
Bài tập 2: Xây dựng website html nâng cao
05:32

Nhập môn Css

23 lectures
Giới thiệu css và một số thuộc tính cơ bản
12:59
Cú pháp viết code css
07:57
3 Cách kết nối css vào html
09:19
Cách comment code Css
06:05
Selector toàn cục universal
07:12
Selector Element Html
06:16
Selector Class
09:43
Selector theo id
09:10
Selector con cháu, hậu duệ
08:57
Selector cha con
06:35
Selector theo nhóm
04:12
Selector theo thuộc tính
10:03
Selector hover chuột
08:59
Selector before, after
10:01
Selector kết hợp - khoanh vùng
06:25
Selector định vị trí phần tử con (:fist-child, :last-child, :nth-child)
10:26
Selector loại trừ (:not)
08:33
Selector phần tử anh chị em liền kề (+)
04:52
Selector phần tử đằng sau cùng cấp (~)
03:18
Form - Selector :focus
04:13
Form - Selector :checked
02:51
Thứ tự ưu tiên và cách thăng hạng style css
08:38
Bài tập 3: Bài tập luyện css selector
03:22

Bộ thuộc tính Css định dạng text

12 lectures
Thuộc tính hiết lập font chữ text
09:38
Thuộc tính thiết lập font size
13:35
Thiết lập line height cho text
09:21
Thuộc tính căn chỉnh text(trái, phải, giữa, đều)
07:42
Thuộc tính quyết định chữ hoa - thường
08:20
Thuộc tính thiết lập đậm - nhạt text
07:52
Thuộc tính thiết lập in nghiêng text
02:57
Thuộc tính thiết lập đường gạch ngang text
10:17
Hủy bỏ đường gạch chân cho text
02:59
Thuộc tính thiết lập màu sắc cho text
06:14
Một số mã màu thường dùng
03:13
Bài tập 4: Bài tập tổng hợp luyện css cho text
03:59

Bộ thuộc tính Css định dạng khối

40 lectures
Thuộc tính thiết lập kích thước rộng cao cho khối
07:23
Thuộc tính thiết lập màu nền khối
08:19
Thuộc tính thiết lập ảnh nền khối
06:22
Thuộc tính thiết lập kích thước hình nền khối
07:23
Thuộc tính thiết lập chế độ lặp hình nền khối
07:35
Thuộc tính thiết lập vị trí hình nền khối
07:38
Thuộc tính thiết lập cố định hình nền khi cuộn trang
08:25
Thuộc tính background rút gọn
04:18
Thuộc tính tạo vùng đệm cho khối
14:53
Thuộc tính tạo đường viền cho khối
11:15
2 cách xác định kích thước khối
08:14
Thuộc tính tạo lề, tạo khoảng cách 2 khối
06:37
Thuộc tính float điều khiển nhiều phần tử trên một hàng
11:30
Cách hiển thị danh sách bài viết với float
07:31
Thuộc tính clear khắc chế ảnh hưởng float
06:00
Thuộc tính ẩn một phần tử html trong website
06:46
Thuộc tính hiển thị inline, inline-block
09:05
Thuộc tính hiển thị block
10:15
Tạo cấu trúc html của layout 2 cột
07:16
Sai lầm khi sử dụng height trong website
09:29
Bài tập 5: Dựng layout web hai cột với float css
04:07
Thuộc tính display flex, hướng hiển thị flex-direction row/column
08:50
Thuộc tính quy định xuống dòng flex wrap
06:09
Thuộc tính căn chỉnh item theo chiều ngang justify content
07:02
Thuộc tính thay đổi vị trí hiển thị order
09:38
Thuộc tính quy định kích thước flex basis
06:16
Thuộc tính quy định tỉ lệ nở flex grow
04:26
Thuộc tính quy định tỉ lệ co flex shrink
05:03
Cách viết rút gọn flex-basis, flex-grow, flex-shrink
04:28
Thuộc tính căn chỉnh flex item theo phương thẳng đứng
04:08
Thay đổi thuộc tính display trên đối tượng
04:31
Bài tập 6: Xây dựng layout web 2 cột với flex
02:35
Thuộc tính tịnh tiến khối so với vị trí ban đầu
06:03
Điều chỉnh vị trí khối con trôi nổi trên một khối cha
08:45
Thuộc tính giúp cố định một khối trong layout
07:27
Thuộc tính xác định vị trí hiển thị khi xếp chồng layer
07:12
Thuộc tính xử lý nội dung tràn khối
06:21
Lỗi thường gặp khi sử dụng ul li
05:49
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 tập 7: Hiển thị danh sách sản phẩm
08:15

Các hiệu ứng CSS3 quan trọng

6 lectures
[CSS3] Thuộc tính làm trong suốt khối - opacity
05:19
[CSS3] Hiệu ứng làm mềm quá trình thay đổi css - transition
08:01
[CSS3] Thuộc tính xoay đối tượng theo một góc cho trước - ratio
05:34
[CSS3] Tăng giảm kích thước đối tượng theo tỉ lệ - scale
06:57
[CSS3] Hiệu ứng đổ bóng khối - box-shadow
05:36
Bài tập 8: Tạo hiệu ứng danh sách sản phẩm
03:04

Phần 7: Một số quy tắc quan trọng

7 lectures
Quy tắc đặt tên chuyên nghiệp(file, folder, class, id...)
08:33
Cấu trúc thư mục tạo theme
04:02
Quy tắc chống sập độ cao khi sử dụng float
10:15
Tư duy tạo hệ thống file css dùng chung
07:57
Quy tắc chống ảnh tràn khung
08:14
Xây dựng định dạng hiển thị chung - reset css
08:32
Bài tập 9: Xây dựng hệ thống file thư mục cho dự án
01:18

Một số công cụ, plugins quan trọng

7 lectures
Thêm google font vào website
12:06
Thêm icon fontawesome vào website
19:16
Thêm slider show vào website
13:40
Nhúng fanpage facecbook vào website
07:02
Cách nhúng comment facebook vào website
04:00
Thay đổi kích thước Comment facebook tương thích đa thiết bị
01:59
Nhúng nút like, share facebook vào webiste
03:12

Kỹ năng đọc bản thiết kế Photoshop

15 lectures
Vai trò của Photoshop trong xây dựng giao diện web
04:48
Hướng dẫn cài đặt phần mềm Photoshop
04:04
Thao tác với file trong Photoshop
07:23
Tùy chọn hiển thị các cửa sổ quan trọng(window)
02:51
Các tùy chỉnh hiển thị trong Photoshop(view)
02:14
Hiển thị thước, lưới căn dòng trong Photoshop
01:53
Thay đổi đơn vị trong file thiết kế (Ctrl - K)
02:13
Làm việc với Layer và Group
02:46
Lấy thông tin của text trên bản thiết kế
03:41
Lấy thông tin của khối trên bản thiết kế
03:42
Xử lý thiếu fonts trong photoshop
04:09
Cách xuất hình ảnh trong bản thiết kế
03:50
Xuất hình ảnh trong Photoshop CS6
14:12
Xuất nhiều ảnh một lúc trong bản thiết kế
03:34
Xuất icon trong bản thiết kế
02:36

7 loại layout phổ biến trong website

16 lectures
Yêu cầu thực hành layout 1
07:12
Tạo cấu trúc file, thư mục
05:03
Hướng dẫn xây dựng layout 1
06:57
Yêu cầu thực hành layout 2
01:41
Hướng dẫn xây dựng layout 2
02:56
Bài tập xây dựng layout 3
01:42
Hướng dẫn xây dựng layout 3
02:14
Bài tập xây dựng layout 4
00:58
Hướng dẫn xây dựng layout 4
01:28
Bài tập xây dựng layout 5
01:18
Hướng dẫn xây dựng layout 5
01:17
Bài tập xây dựng layout 6
00:48
Hướng dẫn xây dựng layout 6
00:47
Bài tập xây dựng layout 7
01:52
Hướng dẫn xây dựng layout 7
02:56
Tổng kết tối ưu
05:33

Xây dựng dự án UNITOP NEWSPAPER

21 lectures
#01. Tổng quan Project Unitop Newspaper
06:49
#02. Lên cấu trúc thư mục dự án
04:46
#03. Tách logo - ảnh - icon
07:57
#04. Lên ý tưởng layout
07:40
#05. Code html - thêm icon fonts, google fonts
04:19
#06. Code html - header, menu
07:12
#07. Code html - bài viết nổi bật
06:56
#08. Code html - content - bài viết mới
09:40
#09. Code html - sidebar - quảng cáo, chủ đề nổi bật
07:23
#10. Code html - footer, copyright
11:02
#11. Code css - tổng quan body + container
10:26
#12. Code css - tổng quan header, form search
14:37
#13. Code css - main menu
13:36
#14. Code css - tiêu đề khối bài viết nổi bật
06:42
#15. Code css - danh sách bài viết nổi bật
13:09
#16. Code css - khối bài viết mới
23:08
#17. Code css - quảng cáo sidebar
03:21
#18. Code css - khối chủ đề nổi bật
10:12
#19. Code css - khối footer
19:54
#20. Code css - khối copyright
12:02
#21. Check chuẩn code W3C và tối ưu
04:43

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Complete Ruby Programmer - Master Ruby

Complete Ruby Programmer - Master Ruby

1.099.000 VND
50.000 VND
Visual Studio Code for Developers 2023: Beginner to Advanced

Visual Studio Code for Developers 2023: Beginner to Advanced

1.499.000 VND
50.000 VND
The Complete JavaScript Course 2024: From Zero to Expert!

The Complete JavaScript Course 2024: From Zero to Expert!

185 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
SQL for Data Analysis: Beginner MySQL Business Intelligence

SQL for Data Analysis: Beginner MySQL Business Intelligence

1.899.000 VND
50.000 VND
Build Solutions with Power Apps, Power Automate & SharePoint

Build Solutions with Power Apps, Power Automate & SharePoint

100 VND
50.000 VND
Unity 2023 Game Development : Build 6 Games with Unity & C#

Unity 2023 Game Development : Build 6 Games with Unity & C#

79 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Unit Testing for Typescript & NodeJs Developers with Jest

Unit Testing for Typescript & NodeJs Developers with Jest

100 VND
50.000 VND
Create an eCommerce Website Using Laravel (PHP & MySQL)

Create an eCommerce Website Using Laravel (PHP & MySQL)

1.049.000 VND
50.000 VND
The Freelance Stack: A real project with NextJS13 and Strapi

The Freelance Stack: A real project with NextJS13 and Strapi

50.000 VND
Time Series Analysis, Forecasting, and Machine Learning

Time Series Analysis, Forecasting, and Machine Learning

90 VND
50.000 VND
MongoDB with Java Spring Boot & Spring Framework

MongoDB with Java Spring Boot & Spring Framework

1.099.000 VND
50.000 VND
Build REST APIs with Django REST Framework and Python

Build REST APIs with Django REST Framework and Python

1.899.000 VND
50.000 VND
Svelte.js - The Complete Guide (incl. Sapper.js)

Svelte.js - The Complete Guide (incl. Sapper.js)

65 VND
50.000 VND
The Complete Cloud Computing Software Architecture Patterns

The Complete Cloud Computing Software Architecture Patterns

100 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi