Định hướng tự học Fullstack¶

Hiện tại lộ trình này mình viết cho cá nhân mình dùng nên nó vẫn chưa được hoàn chỉnh. Mình cũng sẽ chỉnh sửa và cải thiện trong quá trình học luôn.

Fullstack là cái gì?¶

Practically all web applications have (at least) two "layers": the browser, being closer to the end-user, is the top layer, and the server the bottom one. There is often also a database layer below the server. We can therefore think of the architecture of a web application as a stack of layers.

Often, we also talk about the frontend and the backend. The browser is the frontend, and the JavaScript that runs on the browser is the frontend code. The server on the other hand is the backend.

In the context of this course, full-stack web development means that we focus on all parts of the application: the frontend, the backend, and the database. Sometimes the software on the server and its operating system are seen as parts of the stack, but we won't go into those.

Chọn lộ trình khác¶

Nếu bạn muốn học những lộ trình khác thì có thể thử:

Bạn hoàn toàn có thể sử dụng những hướng dẫn Fullstack trên để hỗ trợ quá trình học của mình.

Lộ trình học¶

Lộ trình sẽ được chia ra làm 26 tuần. Cách học cơ bản của lộ trình là trong mỗi tuần sẽ có những phần kiến thức mà bạn cần (mình nghĩ là cần) học. Bạn hoàn toàn có thể bỏ qua những phần bạn đã học từ trước hoặc muốn học sau (Khi dự án bạn muốn xây dựng cần đến phần kiến thức đó). Lộ trình này được xây dựng dựa trên lộ trình Fullstack của Repo này.

Về phần dự án hàng tuần, thử nghĩ xem bạn muốn làm ứng dụng gì. Bạn có thể đọc Hướng dẫn xây dựng dự án cơ bản để học cách bắt đầu lên ý tưởng.

Mỗi tuần bạn nên thử làm ít nhất một dự án (một ứng dụng đơn giản để áp dụng các nội dung bạn đã học trong tuần, gì cũng được). Mình sẽ để một danh sách gợi ý bên dưới.

Định hướng cho chương trình học¶

Chương trình học của mình sẽ yêu cầu mọi người đào sâu về Backend hơn Frontend và không đi vào một lựa chọn cụ thể nào. Với Frontend bạn cũng sẽ tự chọn thứ bạn muốn học.

Ví dụ: Ở mục Frontend, bạn muốn học Vue.js thì tự tìm các nội dung "cơ bản" mà bạn cần học.
Ở Backend cũng không bắt bạn đi theo một lựa chọn cụ thể nào cả

Bọn mình sẽ tập trung vào hiểu cốt lõi của cả một ứng dụng. Ở Backend thì có những khái niệm như HTTP GET/POST hay Database, còn Frontend thì có HTML/CSS/JS (Còn lại Framework do bạn chọn).

Lập trình Web phát triển quá nhanh, hết frontend framework này đến cái khác, công cụ này đến công cụ khác và bạn sẽ rất dễ để bắt gặp các câu hỏi như "Mình nên học cái gì?". Bạn cần phải tự tìm thông tin thêm về thứ bạn muốn chọn.

Chương trình này không dạy bạn hết về Fullstack và bạn vẫn sẽ còn phải học rất nhiều để nâng cao khả năng của bản thân.

Tuần 1: HTML, CSS, Layout (Flexbox, Grid)¶

Bạn sẽ học¶

HTML/CSS cơ bản và responsive design. Đồng thời, học cách thiết lập và sử dụng cơ bản các công cụ hỗ trợ cho quá trình lập trình như: VS Code, Chrome DevTools, Postman (cho API testing, bạn chưa cần dùng đến cái này trong quá trình học ban đầu).

Nguồn tài nguyên học¶

