[Tin tức] Tổng hợp Full Lộ Trình và các Công Nghệ Web nên học năm 2024

Nay là đầu năm 2024, nhiều bạn quan tâm đến việc học lập trình web, nên mình làm vlog chia sẻ lộ trình học lập trình web, phân biệt front-end/back-end, và các công nghệ web nên học trong năm 2024 luôn nhé.

Đăng ký khoá học AI tại:

Nhớ subscribe cho mình nhe:
Mua sách ủng hộ mình:

Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer – lập trình viên thứ thiệt.
Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 hàng tuần nha!

Timestamp
00:00 – Giới thiệu vlog
00:50 – Phân loại front-end, back-end, full-stack developer
02:25 – Công nghệ, lộ trình học và làm front-end
03:20 – Nâng cao: các CSS framework phổ biến
04:28 – Các JS Framework phổ biến như ReactJS, Angular, VueJS
05:40 – Deploy code front-end ở đâu
06:26 – Công nghệ, lộ trình học và làm back-end
07:40 – Các ngôn ngữ/framework để làm web back-end
08:45 – Dăm ba loại Database và Message Queue
10:10 – Phân biết Rest và GraphQL
11:00 – Code back-end xong deploy ở đâu
11:56 – Metaframework như NuxtJS, NextJS
12:40 – Tại sao nên học và dùng Meta-framework
14:40 – Các công nghệ web khác
15:35 – Một số tool phổ biến anh em nên biết

Ghé thăm mình tại:
Blog:
Fanpage:

==== Nội dung slide ====
Lập Trình Web Năm 2024 có gì Hot?
Tổng quan lộ trình học, công nghệ sử dụng

Clip này có gì hot?
Phân loại
01 Công nghệ front-end
02 Công nghệ back-end
03 Các mảng khác và tool

Dăm ba loại Web Developer
Front-end
Back-end
Lưu trữ và xử lý dữ liệu, code API
Fullstack
Ôm cả front-end lẫn back-end, gì cũng chơi
Code giao diện và interaction

Công nghệ, lộ trình làm front-end

Làm giao diện (UI) và tương tác (UX)
Cắt HTML/CSS từ Photoshop/Figma
Code giao diện, animation, chuyển trang
Gửi/nhận dữ liệu tới server, làm việc với back-end

(Những cái người dùng thấy)
Làm front-end là làm gì?

Bộ 3 front-end nhập môn
(học trên kênh Code Dạo)
Thêm chức năng, tương tác cho web
HTML – Xương sườn cấu tạo trang web
CSS – Mông má style cho trang web đẹp lên
JavaScript

Nâng cao: CSS Framework
Bootstrap – Ngon, bổ, rẻ, phổ biến
Tailwind CSS – Mới mẻ, phá cách
Bulma – Mới mẻ, gọn nhẹ, dễ dùng
Materialize – Phong cách Material UI

Nâng cao: JS Framework
React – Ngon, phổ biến, tài liệu nhiều
Angular – Dài dòng, code ổn, có cấu trúc
Vue – Mới lạ, nhiều cái hay, tài liệu sida
Svelte – Mới, có tiềm năng, khá phổ biến

Bonus: Code front-end deploy ở đâu?
Github Pages
Netlify
Vercel
Cloudflare Pages

Công nghệ, lộ trình làm back-end
Làm back-end là làm gì?
Bảo mật, lưu trữ, xử lý dữ liệu dưới database
Quản lý, phân quyền (đăng nhập, đăng ký)
Gửi/nhận dữ liệu từ front-end qua API
(Người dùng không thấy)

Các ngôn ngữ/framework để làm back-end
PHP
C#
Java
Ruby
Python
JavaScript
Kotlin
Rust
Golang

Framework
ASP.NET MVC
Spring/Struts
Laravel/Symfony
Flash/Django
Express/Koa
Ruby on Rails

Dăm ba loại Database
No SQL
SQL
PostgreSQL
Microsoft SQL Server
MySQL/MariaDB
Amazon RDS/Azure SQL
MongoDB
CouchDB
DynamoDB
Redis (Cache)
Nâng cao: Message Queue
RabbitMQ
Kafka
Amazon SQS
Azure Service Bus

REST vs GraphQL
REST API
Mỗi endpoint là 1 URL
Phổ biến, nhiều document, best practice
Dễ code, nhiều framework hỗ trợ

GraphQL
Dùng 1 endpoint duy nhất, có docs sẵn
Chưa phổ biến, back-end hơi khó code
Tiện dụng, tiết kiệm bandwidth

Bonus: Code back-end deploy ở đâu?
Cloud
Digital
Ocean & VPS
PaaS

Meta framework (NextJS, NuxtJS, SvelteKit)

Render trực tiếp ra HTML để SEO tốt hơn
Viết code back-end và front-end chung một project, không cần API
Routing và deploy lên nhiều platform
Tại sao dùng Meta-framework

Công nghệ Web khác + 1 số tool

Một số công nghệ web khác
Static Site Generator
Server Side Rendering
CMS/Site Builder
Meta Frameworks

Bonus – Một số tool khác (học trên kênh Code Dạo)
Chrome Dev Tool
AI hỗ trợ viết code nhanh hơn
Ứng dụng LLM vào thực tế
Chrome Dev Tool