/frontend-roadmap

Lộ trình học lập trình FrontEnd

Frontend Roadmap

Lộ trình học lập trình Frontend

Mục tiêu lộ trình

  • Hoàn thành lộ trình

Buổi 01

  • Định hướng, giới thiệu nội dung và phương pháp học tập
  • GIT & Github trong quản lý mã nguồn
  • Cách sử dụng Hosting
  • Các bài tập tự luyện về định dạng HTML, HTML5 và CSS.

Buổi 02

  • Các kỹ thuật phân rã layout và dàn trang trong Website.
  • Thực hành với các mẫu giao diện mới.
  • Nắm rõ các thủ thuật và tránh các tư duy sai lầm khi phân rã layout.

Buổi 03

  • Các Selector quan trọng của CSS và CSS3.
  • Áp dụng thực hành với các hiệu ứng động (animation) như xoay, trượt, thu phóng, làm mờ, dịch chuyển phần tử, ... bằng CSS và CSS3

Buổi 04

  • Cải tiến Menu đa cấp với nhiều loại hiệu ứng khác nhau.
  • Website Responsive và thực hành với các giao diện đã làm trước đó.
  • Học về CSS Flexbox.

Buổi 05

  • Photoshop cơ bản thông qua file thiết kế giao diện trong dự án thực tế.
  • Các bước phân tích để bắt đầu và khởi tạo một dự án mới.
  • Hướng dẫn xây dựng Website bán hàng chỉ với HTML(5) và CSS(3) - Phần 01

Buổi 06

  • Hướng dẫn xây dựng Website bán hàng chỉ với HTML(5) và CSS(3) - Phần 02
  • Kỹ thuật phức tạp: xử lí ảnh kích thước khác nhau, tạo khối tự động co dãn, tự xây dựng grid layout…

Buổi 07

  • Hướng dẫn xây dựng Website bán hàng chỉ với HTML(5) và CSS(3) - Phần 03
  • Xây dựng Responsive cho Website
  • Tổ chức mã nguồn chuyên nghiệp, tư duy theo hướng components.

Buổi 08

  • Javascript cơ bản.
  • Các bài tập thuật toán rèn luyện tư duy lập trình giành cho Front End Developer

Buổi 09

  • Ôn tập Javascript DOM
  • Thực hành DOM với các bài toán tái tạo lại HTML
  • Tự xây dựng thư viện Custom Select Box thay thế giao diện và hiệu ứng mặc định

Buổi 10

  • Ôn tập jQuery
  • Thực hành lại các bài tập thực hành trước với tư duy lập trình bằng jQuery.
  • Thực hành tổ chức dữ liệu dạng Json trong xử lý Form nhập liệu.

Buổi 11

  • Bootstrap 3, Bootstrap 4 (sẽ tìm hiểu thêm Bootstrap 5 nếu có phiên bản chính thức)
  • Biết cách tuỳ biến giao diện mặc định của Bootstrap.
  • Ôn tập và mở rộng SASS nâng cao thông qua việc đọc hiểu mã nguồn của Bootstrap.

Buổi 12

  • Hiệu ứng (animation) kết hợp đồng thời CSS3 và Javascript.
  • Ứng dụng Counter để học các kỹ thuật về xử lý thời gian, giả lập transition CSS3 bằng Javascript, tương tác với thanh cuộn (Scroll) của trình duyệt.
  • Cách dùng thư viện Counter bằng jQuery

Buổi 13

  • Học cách Custom Audio và Video bằng Javascript.
  • Kỹ thuật kéo thả phần tử (drag & drop) với volume và duration bar trong Audio và Video bằng Javascript thuần.
  • Cách dùng thư viện Media Element bằng jQuery.

Buổi 14

  • Cách dùng một số thư viện hỗ trợ hiệu ứng jQuery phổ biến (Slider, Isotope, Fancybox, Masonry, … )
  • Custom giao diện bằng CSS, CSS3 khi dùng thư viện hỗ trợ.

Buổi 15

  • Hướng dẫn Project thực hành cuối khoá - Phần 01

Buổi 16

  • Hướng dẫn Project thực hành cuối khoá - Phần 02

Buổi 17

  • Hướng dẫn Project thực hành cuối khoá - Phần 03

Buổi 18

  • Hướng dẫn Project thực hành cuối khoá - Phần 04
  • Demo và nhận xét và góp ý mã nguồn của học viên