Nếu bạn muốn xem video thì xem Khóa HTML/CSS cơ bản của F8 - Tiếng Việt. Hoặc có thể học cả HTML Foundations và CSS Foundations của TheOdinProject. Bạn cũng sẽ được học thêm về: Flexbox, Grid (Layout).

Đọc thêm các nội dung khác liên quan đến HTML/CSS:

Giới thiệu về DOM - Tìm hiểu về DOM (Document Object Model). Sẽ có một chút phần code của JavaScript, bạn có thể bỏ qua và chỉ cần tập trung vào hiểu DOM là gì.
Guide to Writing Semantic HTML - Cách viết semantic HTML (Semantic HTML refers to the use of HTML markup to convey the meaning of the content on a web page, rather than just its appearance)
Don't click here

Sau đó bạn cũng có thể lựa chọn sử dụng CSS Framework để giúp việc trang trí Website của bạn được đơn giản hơn nhiều, dưới đây là một số CSS Framework được gợi ý:

Bootstrap
TailwindCSS
Pure CSS - Siêu tối giản

Tuần 2: JavaScript cơ bản¶

Bạn sẽ học¶

JavaScript cơ bản

Các nội dung cơ bản như: variables (biến), loops (vòng lặp), functions (hàm), và arrays (chuỗi).
Tìm hiểu về các chức năng ES6 như let, const, và arrow functions.
DOM manipulation

Nguồn tài nguyên học¶

Học từ đầu trong 30 ngày thông qua khóa 30-Days-Of-JavaScript. Sau đó bạn có thể đọc thêm: 33 Concepts Every JavaScript Developer Should Know (Nếu bạn mới học hoàn toàn thì có thể những kiến thức này sẽ khiến bạn thấy ngợp, bạn sẽ còn học lâu dài nên chỉ đọc tham khảo qua cũng được). Nếu bạn thích học thêm thì học khóa JavaScript nâng cao của F8.

Làm bài tập luyện tập¶

Có thể lên một số trang như Exercism để luyện tập lập trình. Có thể thử đọc Tổng hợp bài tập JavaScript có code mẫu

Luyện tập DOM Manipulation thông qua Bài tập về DOM

Tuần 3: Backend (Phần 1)¶

Thường mình thấy trong các khóa học hoặc chương trình khác thì mọi người thường hay cho học Frontend trước. Chương trình này sẽ lựa chọn Backend để khởi đầu trước. Lý do là Backend cung cấp các kiến thức cốt lõi như cơ sở dữ liệu, hệ thống, thuật toán, mạng .v.v.. – những yếu tố quan trọng giúp bạn hiểu cách một ứng dụng web hoạt động từ bên trong.

Trích từ một bình luận của một vozer khác trên Thread Fullstack của tôi (Thanks bác, lộ trình này sẽ học Backend trước rồi mới học Frontend):

mình nghĩ nên bắt đầu từ BE trước, nắm vững các kiến thức cơ bản về DB, OOP, thuật toán, mạng, Linux,... rồi học liên quan đến setup, build web trên server qua Docker, VPS,... sau đấy mới move dần qua FE. Bắt đầu từ SSR để làm quen với HTML, CSS, JS sau đó chuyển qua CSR làm quen với các lib, framework như React, Vue, Angular

Vậy thì bạn cần học gì về Backend?

Bạn sẽ học¶

Kiến thức nền tảng về Internet:
Cách Internet hoạt động, HTTP, DNS, hosting, trình duyệt, client-server.
📖 Fundamentals of Web apps.
JavaScript Runtime Environment & Web Server:
📖 JavaScript runtime environment là gì?
📖 Web Server là gì?
Xây dựng HTTP Server từ đầu:
📖 The HTTP server explained.
Lựa chọn ngôn ngữ Backend:
Bạn có thể chọn JavaScript (Node.js), Ruby, Java, Go, Rust, v.v. (Từ tuần này bạn có thể bắt đầu học luôn hoặc để sang tuần sau và tuần này tập trung học những phần siu cơ bản đã được liệt kê ở đây).
📖 Hướng dẫn bắt đầu lập trình từ con số 0.
Hệ thống kiểm soát phiên bản (Git & GitHub):
📺 Từ gà tới pro Git và Github trong 20 phút.
📺 Git and GitHub Crash Course.
Thiết kế API cơ bản:
📖 Learn API Design.

