LỘ TRÌNH TỰ HỌC LẬP TRÌNH THỦ CÔNG
Cho website cá nhân nguyenthehien.com

Mục tiêu
Trang web này không chỉ là portfolio. Nó là nơi ghi lại hành trình tự học, sản phẩm đã làm, video đã chia sẻ, sách đã đọc, thử thách đã trải qua và những đúc kết cá nhân. Nếu chọn phát triển mọi thứ liên quan đến lập trình một cách thủ công, không dùng AI viết thay, mục tiêu quan trọng nhất là nắm chắc nền tảng, hiểu từng dòng code, và biết cách biến ý tưởng thành sản phẩm có thể dùng được.


1. Hướng đi tổng thể

Giai đoạn đầu nên dùng:
- HTML
- CSS
- JavaScript
- Git
- GitHub Pages hoặc Netlify để deploy

Lý do:
- Dễ hiểu bản chất của web.
- Không bị framework che mất những thứ cần nắm: semantic HTML, layout CSS, DOM, responsive, accessibility.
- Đủ để xây dựng phiên bản đầu của trang cá nhân.

Giai đoạn sau nên nâng cấp lên:
- Astro
- TypeScript
- Markdown hoặc MDX
- Content Collections

Lý do:
- Website này là dạng content hub cá nhân, có nhiều nội dung lặp lại: projects, videos, books, lessons, challenges.
- Astro hợp với website nội dung, tốc độ nhanh, ít JavaScript thừa.
- Markdown giúp viết bài, ghi chú sách, đúc kết và nhật ký học tập rất gọn.


2. Không nên bắt đầu bằng gì

Không nên bắt đầu bằng Next.js:
- Rất mạnh, nhưng hơi nặng cho trang cá nhân hiện tại.
- Dễ bị cuốn vào routing, server rendering, deployment, API trước khi nắm chắc web cơ bản.

Không nên bắt đầu bằng React ngay:
- React tốt, nhưng nếu học quá sớm sẽ dễ quên mất HTML/CSS/JavaScript gốc.
- Nên chỉ học sau khi đã tự viết được giao diện, filter, menu mobile, render data bằng JavaScript thuần.

Không nên dùng WordPress nếu mục tiêu là học lập trình:
- WordPress nhanh có web, nhưng không tối ưu cho việc rèn kỹ năng code thủ công.


3. Lộ trình học 6 tháng

Tháng 1: HTML và cấu trúc nội dung
- Học semantic HTML: header, nav, main, section, article, aside, footer.
- Biết cách chia trang thành các section có ý nghĩa.
- Làm lại trang cá nhân hiện tại bằng HTML sạch hơn.
- Bài tập: tạo 5 section tĩnh: Hero, Projects, Videos, Books, Contact.

Cần nắm:
- Thế nào là semantic HTML.
- Cách đặt heading đúng thứ tự.
- Cách viết alt text cho ảnh.
- Cách tạo liên kết nội bộ trong trang.


Tháng 2: CSS layout và responsive
- Học box model, spacing, color, typography.
- Học Flexbox.
- Học CSS Grid.
- Học media queries.
- Học cách làm mobile-first.

Bài tập:
- Làm layout card sản phẩm.
- Làm grid sách.
- Làm section video.
- Làm menu mobile.
- Kiểm tra trên màn hình điện thoại, tablet, desktop.

Cần nắm:
- Khi nào dùng flex, khi nào dùng grid.
- Cách dùng max-width, minmax, clamp.
- Cách tránh text bị tràn khỏi nút/card.
- Cách tạo tone màu navy và be nhất quán.


Tháng 3: JavaScript DOM
- Học biến, function, array, object.
- Học querySelector, addEventListener, classList.
- Học render HTML từ data.
- Học filter data.
- Học localStorage nếu cần lưu trạng thái nhỏ.

