1. Điều kiện học tốt lập trình Front-end

-   Khóa học được thiết kế dành cho người mới bắt đầu, do đó không yêu cầu học viên có nền tảng chuyên sâu về lập trình. Tuy nhiên, để học hiệu quả, học viên cần đáp ứng một số điều kiện cơ bản sau:

a. Kiến thức nền tảng:

-   Biết sử dụng máy tính và Internet thành thạo.
-   Có tư duy logic cơ bản là một lợi thế (không bắt buộc).

b. Thiết bị học tập:

-   Máy tính cá nhân hoặc laptop có cấu hình ổn định (RAM từ 4GB trở lên khuyến nghị).
-   Kết nối Internet ổn định để xem video bài giảng và thực hiện các bài tập thực hành.

c. Phần mềm và công cụ học tập:

-   Trình duyệt web hiện đại (Chrome, Firefox, Edge, Safari,...).
-   Trình soạn thảo mã nguồn như Visual Studio Code (khuyến nghị).
-   Khả năng cài đặt và sử dụng các công cụ lập trình cơ bản theo hướng dẫn từ khóa học.

d. Thái độ học tập:

-   Có tinh thần học hỏi, chủ động thực hành và kiên nhẫn với các khái niệm mới.
-   Sẵn sàng dành thời gian luyện tập thường xuyên để nắm vững kiến thức.

2. Mục tiêu của khóa đào tạo

-   Nắm vững kiến thức cơ bản về lập trình Front-end.
-   Hiểu được cách hoạt động của website và vai trò của Front-end trong phát triển web.
-   Làm quen với quy trình xây dựng giao diện web hiện đại.

a. Thành thạo 3 công nghệ cốt lõi:

-   HTML: Xây dựng cấu trúc nội dung trang web.
-   CSS: Thiết kế và làm đẹp giao diện người dùng, làm quen với responsive (giao diện thích ứng với mọi thiết bị).
-   JavaScript cơ bản: Thêm chức năng tương tác, xử lý sự kiện, thao tác với DOM.

b. Thực hành xây dựng giao diện web hoàn chỉnh:

-   Tự thiết kế và lập trình các website đơn giản như: landing page, trang giới thiệu sản phẩm, trang cá nhân,...
-   Sử dụng thư viện Bootstrap (hoặc CSS frameworks khác nếu có dạy) để tăng tốc độ phát triển giao diện.

c. Rèn luyện tư duy lập trình và kỹ năng giải quyết vấn đề:

-   Biết cách phân tích giao diện, chia bố cục và viết mã có cấu trúc rõ ràng.
-   Làm quen với cách tìm kiếm lỗi, debug và cải thiện trải nghiệm người dùng.

d. Sẵn sàng cho các bước phát triển tiếp theo:

-   Đủ kiến thức để học nâng cao với JavaScript chuyên sâu, ReactJS hoặc chuyển sang mảng lập trình Full-Stack.

3. Đối tượng học

-   Khóa học được thiết kế dành cho người mới bắt đầu, không yêu cầu kinh nghiệm lập trình trước đó, phù hợp với:

a. Người mới bắt đầu học lập trình:

-   Muốn tiếp cận lĩnh vực phát triển web từ con số 0.
-   Mong muốn học nghề lập trình để làm việc trong lĩnh vực công nghệ thông tin.

b. Học sinh – sinh viên các ngành kỹ thuật, CNTT hoặc phi kỹ thuật:

-   Mong muốn bổ sung kỹ năng thực hành lập trình web để phục vụ học tập, làm đồ án hoặc nâng cao hồ sơ cá nhân.

c. Người đi làm muốn chuyển ngành sang IT:

-   Đang làm ở lĩnh vực khác nhưng muốn chuyển hướng sang nghề lập trình viên, bắt đầu từ mảng Front-end dễ tiếp cận.

d. Người làm thiết kế đồ họa hoặc marketing:

-   Muốn hiểu và chỉnh sửa giao diện website.
-   Mong muốn giao tiếp hiệu quả hơn với team lập trình khi làm dự án thực tế.

e. Người muốn tự xây dựng website cá nhân hoặc dự án nhỏ:

-   Có ý tưởng xây dựng blog, portfolio, landing page,... và muốn tự thực hiện mà không phụ thuộc vào lập trình viên.

4. Nội dung chi tiết các bài học