Nguồn tài nguyên học¶

📖 Awesome Lập trình - Tổng hợp tài liệu học lập trình và Khoa học Máy tính bằng tiếng Việt.
Nếu bạn học Rust, tham khảo Hướng dẫn cày Rust.

Đọc thêm¶

Commit Messages - Học cách viết Commit Message mỗi khi thực hiện commit trong Git.
Problem Solving - Giải quyết vấn đề trong lập trình.
Understanding Errors - Hiểu về lỗi trong lập trình (Bài viết này tập trung vào JS, nhưng đọc để hiểu về tư duy về lỗi lập trình khá hay)
Clean Code - Phần lớn thời gian lập trình được dành để đọc Code. Hướng dẫn viết Code dễ đọc.

Tuần 4: Backend (Phần 2)¶

Bạn sẽ học¶

📖 HTTP Basics - Hiểu cách HTTP hoạt động.
📖 Request-Response Cycle - Hiểu vòng đời của một request.
📖 REST APIs - Cách thiết kế API RESTful.

Lựa chọn định hướng¶

Nếu bạn chọn Fullstack JavaScript, học:
📖 Full Stack JavaScript - The Odin Project.
📺 NodeJS & ExpressJS (Khóa học Tiếng Việt của F8).
Ruby on Rails - Ruby on Rails là một framework mạnh mẽ giúp tăng tốc phát triển ứng dụng web:
Java + Spring - Java Spring là một framework phổ biến để xây dựng ứng dụng doanh nghiệp:
Chia sẻ lộ trình tự học đến khi có OFFER FRESHER (Java) đầu tiên
Rust - Rust là một ngôn ngữ lập trình hệ thống hiện đại, tập trung vào hiệu suất và an toàn bộ nhớ.
Hướng dẫn cày Rust
Zero To Production In Rust - An introduction to backend development - Bạn cũng có thể đọc bản Sample đầy đủ của cả sách trên Blog của tác giả

Đọc thêm¶

Tuần 5: NoSQL Databases (MongoDB)¶

Bạn sẽ học¶

Nguồn tài nguyên học¶

Tuần 6: SQL cơ bản¶

Bạn sẽ học¶

📖 Học cú pháp SQL từ SQLBolt.
📖 Thực hiện CRUD operations với MySQL/PostgreSQL.

Nguồn tài nguyên học¶

📖 Fullstack Vỡ Lòng (8 bài viết về MySQL).
📖 CRUD Node.js với MySQL.

Tuần 7: ORMs (Sequelize/Mongoose)¶

Bạn sẽ học¶

📖 Object-Relational Mapping (ORM).
📖 Sequelize cho SQL.
📖 Mongoose cho MongoDB.
📖 Mô hình quan hệ - thực thể (ER Model).

Nguồn tài nguyên học¶

📖 Introduction to Mongoose for MongoDB.

Tuần 8: Lựa chọn Framework Frontend¶

Bạn sẽ học¶

Tìm hiểu về các Framework phổ biến: React, Vue.js, Svelte, Angular.
Đánh giá ưu và nhược điểm của từng Framework.
Xác định mục tiêu cá nhân và nhu cầu thị trường để chọn Framework phù hợp.

Nguồn tài nguyên học¶

Lộ trình học Front-end toàn diện A-Z khoảng 10-12 tháng

Đọc thêm:¶

Ở đây mình chọn React để thêm tài nguyên vì cơ bản ai cũng học =))

Tuần 9: Học Framework đã chọn (Tiếp tục)¶

