Chào mừng đến với Chiến Binh Full Stack
  • HTML & CSS
    Địa điểm

    Hồ Chí Minh

  • 9 buổi

    2 giờ mỗi buổi

  • 1.595 Đánh giá
    ★ ★ ★ ★ ★

HTML & CSS

Thiết kế giao diện website với HTML & CSS. Nắm vững kiến thức, sử dụng HTML để cấu trúc layout và sử dụng CSS để định dạng trang web.

Tại sao nên học HTML & CSS?

Theo thống kê của Stack Overflow vào năm 2018 thì HTML, CSS cùng với Javascript đang thống trị bảng xếp hạng về độ phổ biến. Nhiều người nghĩ rằng học HTML & CSS chỉ để làm web nhưng thực tế không phải vậy. Giờ đây với kiến thức HTML & CSS, bạn có thể làm được gần như tất cả mọi thứ từ website, ứng dụng di động và thậm chí cả ứng dụng desktop.

HTML & CSS là sự khởi đầu bởi chúng là bộ đôi ngôn ngữ cần thiết cho mọi web developer. Khi bạn theo học lập trình web thì HTML & CSS luôn là hai ngôn ngữ mà bạn phải học đầu tiên.

HTML & CSS đóng vai trò rất quan trọng bởi chúng là phần tương tác trực tiếp với người dùng. Giao diện có trực quan, bắt mắt, thân thiện và tương thích trên mọi thiết bị hay không là do HTML & CSS quyết định. Dù bạn đang muốn xây dựng một trang web đơn giản hay phức tạp đều không thể thiếu chúng.

Nhiệm vụ của HTML & CSS

Có thể hiểu đơn giản về nhiệm vụ riêng biệt của HTML & CSS theo ví dụ sau:
  • Nếu bạn đang xây một ngôi nhà thì HTML giống như cát, xi măng, đá... còn CSS là kỹ năng của các thợ xây để biến ngôi nhà trở nên đẹp lộng lẫy với nhiều hoa văn, màu sắc...
  • HTML tạo nên khung sườn còn CSS là lớp bên ngoài trang trí để tạo nên một sản phẩm hoàn hảo.

Ưu điểm của khoá học

  • Dành cho người mới bắt đầu, kể cả chưa biết gì về lập trình hoặc cho những bạn muốn ôn lại kiến thức căn bản về lập trình web. Những bạn muốn làm về SEO cũng cần học HTML & CSS để để có kiến thức nền tảng, hỗ trợ đắc lực trong việc tối ưu đúng chuẩn SEO.
  • Dễ học, thực hành thực tế chứ không chỉ lý thuyết suông. Đặc biệt, có các lưu ý quan trọng từ kinh nghiệm làm việc nhiều năm của các giảng viên.
  • Không yêu cầu cao về máy móc hay phần mềm đi kèm.
  • Bài giảng luôn được cập nhập theo các phiên bản mới và ổn định nhất của các ngôn ngữ.
  • Nắm được các quy tắc thiết kế website theo chuẩn SEO, tối ưu hóa cho các công cụ tìm kiếm.
  • Thiết kế được website đạt chuẩn responsive, hoạt động hoàn hảo trên mọi thiết bị thông dụng.
  • Học 1 lần, được hỗ trợ suốt đời.

Mục tiêu khóa học

  • Giúp hiểu rõ cách hoạt động của hệ thống web.
  • Phát triển kỹ năng lập trình cho phép chỉnh sửa các website, tự code các website bằng HTML & CSS mà không sử dụng bất kỳ framework nào.
  • Tạo được các thành phần web bằng HTML & CSS như: menu, button, nhúng chat.
  • Nắm vững quy trình thiết kế giao diện website, biết cách phân tích và dựng layout.
  • Trình diễn, tạo các hiệu ứng cho trang web thêm phần sinh động.
  • Học cách thiết kế được nhiều loại website khác nhau như: one page, portfolio, gallery...
  • Chỉnh sửa lại những giao diện có sẵn theo ý mình.
  • Tối ưu hóa về thiết kế và định dạng cho trang web.
  • Thiết kế những giao diện cầu kỳ với layout phức tạp.
  • Hiểu và sử dụng thành thạo các thẻ HTML thông dụng nhất.
  • Biết giới hạn của HTML & CSS, biết được HTML & CSS có thể làm được những gì và không thể làm được những gì.

