Mục tiêu: Hiểu rõ nguyên lý hoạt động của web, nắm vững kiến thức cơ bản về HTML, CSS, và JavaScript.

Giới thiệu về Web Development

Cách thức hoạt động của web (client-server, HTTP/HTTPS).

Các công cụ cần thiết: trình duyệt, code editor (VS Code), DevTools.

HTML Cơ bản: Cấu trúc một tài liệu HTML, các thẻ cơ bản, form và semantic HTML.

CSS Cơ bản: Cú pháp CSS, box model, các thuộc tính cơ bản, position, và Flexbox.

JavaScript Cơ bản: Giới thiệu về JavaScript, biến, kiểu dữ liệu, cấu trúc điều khiển, hàm, DOM, và sự kiện.

Mục tiêu: Nắm vững các kỹ thuật nâng cao để xây dựng giao diện web đẹp và tương tác.

Grid layout: tạo layout phức tạp với display: grid.

Responsive design: media queries, mobile-first approach.Animation và transition: tạo hiệu ứng chuyển động.

Custom properties (CSS variables).Làm việc với mảng và object.

ES6+ features: arrow functions, template literals, destructuring, spread/rest operator.

Asynchronous JavaScript: callbacks, promises, async/await.

Fetch API: gửi và nhận dữ liệu từ server.Local Storage và Session Storage.

Giới thiệu về SCSS và lợi ích.Cú pháp cơ bản: variables, nesting, mixins, extends.

Import và modular CSS. Sử dụng SCSS trong dự án thực tế.

Mục tiêu: Sử dụng các framework và thư viện để tăng tốc độ phát triển và tối ưu hóa code.

Bootstrap: Giới thiệu về Bootstrap và cách sử dụng.

Grid system, utilities, components (navbar, buttons, cards, modals).

Tùy chỉnh Bootstrap với SCSS.

Tailwind CSS: Giới thiệu về Tailwind CSS và utility-first approach.

Cách cài đặt và sử dụng.

Tạo layout và components với Tailwind.

Tùy chỉnh cấu hình Tailwind.

JavaScript Frameworks/Libraries (Optional).

Các libraries hỗ trợ.

Giới thiệu về React, Vue, hoặc Angular (có thể dạy sau nếu muốn đi sâu vào front-end).

Mục tiêu: Hiểu quy trình thiết kế giao diện và chuyển đổi từ design sang code.

Giới thiệu về Figma: Công cụ và giao diện Figma.

Tạo và quản lý các frames, components.

Thiết kế giao diện web.

Nguyên tắc thiết kế: typography, color theory, spacing.

Tạo wireframe và prototype.

Thiết kế responsive.

Chuyển đổi từ Figma sang code.

Xuất assets (hình ảnh, icons).

Sử dụng CSS từ thiết kế Figma.

JavaScript Nâng cao.

ES6+ advanced features: modules, classes, iterators/generators.

Firebase.

Web APIs: Geolocation, Canvas, Web Storage.

CSS Frameworks khác: Materialize CSS, Foundation, Bulma.

Version Control với Git.

Cơ bản về Git: commit, branch, merge.

Làm việc với GitHub/GitLab.

Tối ưu hóa và Testing.

Testing cơ bản với Jest hoặc Cypress.

Tối ưu hóa hình ảnh và code.

Mục tiêu: Áp dụng kiến thức vào dự án thực tế.

Xây dựng dự án hoàn chỉnh.

Lên ý tưởng cho dự án.

Phân tích yêu cầu và thiết kế giao diện.

Triển khai code với HTML, CSS, JavaScript.

Sử dụng SCSS, Bootstrap/Tailwind để tối ưu hóa.

Deploy và Hosting.

Giới thiệu về GitHub Pages, Netlify, Vercel.

Cách deploy một website tĩnh.