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

-   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 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 đà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. Chi tiết các bài học

PHẦN 1: HTML

Bài học 01 - Cài đặt môi trường

• Cài đặt visual studio code
• Cài đặt Post man

Bài học 02 - Tìm hiểu về html và css

• Khái niệm HTML
• Khái niệm  CSS
• Vai trò của HTML và CSS trong trang web

Bài học 03 - Cấu trúc file html

• Cách tạo file HTML trong VScode, các thành phần chính trong file HTML
• Cách dùng live-server để chạy file HTML
• Cách xem trang web dưới các kích thước màn hình khác nhau bằng dev tool
• Cách tạo nhanh cấu trúc HTML trong VS code

Bài học 04 - Thẻ heading và thẻ paragraph

• Cách sử dụng thẻ heading và thẻ paragraph
• Cách sử dụng dev tool để kiểm tra phần tử HTML

Bài học 05 - Một số thẻ định dạng văn bản

• Thẻ tạo chữ đậm: b, strong
• Thẻ tạo chữ nghiêng : i, em
• Thẻ tạo hightlight cho chữ: mark
• Thẻ tạo chữ nhỏ: small
• Thẻ tạo các chỉ số ở phía trên và dưới: thẻ sup và sub

Bài học 06 - Một số thẻ định dạng văn bản II

• <del>:Thẻ tạo dấu gạch ngang chữ
• <q>: Thẻ tạo dấu nháy đơn
• <blockquote>: Thẻ tạo trích dẫn
• <pre>: Thẻ cho phép xuống dòng không cần dùng <br>

Bài học 07 - Tìm hiểu về Attribute trong html

• Khái niệm về attribute
• Attribute title
• Attribute Id, class
• Attribute style

Bài học 08 - Link liên kết và các attribute liên quan

• Cách tạo link liên kết bằng thẻ <a>
• Attribute href
• Attribute target
• Tạo liên kết trong trang và tạo liên kết đến nội bộ các trang trong thư mục

Bài học 09 - Các thẻ tạo danh sách, bảng trong HTML

• Danh sách sắp xếp
• Danh sách không sắp xếp
• Cách tạo bảng trong HTML

Bài học 10 - Thẻ form trong html

• Vai trò của thẻ form trong HTML
• Giới thiệu thẻ label và thẻ input
• Các attribute quan trọng của form
• Giới thiệu thẻ button

Bài học 11- Các dạng input trong html-phần1

• Input dạng text
• Input dạng password
• Input dạng email
• Input dạng số
• Input dạng checkbox và radio button

Bài học 12 - Các dạng input trong html-phần 2

• Input dạng Select-option
• Input dạng text-area

Bài học 13 - Các dạng input trong html-phần 3

• Input dạng thời gian: date, time, week
• Input dạng upload file

Bài học 14 - Thẻ img trong html

• Input dạng thời gian: date, time, week
• Input dạng upload file

Bài học 15 - Làm việc với media trong html

• Cách đưa file âm thanh vào trang web
• Cách đưa file video vào trang web
• Cách nhúng video trên youtube vào trang web
• Cách nhúng google map vào trang web.

Bài học 16- Một số thẻ để tạo layout cho trang web

• Giới thiệu các thẻ hay dùng để tạo layout
• Dùng dev-tool để xem xét 1 trang web cụ thể

PHẦN 2: CSS

Bài học 17 - Các cách sử dụng css trong file html

• Sử dụng CSS theo kiểu Inline
• Sử dụng CSS theo kiểu Internal
• Sử dụng CSS theo kiểu External

Bài học 18 - Cách chọn phần tử trong css-cơ bản

• Chọn phần tử bằng tag name
• Chọn phần tử bằng Id
• Chọn phần tử bằng class

Bài học 19- Cách chọn phần tử trong css-nâng cao

• Chọn phần tử kết hợp Id, class và tag name
• Cách sử dụng ký tự “>”, “~” khi chọn phần tử
• Chọn phần tử sử dụng các attribute

Bài học 20 - Độ ưu tiên trong CSS

