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