-   Bài học 1 - Cài đặt môi trường
-   Bài học 2 - Tìm hiểu về HTMML và CSS
-   Bài học 3 - Cấu trúc file HTML
-   Bài học 4 - Thẻ Heading và thẻ Paragraph
-   Bài học 5 - Một số thẻ định dạng văn bản -  phần 1
-   Bài học 6 - Một số thẻ định dạng văn bản -  phần 2
-   Bài học 7 - Tìm hiểu về Attribute trong HTML
-   Bài học 8 - Link liên kết và các Attribute liên quan
-   Bài học 9 - Các thẻ tạo danh sách, bảng trong HTML
-   Bài học 10 - Thẻ FORM trong HTML
-   Bài học 11 - Các dạng Input trong HTML - phần 1
-   Bài học 12 - Các dạng Input trong HTML - phần 2
-   Bài học 13 - Các dạng Input trong HTML - phần 3
-   Bài học 14 - Thẻ IMG trong HTML
-   Bài học 15 - Làm việc với MEDIA trong HTML
-   Bài học 16 - Một số thẻ để tạo Layout cho trang web
-   Bài học 17 - Các cách sử dụng CSS trong file HTML
-   Bài học 18 - Cách chọn phần tử trong CSS - cơ bản
-   Bài học 19 - Cách chọn phần tử trong CSS - nâng cao
-   Bài học 20 - Độ ưu tiên trong CSS
-   Bài học 21 - Các thuộc tính trang trí văn bản
-   Bài học 22 - Các thuộc tính trang trí chữ viết
-   Bài học 23 - Các đơn vị thường gặp trong CSS
-   Bài học 24 - Cách đặt biến trong CSS
-   Bài học 25 - Thuộc tính padding trong CSS
-   Bài học 26 - Thuộc tính border trong CSS
-   Bài học 27 - Thuộc tính margin trong CSS
-   Bài học 28 - Thuộc tính Box-sizing trong CSS
-   Bài học 29 - Thuộc tính Back-ground trong CSS
-   Bài học 30 - Thuộc tính Position trong CSS
-   Bài học 31 - Tìm hiểu về Pseudo Class (lớp giả) trong CSS
-   Bài học 32 - Tìm hiểu về Pseudo Element trong CSS
-   Bài học 33 - Tìm hiểu về thuộc tính Display trong CSS
-   Bài học 34 - Tìm hiểu về thuộc tính Display Flex
-   Bài học 35 - Tìm hiểu về Media Query
-   Bài học 36 - Giới thiệu về Javascript 
-   Bài học 37 - Biến và kiểu dữ liệu trong Javascript
-   Bài học 38 - Toán tử trong Javascript
-   Bài học 39 - Hàm trong Javascript
-   Bài học 40 - Cấu trúc điều kiện If-Else
-   Bài học 41 - Cấu trúc điều kiện Switch-Case
-   Bài học 42 - Mảng trong Javascript
-   Bài học 43 - Các phương thức của mảng
-   Bài học 44 - Chuỗi và các phương thức của chuỗi
-   Bài học 45 - Object trong Javascript
-   Bài học 46 - Object Constructor trong Javascript
-   Bài học 47 - Các loại vòng lặp for trong Javascript
-   Bài học 48 - vòng lặp While, Do While
-   Bài học 49 - Từ khóa Break và Continue
-   Bài học 50 - Các phương thức làm việc với Array
-   Bài học 51 - Cách dùng hàm Map để làm việc với mảng
-   Bài học 52 - Các cách để chọn phần tử bằng Javascript
-   Bài học 53 - Sự kiện trong Javascript
-   Bài học 54 - Làm việc với Attribute
-   Bài học 55 - Dùng Javascript để tương tác với CSS của phần tử 
-   Bài học 56 - Làm việc với Classlist
-   Bài học 57 - Một số đối tượng dựng sẵn
-   Bài học 58 - Làm việc với JSON
-   Bài học 59 - Giới thiệu Bootstrap
-   Bài học 60 - Cấu trúc lưới trong Bootstrap (Grid System)
-   Bài học 61 - Các Class Bootstrap sử dụng cho văn bản
-   Bài học 62 - Các Class Bootstrap sử dụng cho ảnh
-   Bài học 63 - Sử dụng Bootstrap để tạo menu cho trang
-   Bài học 64 - Sử dụng Bootstrap để tạo menu Responsive
-   Bài học 65 - Các Class Boostrap sử dụng tạo Button
-   Bài học 66 - Tạo FORM bằng Bootstrap
-   Bài học 67 - Tạo cửa sổ Popup và phân trang bằng Boostrap
-   Bài học 68 - Collapse trong Bootstrap
-   Bài học 69 - Xây dựng trang giới thiệu sản phẩm bằng Bootstrap - phần 1
-   Bài học 70 - Xây dựng trang giới thiệu sản phẩm bằng Bootstrap - phần 2
-   Bài học 71 - Giới thiệu API, Postman
-   Bài học 72 - Fetch API
-   Bài học 73 - Project - gọi API lấy danh sách sản phẩm theo trang
-   Bài học 74 - Project - Tạo Slide ảnh
-   Bài học 75 - Project - Hiển thị danh sách sản phẩm
-   Bài học 76 - Project - Phân trang sản phẩm
-   Bài học 77 - Project - Tìm kiếm sản phẩm
-   Bài học 78 - Project - Hiển thị thông tin sản phẩm trên Popup
-   Bài học 79 - Project - Cập nhật sản phẩm
-   Bài học 80 - Project - Thêm mới sản phẩm
-   Bài học 81 - Project - Xóa sản phẩm
-   Bài học 82 - ES6 - Giới thiệu ES6, từ khóa LET, CONST 
-   Bài học 83 - ES6 - Arrow Function
-   Bài học 84 - ES6 - Giới thiệu Destructoring
-   Bài học 85 - ES6 - Toán tử Spread 
-   Bài học 86 - ES6 - Đối số mặc định 
-   Bài học 87 - ES6 - Cách sử dụng Class
-   Bài học 88 - ES6 - Module trong ES6
-   Bài học 89 - Jquery - Giới thiệu thư viện Jquery
-   Bài học 90 - Jquery - Cách sử dụng hàm Show, Hide, Toggle
-   Bài học 91 - Jquery - Các hàm làm việc với Attribute Class trong Jquery
-   Bài học 92 - Jquery - Hàm CSS trong Jquery
-   Bài học 93 - Jquery - Hàm VAL và hàm HTML
-   Bài học 94 - Jquery - Hàm Attr() trong Jquery
-   Bài học 95 - Jquery - Hàm Append() trong Jquery
-   Bài học 96 - Jquery - Dùng Jquery Ajax để gọi API - phần 1
-   Bài học 97 - Jquery - Dùng Jquery Ajax để gọi API - phần 2