• Độ ưu tiên giữa internal và external
• Cách tính điểm để xác định độ ưu tiên
• Cách sử dụng !importaint trong css.

Bài học 21 - Các thuộc tính trang trí văn bản

• Text-align
• Text-decoration
• Text-indent
• Text-shadow
• Text-transform

Bài học 22 - Các thuộc tính trang trí chữ viết

• Font-style
• Font-size
• Font-weight
• Font-family
• Color, background-color

Bài học 23 - Các đơn vị thường gặp trong css

• Đơn vị px
• Đơn vị %
• Đơn vị rem

Bài học 24 - Cách đặt biến trong css

• Giới thiệu cách đặt biến trong CSS
• Tác dụng của việc đặt biến trong CSS

Bài học 25- Thuộc tính padding trong css

• Giới thiệu về padding, cách xem padding bằng dev tool
• Các cách viết sử dụng cho thuộc tính padding

Bài học 26 - Thuộc tính border trong css

• Giới thiệu về border, cách xem border bằng dev tool
• Các thuộc tính của border

Bài học 27 -Thuộc tính margin trong css

• Tác dụng của margin, cách xem margin bằng dev tool
• Các thành phần và cách sử dụng  margin

Bài học 28- Thuộc tính box-sizing trong css

• Cách sử dung thuộc tính box-sizing để cố định kích thước phần tử trong trường hợp phần tử có padding và border

Bài học 29 - Thuộc tính back-ground trong css

• Tìm hiểu về background-color
• Tìm hiểu về linear-gradient
• Tìm hiểu về background-image

Bài học 30 - Thuộc tính position trong css

• Tìm hiểu về position absolute và relative
• Tìm hiểu về position sticky
• Tìm hiểu về position fixed

Bài học 31 - Tìm hiểu về pseudo class (lớp giả) trong css

• Tìm hiểu về lớp giả :hover
• Tìm hiểu về lớp giả :active
• Tìm hiểu về lớp giả first-child, last-child và nth-child

Bài học 32 - Tìm hiểu về pseudo element trong css

• Tìm hiểu về  ::before và ::after
• Tìm hiểu về ::first-letter và ::first-line
• Tìm hiểu về ::selection

Bài học 33 - Tìm hiểu về thuộc tính display trong css

• Tìm hiểu về Display inline
• Tìm hiểu về Display block
• Tìm hiểu về Display none

Bài học 34 - Tìm hiểu về thuộc tính display flex

• Giới thiệu về thuộc tính display flex
• Khái niệm flex-container và flex-item
• Thuộc tính justify-content
• Thuộc tính flex-basis
• Thuộc tính flex-wrap

Bài học 35 - Tìm hiểu về media query

• Khái niệm và ý nghĩa của media query
• Cách viết media query cho các kích cỡ màn hình khác nhau

PHẦN 3: JAVASCRIPT

Bài học 36 - Giới thiệu về javascript 

• Vai trò của Javascript trong website
• Cách đưa code javascript vào HTML
• Một số hàm dựng sẵn trong javascript.
• Cách tạo comment và bỏ comment trong javascript

Bài học 37 - Biến và kiểu dữ liệu

• Khái niệm, ý nghĩa, cách khai báo biến
• Các kiểu dữ liệu trong Javascript

Bài học 38 - Toán tử trong javascript

• Các toán tử phép tính + - x / %
• Các toán tử so sánh
• Các toán tử logic

Bài học 39 - Hàm trong javascript

• Khái niệm hàm
• Cách khai báo và sử dụng hàm
• Cách gắn hàm vào sự kiện

Bài học 40- Cấu trúc điều kiện if-else

• Cấu trúc điều kiện IF ELSE
• Cấu trúc điều kiện IF-ELSE lồng nhau
• Toán tử 3 ngôi (cấu trúc if else rút gọn)

Bài học 41 - Cấu trúc điều kiện switch-case

• Giới thiệu cấu trúc điều kiện switch-case
• Sự kiện on-change trong javascript