Bài tập:
- Render danh sách projects từ mảng object.
- Filter projects theo tag.
- Render books và videos từ data.
- Tạo counter, progress bar, active nav.

Cần nắm:
- DOM là gì.
- Event là gì.
- Data-driven UI là gì.
- Tách data khỏi HTML để dễ cập nhật nội dung.


Tháng 4: Git và quy trình làm sản phẩm
- Học git init, status, add, commit, log, diff.
- Học branch cơ bản.
- Học push lên GitHub.
- Học viết commit message rõ ràng.

Bài tập:
- Mỗi section mới là một commit.
- Mỗi lần sửa lỗi là một commit riêng.
- Tạo file README ghi mục tiêu website.
- Deploy bản đầu lên GitHub Pages hoặc Netlify.

Cần nắm:
- Git giúp quay lại phiên bản cũ.
- Git giúp nhìn được tiến trình học thật.
- Commit nhỏ và rõ tốt hơn commit lớn và mơ hồ.


Tháng 5: Nâng cấp cấu trúc nội dung
- Tách data thành các file riêng nếu vẫn dùng JavaScript thuần.
- Hoặc bắt đầu migrate sang Astro.
- Học Markdown để viết notes, book reviews, lessons.
- Tạo trang chi tiết cho từng project hoặc từng cuốn sách.

Bài tập:
- Tạo /projects cho danh sách sản phẩm.
- Tạo /books cho kệ sách.
- Tạo /lessons cho bài học cá nhân.
- Tạo trang chi tiết đầu tiên: một sản phẩm bạn thật sự đã làm.

Cần nắm:
- Slug là gì.
- Metadata là gì.
- Danh sách và trang chi tiết khác nhau thế nào.
- Vì sao nội dung nên có cấu trúc.


Tháng 6: Chất lượng web thật
- Học SEO cơ bản: title, description, heading, Open Graph.
- Học performance cơ bản: tối ưu ảnh, lazy loading, giảm JavaScript.
- Học accessibility cơ bản: contrast, keyboard navigation, focus states.
- Học cách review giao diện bằng Chrome DevTools và Lighthouse.

Bài tập:
- Thêm sitemap.
- Thêm meta social image.
- Nén ảnh hero.
- Kiểm tra mobile kỹ.
- Viết checklist trước khi publish mỗi lần.

Cần nắm:
- Website đẹp nhưng chậm vẫn là website chưa tốt.
- Website cá nhân nên dễ đọc, dễ cập nhật, dễ mở rộng.
- Chất lượng đến từ những chi tiết nhỏ lặp lại đều.


4. Công cụ nên dùng

Code editor:
- Visual Studio Code

Extension nên cài:
- Prettier
- ESLint
- Live Server hoặc dùng Vite dev server
- GitLens nếu muốn xem lịch sử code rõ hơn

Trình duyệt:
- Chrome hoặc Edge
- Dùng DevTools để inspect layout, responsive, console error, network.

Quản lý code:
- Git
- GitHub

Runtime:
- Node.js LTS
- npm đi kèm Node.js

Dev server:
- Bản đầu có thể mở index.html trực tiếp.
- Khi dự án lớn hơn, dùng Vite để chạy local server.

Thiết kế:
- Figma hoặc Penpot
- Không cần quá phức tạp. Chỉ cần có màu, typography, spacing, layout.

Deploy:
- GitHub Pages nếu muốn miễn phí và gắn với GitHub.
- Netlify hoặc Vercel nếu muốn deploy nhanh, custom domain tiện hơn.


5. Stack để xây dựng website này

Phiên bản 1:
- HTML
- CSS
- JavaScript
- Static assets
- Deploy static

Phiên bản 2:
- Vite
- JavaScript module
- Data tách thành file riêng
- Component nhỏ bằng JavaScript thuần nếu cần

Phiên bản 3:
- Astro
- TypeScript
- Markdown/MDX
- Content Collections
- RSS, sitemap, SEO

