Web Developer Learning Roadmap (2h / Session)

Study Plan (2 hours per session)

20 min Learn theory
70 min Practice coding
20 min Do assignment
10 min Review

Learning Phases

Learn HTML structure, forms, CSS layout, JavaScript DOM.
Task: Build full input form + validation.

Learn Bootstrap grid, cards, forms.
Task: Convert form to responsive UI + video grid.

Learn file upload + preview.
Task: Upload image, multiple images, PDF preview.

Learn DataTable + Excel grid.
Task: Searchable table + Handsontable grid.

Learn tree UI + navigation + Ajax.
Task: Tree + form display + API calls.

Integrate with Spring + Thymeleaf.
Task: Render UI from backend.

Learning Sessions

Session Learn Task
1 HTML Basics Simple webpage
2 Forms Full input form
3 CSS Style UI
4 JS Validation
5 Bootstrap Responsive form
6 Upload Image preview
7 Multi Upload Multiple preview
8 Video YouTube grid
9 Table Search table
10 Grid Excel-like
11 Tree Tree UI
12 Ajax API demo
13 Thymeleaf Backend render

Kế hoạch học (2 giờ / buổi)

20 phút Học lý thuyết
70 phút Thực hành
20 phút Làm bài tập
10 phút Review

Các giai đoạn học

Học HTML, CSS, JavaScript cơ bản.
Bài tập: Form đầy đủ + validate.

Học Bootstrap layout.
Bài tập: Form responsive + video grid.

Upload file + preview.
Bài tập: Upload ảnh, nhiều ảnh, PDF.

DataTable + Grid Excel.
Bài tập: Bảng tìm kiếm + grid Excel.

Tree + Ajax + điều hướng.
Bài tập: Tree + form + API.

Tích hợp Spring + Thymeleaf.
Bài tập: Render dữ liệu backend.

Lộ trình theo buổi

Buổi Học Bài tập
1 HTML Trang web đơn giản
2 Form Form đầy đủ
3 CSS Style UI
4 JS Validate
5 Bootstrap Responsive
6 Upload Preview ảnh
7 Upload nhiều Nhiều ảnh
8 Video Grid YouTube
9 Bảng Search table
10 Grid Excel-like
11 Tree Tree UI
12 Ajax API
13 Thymeleaf Backend render