Bài học 42 - Mảng trong Javascript

• Khái niệm mảng, cách khai báo mảng
• Xác định độ dài của mảng, truy xuất đến phần tử trong mảng
• Kiểm tra một biến có phải là mảng hay không

Bài học 43 - Các phương thức của mảng

• Phương thức ToString, Join
• Phương thức pop, push
• Phương thức shift, unshift
• Phương thức slice, concat
• Phương thức splice
• Phương thức sort, reverse

Bài học 44 - Chuỗi và các phương thức của chuỗi

• Một số lưu ý khi tạo chuỗi, cách tạo chuỗi động.
• Xác định độ dài của chuỗi
• Phương thức indexOf và lastIndexOf
• Phương thức slice, replace
• Phương thức toUpperCase và toLowerCase
• Phương thức trim, split

Bài học 45 - Object trong javascript

• Cách tạo object trong JS
• Cách truy xuất đến các property trong object
• Cách xóa property trong object
• Phương thức trong object

Bài học 46 - Object Constructor trong javascript

• Khái niệm object-constructor
• Cách sử dụng object-constructor

Bài học 47 - Các loại vòng lặp for trong javascript

• Vòng lặp for thông thường
• Vòng lặp for/in
• Vòng lặp for/of

Bài học 48 - vòng lặp while, do while

• Vòng lặp while
• Vòng lặp do while
• Sự khác nhau giữa while và do while

Bài học 49 - Từ khóa break và continue

• Ý nghĩa từ khóa break
• Ý nghĩa từ khóa continue

Bài học 50 - Các phương thức làm việc với array - phần 2

• Phương thức every, some
• Phương thức find, filter
• Phương thức foreach

Bài học 51 - Cách dùng hàm map để làm việc với mảng

• Giới thiệu hàm map
• Cách sử dụng hàm map

Bài học 52 - Các cách để chọn phần tử bằng js

• getElementById()
• getElementByTagName()
• getElementByClassName()
• querySelector() và querySelectorAll()

Bài học 53 - Sự kiện trong javascript

• Một số sự kiện trong javascript: click, input, change
• Gán sự kiện bằng attribute
• Gán sự kiện bằng DOM event
• Gán sự kiện bằng eventlistener
• Trang tham khảo các sự kiện khác

Bài học 54- Làm việc với attribute

• SetAttribute()
• GetAttribute()

Bài học 55 - Dùng js để tương tác với css của phần tử 

• Dùng js để tương tác với css của phần tử

Bài học 56 - Làm việc với classlist

• Giới thiệu về thuộc tính classlist
• Một số hàm để làm việc với classlist: add, remove, contain, toggle

Bài học 57 - Một số đối tượng dựng sẵn

• Cách sử dụng đối tượng Date
• Cách sử dụng đối tượng Math

Bài học 58 - Làm việc với json

• Khái niệm về JSON
• Chuyển từ JSON sang kiểu dữ liệu của JS dùng JSON.parse()
• Chuyển các kiểu dữ liệu từ JS sang Json dùng JSON.stringify()

PHẦN 4: BOOTSTRAP

Bài học 59 - Giới thiệu bootstrap

• Giới thiệu thư viện bootstrap
• Cách sử dụng bootstrap

Bài học 60 - Cấu trúc lưới trong bootstrap (grid system)

• Cách tạo ra cấu trúc lưới trong bootstrap
• Cách tạo cấu trúc lưới lồng nhau
• Cách sử dụng offset

Bài học 61 - Các class bootstrap sử dụng cho văn bản

• Căn lề text: text-center, text-left, text-right
• Tạo độ đậm nhạt cho text: font-weight-bold, font-weight-light
• Chữ nghiêng: font-italic
• text-lowercase, text-uppercase, text-capitalize
• Màu sắc chữ

Bài học 62 - Các class bootstrap sử dụng cho ảnh