Phiên bản 4 nếu cần backend:
- Node.js
- Express hoặc Fastify
- SQLite cho dự án nhỏ
- PostgreSQL nếu dữ liệu nghiêm túc hơn
- Auth chỉ thêm khi thật sự cần dashboard đăng nhập


6. Cách học không dùng AI

Nguyên tắc 1: Tự viết trước
- Đọc tài liệu.
- Tự viết code.
- Bị lỗi thì đọc lỗi.
- Tìm trên MDN, docs chính thức, Stack Overflow nếu cần.

Nguyên tắc 2: Không copy paste vô thức
- Nếu copy đoạn code, phải viết lại bằng tay ít nhất một lần.
- Phải giải thích được mỗi dòng đang làm gì.

Nguyên tắc 3: Một tính năng, một bài học
- Thêm filter project: học array filter và event click.
- Thêm menu mobile: học classList và CSS responsive.
- Thêm book detail: học routing hoặc tách file.
- Thêm progress challenge: học data binding thủ công.

Nguyên tắc 4: Ghi lại quá trình
- Mỗi lỗi quan trọng nên ghi vào lessons.
- Mỗi thứ học được nên biến thành một note ngắn.
- Mỗi project nhỏ nên có phần "tôi học được gì".

Nguyên tắc 5: Làm nhỏ nhưng đều
- 45 đến 90 phút mỗi ngày tốt hơn 8 tiếng một ngày rồi bỏ.
- Cuối mỗi tuần cần có một bản có thể xem được trên trình duyệt.


7. Checklist mỗi khi xây một section mới

Nội dung:
- Section này trả lời câu hỏi gì?
- Người xem hiểu gì về mình sau section này?
- Có cần ảnh, thumbnail, tag, ngày tháng không?

HTML:
- Heading có đúng cấp không?
- Dùng section/article/list đúng ý nghĩa chưa?
- Ảnh có alt text chưa?

CSS:
- Mobile có ổn không?
- Text có bị tràn không?
- Khoảng cách có đều không?
- Màu navy và be có nhất quán không?

JavaScript:
- Data có tách khỏi logic chưa?
- Function có tên dễ hiểu không?
- Có lỗi console không?

Git:
- Đã commit sau khi hoàn thành chưa?
- Commit message có nói rõ thay đổi không?


8. Thứ tự xây tiếp website này

Bước 1: Hoàn thiện section Learning Roadmap
- Đưa lộ trình tự học vào trang chủ.
- Hiển thị theo giai đoạn để dễ xem.
- Có stack công cụ nên dùng.

Bước 2: Nâng cấp Projects
- Mỗi project có ảnh, tag, trạng thái, bài học.
- Thêm nút xem chi tiết.

Bước 3: Nâng cấp Books
- Mỗi sách có cover, tác giả, 3 bài học, cách áp dụng.
- Sau này tách thành trang riêng cho từng sách.

Bước 4: Nâng cấp Videos
- Thêm thumbnail thật.
- Thêm link YouTube/Facebook/TikTok.
- Thêm tag chủ đề.

Bước 5: Tạo Lessons thành blog nhẹ
- Mỗi bài học có ngày, title, nội dung ngắn.
- Sau này dùng Markdown để viết dài hơn.

Bước 6: Deploy
- Đưa lên GitHub.
- Chọn GitHub Pages, Netlify hoặc Vercel.
- Gắn domain nguyenthehien.com.


9. Kết luận

Hướng tối ưu cho trang này là:
HTML/CSS/JavaScript trước, Git song song, Vite khi cần dev server, Astro + TypeScript khi nội dung bắt đầu nhiều.

Đó là con đường chậm hơn dùng AI, nhưng chắc hơn. Mỗi section trên website sẽ không chỉ là nội dung để người khác xem, mà còn là bằng chứng rằng mình đã thật sự hiểu và tự tay xây được.