Kết thúc khoá học bạn có thể làm gì?

  • Làm front-end developer tại các công ty chuyên thiết kế website.
  • Xin việc tại các công ty chuyên thiết kế theme cho website.
  • Làm freelance: fix bug HTML, CSS tối ưu hóa trang web sẵn có hoặc tự làm theme để bán.
  • Làm admin viết bài, chỉnh sửa bài viết cho website của các công ty, tổ chức...
  • Có nền tảng cơ bản để tiếp tục học các khoá lập trình chuyên sâu hơn.

Tổng quan, định hướng và chuẩn bị

Website là gì? Tương lai nghề lập trình web sẽ như thế nào? Có gì khác nhau giữa các giao thức HTTP, HTTPS hay FTP? Thế nào là domain, hosting, VPS, server... và khi nào thì cần chúng? Cần lưu ý gì với các browser...
HTML & CSS có thể làm được những gì? Làm cách nào để xin được việc hoặc trở thành freelancer ngay sau khi hoàn tất khoá học HTML & CSS?
Cần có những kiến thức gì trước khi bắt đầu học? Nên sử dụng những công cụ nào để việc học và làm thuận tiện hơn bao giờ hết? Làm cách nào để tạo "sổ tay lập trình vĩnh cửu" ghi chép lại đẩy đủ mọi kiến thức học được, dễ dàng xem lại khi cần và không bao giờ sợ quên kiến thức?

Bài tập 1: Ứng dụng HTML đầu tiên

Có phải mọi website dù lớn hay nhỏ đều có cấu trúc HTML chung? Làm sao để bố trí code ngắn gọn, sạch sẽ và hạn chế tối đa các lỗi về syntax? Những công cụ nào hỗ trợ real-time để có thể vừa code vừa xem ngay kết quả mà không cần phải chờ đợi?
Những thẻ HTML nào được sử dụng thường xuyên nhất? Làm sao để học ít nhưng làm được nhiều? "Bí kíp" đặc biệt nào giúp bạn chỉ cần nhớ vài thẻ HTML là có thể triển khai được mọi loại website?
Trong các phương pháp nhúng CSS vào HTML thì phương pháp nào là tối ưu nhất? Những trường hợp cụ thể nào phù hợp với từng phương pháp nhúng CSS đặc thù?
Có những phương pháp thiết kế layout nào? Trong đó phương pháp nào là tốt nhất và có thể áp dụng trong mọi tình huống? Một website đầy đủ sẽ bao gồm những thành phần nào? Block khác với inline chỗ nào? Khi nào dùng float và khi nào thì dùng position?

Bài tập 2: Thiết kế website thông tin doanh nghiệp và website tin tức / blog

Làm thế nào để tận dụng background một cách hiệu quả nhất? Làm sao để biến background-image từ có giới hạn trở thành vô hạn?
Khi nào nên sử dụng ul hoặc ol? Tại sao khi làm menu thì ul luôn là lựa chọn hàng đầu? Làm thế nào để tuỳ chỉnh thiết kế của ul và ol, nâng tính thẫm mỹ của website lên tầm cao mới?
Ngoài tác đụng để phân cách các thành phần thì còn có thể sử dụng border trong những tình huống nào? Tại sao website của tôi trở nên rối mắt khi sử dụng border?
Làm thế nào để rút gọn code nhằm tăng tốc website? Cách nào để quản lý code giúp cho việc hiệu chỉnh và nâng cấp sau này trở nên dễ dàng?

Bài tập 3: Thiết kế website bán hàng