• img-fluid: giữ tỷ lệ ảnh khi thay đổi kích thước trình duyệt
• Img-thumbnail: Tạo khung bao bên ngoài cho ảnh , rounded: Tạo bo góc cho ảnh
• Tạo thẻ ảnh để hiển thị sản phẩm hoặc bài viết
• Tạo slide ảnh

Bài học 63 - Sử dụng bootstrap để tạo menu cho trang

• Các class để tạo menu
• Tạo các menu con
• Các class điều chỉnh vị trí của menu

Bài học 64 - Sử dụng bootstrap để tạo menu responsive

• Tạo menu tương thích trên các kích thước màn hình khác nhau

Bài học 65 - Các class boostrap sử dụng tạo button

• Các class tạo màu sắc cho button
• Các class điều chỉnh kích thước
• Tạo nhóm các button

Bài học 66 - Tạo form bằng bootstrap

• Class form-group và form-control

Bài học 67 - Tạo cửa sổ popup và phân trang bằng boostrap

• Cách tạo modal, các thành phần của modal
• Cách tạo phân trang

Bài học 68 - Collapse trong bootstrap

• Khái niệm collapse
• Collapse button
• Collapse accordion

Bài học 69 - Xây dựng trang giới thiệu sản phẩm bằng bootstrap -phần 1

• Giới thiệu trang
• Tạo slide ảnh
• Tạo danh sách sản phẩm
• Tạo ô tìm kiếm sản phẩm theo tên và nút tạo mới sản phẩm

Bài học 70 - Xây dựng trang giới thiệu sản phẩm bằng bootstrap - phần 2

• Tạo popup tạo mới, cập nhật sản phẩm
• Tạo popup hiển thị thông tin sản phẩm

PHẦN 4: PROJECT WEB ĐỘNG BẰNG API SERVICE

Bài học 71 - Giới thiệu API, Postman

• Khái niệm API
• Sử dụng postman test các API

Bài học 72 - Fetch API

• Dùng fetch gọi API get/delete
• Dùng fetch gọi API post/put

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 pop up

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

PHẦN 6: ES6

Bài học 82 - ES6 - Giới thiệu ES6, từ khóa let, const 

• Giới thiệu ES6
• Cách sử dụng từ khóa let, const để khai báo biến
• Sự khác nhau giữa từ khóa let, const và từ khóa var

Bài học 83 - ES6 - Arrow function

• Khái niệm và cách sử dụng arrow function
• Sử dụng arrow function trong các phương thức mảng

Bài học 84 - ES6 - Giới thiệu Destructoring

• Sử dụng destructoring với mảng
• Sử dụng destructoring với object
• Toán tử rest

Bài học 85 - ES6 - Toán tử spread 

• Cách sử dụng toán tử spread  với mảng
• Cách sử dụng toán tử spread với object

Bài học 86 - ES6 - Đối số mặc định 

• Cách sử dụng đối số mặc định (default-value) trong ES6

Bài học 87- ES6 - Cách sử dụng class

• Cách sử dụng class trong ES6
• Tính kế thừa

Bài học 88 - ES6 - Module trong ES6

• Khái niệm module
• Cách sử dụng export và export default

PHẦN 7: JQUERY AJAX

Bài học 89 - Jquery - Giới thiệu thư viện jquery

• Giới thiệu thư viện Jquery
• Cách nhúng jquery vào trang HTML
• Gán sự kiện với 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

• Hàm addClass
• Hàm removeClass
• Hàm toggleClass

Bài học 92 - Jquery - Hàm Css trong jquery

Bài học 93 - Jquery - Hàm val  và hàm html

• Hàm val() thay thế cho .value
• Hàm html() thay thế cho innerHTML.

Bài học 94 - Jquery - Hàm attr() trong jquery

• Tạo thư viện ảnh sử dụng hàm attr() trong jquery

Bài học 95 - Jquery - Hàm append() trong jquery

• Cách sử dụng hàm append trong Jquery

Bài học 96 - Jquery - Dùng jquery ajax để gọi api

• Gọi API không có body trong request

Bài học 97 - Jquery - Dùng jquery ajax để gọi api phần 2

• Gọi API có có body trong request