Học HTML/CSS 21 ngày - Từ không biết gì đến thiết kế giao diện website chuyên nghiệp

Giới thiệu về khoá học

Khoá học giúp bạn thiết kế giao diện website chuyên nghiệp bằng HTML/CSS chỉ trong vòng 15 ngày. Sau khoá học bạn có thể tự tin cắt HTML/CSS từ file photoshop một cách hoàn chỉnh và tối ưu nhất. Ngoài ra khoá học cũng hướng dẫn các bạn cách tạo ra 1 thiết kế website chuyên nghiệp và hiện đại

Bạn nhận được gì

  • 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...

Ai là người phù hợp với chương trình này

  • 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

Tại sao bạn cần tham gia chương trình này?

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.  

Chế độ hỗ trợ đặc biệt

  • Khi là thành viên của chương trình bạn được đưa vào Group chat giúp hỏi đáp thông qua Facebook Messenger 24/24 - bất kỳ lúc nào - không có ngày nghỉ. 
  • Bạn được thêm vào nhóm Kín facebook ở đó bạn được reviews bài tập và học hỏi trao đổi với cộng đồng những người đang tham gia chương trình.
  • Bạn được Hỗ trợ trực tiếp trên máy tính bạn khi gặp khó khăn. Cụ thể bạn được hỗ trợ qua phần mềm điều khiển máy tính từ xa Utraview. Bạn ngồi nhìn màn hình và quan sát hỗ trợ ngay trên máy tính của mình.
  • Các bài học bạn xem một lần chưa hiểu có thể xem đi xem lại nhiều lần

Điều kiện tham gia chương trình

  • 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 khoá học

  • Phần 1: Khởi động (11 bài)

    • Bài 1.1: Giới thiệu 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 hiệu quả trên codecamp

    • 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 (37 bài)

    • 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

  • 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

    • 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.7: Selector Class

    • 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 (12 bài)

    • 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 (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

    • 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 (6 bài)

    • 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 (7 bài)

    • 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 (7 bài)

    • 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 (15 bài)

    • 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 (16 bài)

    • 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 CODECAMP NEWSPAPER (21 bài)

    • Bài 11.1: #01. Tổng quan Project Codecamp 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

 

Học viên đánh giá về khoá học (0)

0.0 /5
Đưa ra xếp hạng và đánh giá