Sau khi đã đọc và trải nghiệm đôi chút, đồng thời đưa ra quyết định lựa chọn Framework mà mình muốn học, đồng thời đã học cơ bản về nó rồi thì bắt đầu tuần thứ 9!

Bạn sẽ học¶

Cài đặt môi trường phát triển cho Framework.
Cấu trúc dự án và các khái niệm cơ bản: components, state management, routing, v.v.
Xây dựng các ứng dụng nhỏ để thực hành.

Nguồn tài nguyên học¶

React: Học thông qua trang chủ của React
Vue.js: Hướng dẫn chính thức của Vue.js
Svelte: Tutorial của Svelte
Angular: Tour of Heroes - Angular

Tuần 10: TypeScript cơ bản¶

Bạn sẽ học¶

Học TypeScript syntax và static typing: Cú pháp TypeScript và typing cơ bản.
Tích hợp TypeScript vào Framework đã chọn.
Tìm hiểu về type declarations cho APIs và models.

Nguồn tài nguyên học¶

Tuần 11: Next.js cơ bản¶

Phần này đang sửa... (vì mình đang học)

Bạn sẽ học¶

Học server-side rendering (SSR) và static site generation (SSG) - Hoặc đọc Thread trên StackOverflow về chủ đề này.
Xây dựng ứng dụng thân thiện với SEO (SEO-friendly).
State management: Redux, Vuex, Svelte Store, Angular Services.
Công cụ hỗ trợ: DevTools, linters, formatters.
Tích hợp với API: fetch, axios.

Nguồn tài nguyên học¶

Tuần 12: Monorepos và Turborepo¶

Bạn sẽ học¶

Học monorepos và tìm hiểu cách sắp xếp nhiều dự án khác nhau (?).
Sử dụng Turborepo để tối ưu performance.

Nguồn tài nguyên học¶

Tuần 13: Websockets & RTC cơ bản¶

Bạn sẽ học¶

Học Giao tiếp thời gian thực với Websockets.
Học RTC cho video/audio communication.

Nguồn tài nguyên học¶

Tuần 14: Testing cơ bản¶

Bạn sẽ học¶

Học unit và integration testing:
Sự khác nhau giữa Unit, Integration và Functional Testing
What's the difference between unit tests and integration tests?
Sử dụng Jest và React Testing Library (Nếu bạn chọn học React ở trên, cá nhân mình không học nên sẽ bổ sung phần này sau)
Test APIs và các frontend components.
Sơ lược về API Testing
Học cách test API đơn giản và dễ dàng trong 10 phút

Nguồn tài nguyên học¶

API Testing With Postman - Khóa này bằng Tiếng Việt.
Postman Beginner's Course - API Testing

Tuần 15: Authentication & JWT¶

Bạn sẽ học¶

Tìm hiểu về khái niệm xác thực người dùng Authentication và phân biệt sự khác nhau giữa Authentication và Authorization
Sử dụng JWT (JSON Web Token) và cookies cho session management:
JWT và Session một số thông tin bạn nên biết
JWT – JSON Web Tokens và Session Cookies trong việc Authentication
JSON Web Token hay Session Cookies, đâu mới là chân ái ?
Lưu JWT trong cookie hay local storage?

Nguồn tài nguyên học¶

Session, cookie, CORS, JWT, SSO - Danh sách phát của F8

Tuần 16: Tối ưu cơ sở dữ liệu¶

Bạn sẽ học¶

Tìm hiểu về kĩ thuật tối ưu cơ sở dữ liệu (database optimization techniques). Ví dụ như indexing, query optimization .etc.

Nguồn tài nguyên học¶

Tuần 17: Khái niệm Backend nâng cao¶

Bạn sẽ học¶

