NỘI DUNG KHOÁ HỌC

I. Các kỹ thuật Frontend cơ bản và nâng cao

1. Dự án Natours - Giới thiệu dự án (phần 1):

1.1. Giới thiệu dự án.

1.2. Xây dựng Header

1.3. Tạo hiệu ứng chuyển động đặc biệt trong CSS3

1.4. Tạo các Button có hiệu ứng phức tạp.

2. Tìm hiểu nâng cao về HTML/CSS.

2.1. Ba cốt lõi trong việc code HTML, CSS tốt.

2.2. Chuyển px sang rem 1 cách hiệu quả.

2.3. Cấu trúc, thành phần và cách đặt tên class (BEM) trong HTML & CSS

2.4. Triển khai BEM cho dự án Natours.

3. Kỹ thuật nâng cao: Giới thiệu về Sass & NPM

3.1. Sass là gì.

3.2. Variables & Nesting

3.3. Mixin, Extends & Functions.

3.4. Cài đặt Sass qua NPM packages.

3.5. Viết và biên dích Sass qua NPM scripts

3.6. Cấu hình tự động Reload trang web khi có sự thay đổi file code.

4. Dự án Natours: sử dụng CSS nâng cao và Sass (phần 2):

4.1. Giới thiệu project.

4.2. Convert CSS của phần 1 sang Sass: Variables & Nesting.

4.3. Thực hiện cấu trúc CSS với Sass.

4.4. Các nguyên tắc cơ bản trong Responsive Design & các loại Layout.

4.5. Xây dựng Grid tùy chỉnh với Floats (ko dung CSS Framework)

4.6. Cắt HTML/CSS cho phần About.

4.7. Cắt HTML/CSS cho phần Features.

4.8. Cắt HTML/CSS cho phần Tours.

4.9. Cắt HTML/CSS cho phần Stories.

4.10. Cắt HTML/CSS cho phần Booking.

4.11. Cắt HTML/CSS cho phần Footer.

4.12. Cắt HTML/CSS cho phần Navigation.

4.13. Làm Popup bằng Pure CSS.

5. Dự án Natours: Responsive Design (Phần 3)

5.1. Giới thiệu về Mobile-First và Desktop-First; Breakpoints.

5.2. Ưu điểm của Sass Mixin trong Media Queries.

5.3. Media Queries: base, typo & layouts.

5.4. Media Queries: Layout, About & features Sections.

5.5. Media Queries: tours, stories & booking sections.

5.6. Responsive Image và xử lý ảnh để tối ưu tốc độ load trang.

5.7. Tổng kết dự án Natours

6. Dự án Trillo: Làm chủ CSS3 Flexbox trong xây dựng layout.

6.1. Tại sao nên xử dụng CSS3 Flexbox

6.2. Flexbox cơ bản: Flex container, Flex items & more…

6.3. Giới thiệu dự án: cấu hình dự án và các thuộc tính tuỳ chỉnh.

6.4. Xây dựng bố cục tổng thể (overall layout) của trang.

6.5. Cắt HTML/CSS cho phần Header.

6.6. Cắt HTML/CSS cho phần navigation.

6.7. Cắt HTML/CSS cho phần hotel Overview.

6.8. Cắt HTML/CSS cho phần Description.

6.9. Cắt HTML/CSS cho phần User Reviews.

6.10. Cắt HTML/CSS cho phần Header.

6.11. Code Media Queries.

6.12. Tổng kết dự án Trillo.

7. Giới thiệu cơ bản về CSS Grid Layouts

7.1. Tại sao nên sử dụng CSS Grid.

7.2. Tự tạo Grid Layout ko dung CSS Framework.

7.3. Các kỹ thuật trong việc xây dựng Grid Layout.

8. Dự án Nexter: làm chủ CSS Grid Layout trong dự án thức tế.

8.1. Giới thiệu và cài đặt dự án.

8.2. Xây dựng bố cục tổng thể.

8.3. Cắt HTML/CSS cho phần features.

8.4. Cắt HTML/CSS cho phần Story.

8.5. Cắt HTML/CSS cho phần Homes.

8.6. Cắt HTML/CSS cho phần Gallery

8.7. Cắt HTML/CSS cho phần Footer.

8.8. Cắt HTML/CSS cho phần Realtors.

8.9. Tối ưu giao diện trên các thiết bị.

8.10. Tổng kết dự án.

II. Căn Bản Về Thư Viện Jquery:

1. Giới thiệu về Jquery:

1.1. Jquery là gì? Viết chương trình đầu tiên.

1.2. Quy trình biên dịch của Javascript – Jquery

2. Selector trong Jquery.

2.1. Basic Selector

2.2. Basic/Child/Content/Form … filters

2.3. Sự kiện trong Jquery (Jquery Event)

3. Các thuộc tính Jquery thường dùng:

3.1. hasClass()

3.2. html()

3.3. addClass() – removeClass()

3.4. attr() – removeAttr() – prop()

4. Bài tập thực hành:

4.1. Validate Form bằng Jquery.

4.2. Tạo Tab bằng Jquery.

III. Tìm Hiểu & Sử Dụng CSS Framework:

1. Bootstrap CSS Framework:

1.1. Giới thiệu, cài đặt & sử dụng.

1.2. Bài tập thực hành & trình bày: giới thiệu về Bootstrap Layout

1.3. Bài tập thực hành & trình bày: giới thiệu về Bootstrap Content

1.4. Bài tập thực hành & trình bày: giới thiệu về Bootstrap Components

1.5. Bài tập thực hành & trình bày: giới thiệu về Bootstrap Layout

1.6. Bài tập thực hành & trình bày: giới thiệu về Bootstrap Unities, Extends & Migration

2. Các CSS Framework khác:

2.1. Bài tập thực hành & trình bày: tự nghiên cứu và giới thiệu về một số CSS Framework phổ biến khác (Foundation, Material, Semantic…)

2.2. Bài tập thực hành & trình bày: triển khai 1 Mockup design dựa trên CSS Framework được chỉ định.

IV. Xây dựng Website sử dụng Bootstrap 4 & CMS Wordpress (Final Project)

1. Giới thiệu về dự án.

2. Giới thiệu cơ bản về CMS Wordpress: theme & plugins.

3. Xây dựng theme cho CMS Wordpress: giới thiệu về Sage Starter Theme.

4. Cắt HTML/CSS giao diện các trang web từ Photoshop.

5. Ghép giao diện vào CMS Wordpress.

6. Testcase dự án & Fix lỗi.

7. Triển khai dự án trên server khách hàng.

8. Tổng kết dự án.

V. Tìm hiểu về Javascript Component Framework – Angular (Bonus Advanced).

1. Giới thiệu cơ bản về Angular

2. Heroes App: Thực hành và trình bày

2.1. Thực hành & Trình bày: giới thiệu và cài đặt ban đầu.

2.2. Thực hành & Trình bày: Chỉnh sửa thông tin Hero

2.3. Thực hành & Trình bày: Hiển thị danh sách Heroes

2.4. Thực hành & Trình bày: Angular Master/detail components.

2.5. Thực hành & Trình bày: Angular Service, Routing, Http.

3. Tổng kết: bài tập thu hoặch – Xây dựng ứng dụng Todo app

*** Nguồn sử dụng:

results matching ""

    No results matching ""