Thiết kế background chồng background như thế nào để tạo nên những layout "độc nhất vô nhị"? Làm sao để biến website trở thành tác phẩm nghệ thuật thực thụ?
Làm sao để tạo được các hiệu ứng 3D đánh lừa thị giác của người dùng?
Transition, opacity, transform, overflow, box shadow... là gì? Làm thế nào để tạo các animation nhằm thu hút sự chú ý của khách hàng vào những nội dung quan trọng?
Làm cách nào phối hợp font chữ và màu sắc hợp lý nhất nhằm biến website trở nên uyển chuyến và đẹp mê hồn? Lúc nào nên sử dụng các font biểu tượng giúp website trở nên hiện đại và dễ hiểu hơn?

Bài tập 4: Thiết kế website responsive hoạt động hoàn hảo trên mọi thiết bị

Tại sao phải thiết kế website responsive? So với việc thiết kế nhiều phiên bản website cho riêng từng thiết bị thì responsive có những ưu / nhược điểm gì? Nếu có các ưu tiên đặc biệt cho các thiết bị thì nên ưu tiên cho thiết bị nào và trong những trường hợp nào?
Viewport, grid, meda query là gì? Sử dụng chúng trong những tình huống nào? Tạo sao khi thiết kế website responsive nên thiết kế cho các thiết bị di động trước?
Có nên sử dụng CSS framework? Thời điểm nào tôi có thể bắt đầu sử dụng CSS framework? Phải chăng cứ dùng lại những cái đã có sẵn là tiện lợi & nhanh chóng?
Thế nào là "chuẩn SEO"? Tại sao cần thiết kế webiste chuẩn SEO? Những điểm quan trọng cần lưu ý trong quá trình thiết kế để website đạt chuẩn SEO là gì?

Bài kiểm tra cuối khoá: Thiết kế trọn bộ giao diện hoàn chỉnh theo yêu cầu

Xây dựng bộ giao diện website xem phim online tham khảo từ các website như phimmoi.net, hdviet.com, fptplay.vn...
Thiết kế ứng dụng web phục vụ cho việc giao lưu, kết bạn, hẹn hò. Tham khảo các mạng xã hội nổi tiếng nhất hiện nay như facebook.com, ymeet.me, badoo.com...
Tham khảo các sàn giao dịch thương mại điện tử như lazada.vn, tiki.vn, shopee.vn... để thiết kế nên bộ website thương mại điện tử hoàn hảo.
Website tin tức trực tuyến hay còn gọi là báo điện tử / báo mạng là các website cập nhật những tin tức nóng hổi mỗi ngày. Một số website có thể tham khảo là: dkn.tv, vnexpress.net, kenh14.vn...
Mặc dù thời hoàng kim của các diễn đàn đã qua đi, nhường chỗ cho các mạng xã hội lên ngôi nhưng diễn đàn vẫn là một trong những hình thức chia sẻ và tổng hợp kiến thức vô cùng hữu ích. Các diễn đàn có thể tham khảo gồm: tinhte.vn, voz.vn...
Website bán các khoá học online hoặc tổ chức giảng dạy online đang là xu thế ở thời đại mới. Có thể tham khảo các website như udemy.com, kyna.vn... để triển khai thiết kế bộ giao diện này.
Mỗi dự án bất động sản đều có các thông tin rất chi tiết từ chủ đầu tư nhằm cung cấp cho khách hàng cái nhìn tổng thể về dự án, từ đó đưa ra quyết định mua để ở hoặc đầu tư. Với giao diện này có thể triển khai theo kiểu landing-page hoặc cũng có thể triển khai trọn bộ giao diện như các dự án khác.
Ngoài những kiểu website thông dụng thì vẫn tồn tại những dạng website đặc thù bám sát theo yêu cầu cụ thể của khách hàng. Với những dự án này, trước khi triển khai học viên sẽ được cung cấp bảng đặc tả có đầy đủ mọi thông tin về dự án.

Ngày khai giảng Lịch học Ca học
01/04/2024 3 buổi/tuần Sáng/Chiều/Tối
06/05/2024 3 buổi/tuần Sáng/Chiều/Tối
03/06/2024 3 buổi/tuần Sáng/Chiều/Tối
01/07/2024 3 buổi/tuần Sáng/Chiều/Tối
05/08/2024 3 buổi/tuần Sáng/Chiều/Tối
02/09/2024 3 buổi/tuần Sáng/Chiều/Tối