Học thêm về asynchronous programming và error handling (Lưu ý cho ai chưa biết thì hai khái niệm này không chỉ giới hạn trong JavaScript).
Học middleware chaining - Theo mình tìm hiểu thì khái niệm này chỉ giới hạn trong Express.js. Đọc bài 'Express Middleware' is just a fancy way of chaining a bunch of functions.
Các khái niệm Backend "cao cấp hơn":

Cập nhật dự án của bạn¶

Viết API và có thêm những tính năng nâng cao như rate limiting và complex queries:
API Rate Limiting là gì và một số thuật toán hay dùng
What does it mean to be able to write "complex" SQL queries?

Nguồn tài nguyên học¶

Tuần 18: Ref, Populate, và API Design¶

Đang trong quá trình thêm

Tuần 19: Các chức năng Frontend nâng cao¶

Bạn sẽ học¶

Học dynamic form handling, animations, và accessibility features trong React.
Tìm hiểu về Framer Motion cho animations.

Tuần 20: Project Planning¶

Bạn sẽ học¶

Lên kế hoạch cho một capstone project (Dự án tốt nghiệp)
Định nghĩa các tính năng, Tạo high-level (HLD) và low-level designs (LLD)

Ghi chú¶

Đây sẽ là một dự án (tương đối) lớn. Trước khi bắt tay vào làm dự án này, bạn nên hoàn thành một số các dự án cỡ nhỏ và vừa. Bạn có thể xem Những DỰ ÁN CÁ NHÂN nên làm khi TỰ HỌC lập trình của ông Dev để tìm hiểu thêm.

Nếu bạn vẫn chưa biết bắt đầu từ đâu để phát triển một ứng dụng nhỏ, hãy đọc Hướng dẫn lên kế hoạch cho một dự án lập trình

Tuần 21: Capstone Backend Development¶

Sau khoảng một tuần lập kế hoạch và học thêm một số các khái niệm liên quan đến HLD và LLD, bây giờ sẽ là lúc bắt đầu.

Bạn sẽ làm¶

Xây dựng phần Backend cho dự án tốt nghiệp của bạn.
Implement CRUD APIs, authentication, và error handling.

Tuần 22: Capstone Frontend Development¶

Bạn sẽ làm¶

Xây dựng Frontend cho dự án tốt nghiệp của bạn.
Có thể sử dụng React/Next.js với Tailwind CSS.

Tuần 23: Real-Time Features trong Capstone¶

Bạn sẽ học¶

Thêm những tính năng real-time sử dụng Websockets hoặc RTC.
Implement live chat hoặc real-time notifications

Tuần 24: Testing và Deployment¶

Bạn sẽ học¶

Test ứng dụng
Deploy lên một nền tảng cloud (e.g., Vercel, Heroku)

Nguồn tài nguyên học¶

Tuần 25: Linting và Performance Optimization¶

Bạn sẽ học¶

Thiết lập các công cụ Linting (e.g., ESLint, Prettier).
Tối ưu performance cho cả Backend và Frontend.
Học về caching strategies

Đọc thêm¶

Tuần 26: Final Enhancements & Portfolio¶

Thêm thắt chỉnh sửa đôi chút cho dự án tốt nghiệp

Đặc biệt chút¶

Thêm dự án vào trang Portfolio của bản thân.
Chuẩn bị đi phỏng vấn với dự án đó, và một resume nữa.
Tạo một portfolio cá nhân sử dụng Next.js.
Showcase tất cả 10 dự án trong portfolio của bạn.

Sau khi hoàn thành¶

Sau khi bạn hoàn thành xong 26 tuần này, sẽ còn rất nhiều thứ nữa bạn (cần) nên học để có thể cải thiện hơn nữa sản phẩm của bạn. Dưới đây là một số gợi ý (Chưa được cập nhật hết):

Học hết chương trình Khoa học máy tính
Học Quy trình phát triển phần mềm - Khi đi làm thì sẽ thường dùng Agile/Scrum. Xem Scrum cơ bản - Quy trình phát triển phần mềm