Lộ trình tự học lập trình web từ con số 0 cực chuẩn năm 2020 cho anh em

Chào anh em ZolaChat, Thấm thoát chúng ta đã bước qua nửa cuối năm 2020. Tình hình dịch bệnh Covid-19 vẫn đang diễn biến phức tạp, lệnh giãn cách xã hội khiến hầu hết anh em sinh viên và người đi làm phải ôm máy tính ở nhà, học trực tuyến qua Zoom hay họp hành qua Google Meet suốt cả ngày. Nhưng nhìn ở góc độ tích cực, đây lại là "thời điểm vàng" để chúng ta nâng cấp bản thân. Dạo gần đây trên box it_qa, mình nhận được rất nhiều tin nhắn hỏi về việc: "Bắt đầu từ con số 0 thì nên học lập trình web như thế nào?" hay "Học gì để có thể đi làm ngay trong năm tới?". Hôm nay, với kinh nghiệm của một người đi trước, mình xin chia sẻ một lộ trình tự học lập trình web cực kỳ chi tiết, thực tế và hoàn toàn phù hợp với bối cảnh năm 2020 này. Hy vọng sẽ giúp ích cho anh em có thêm định hướng rõ ràng. Bước 1: Nền móng vững chắc với bộ ba HTML5, CSS3 và JavaScript (Vanilla JS) Đừng vội vàng nhảy vào các framework hoành tráng ngay. Hãy bắt đầu với những thứ cơ bản nhất. Đây là khung xương, da thịt và hệ thần kinh của một trang web. • HTML5 (HyperText Markup Language): Giúp định dạng cấu trúc của trang web (tiêu đề, đoạn văn, hình ảnh, liên kết). Bạn chỉ cần mất khoảng 3 đến 5 ngày là có thể nắm vững các thẻ cơ bản. • CSS3 (Cascading Style Sheets): Giúp trang trí, tô màu, căn chỉnh bố cục cho đẹp mắt. Hãy tập trung học kỹ về Flexbox và CSS Grid, hai công cụ cực kỳ mạnh mẽ để chia bố cục web hiện nay. • JavaScript (JS): Đây là linh hồn giúp trang web tương tác. Đừng chỉ học qua loa. Hãy hiểu rõ về biến, hàm, mảng, vòng lặp, và đặc biệt là DOM manipulation (cách dùng JS để thay đổi HTML/CSS). Công cụ khuyên dùng: Chỉ cần một chiếc máy tính chạy Windows 10 cấu hình trung bình, cài đặt trình soạn thảo mã nguồn miễn phí VS Code (Visual Studio Code) và trình duyệt Google Chrome là bạn đã có thể bắt đầu chiến được rồi. Bước 2: Học cách làm giao diện Responsive và sử dụng CSS Framework Năm 2020 rồi, người dùng lướt web bằng điện thoại Android giá rẻ hay iPhone nhiều hơn máy tính rất nhiều. Do đó, giao diện web của bạn bắt buộc phải hiển thị đẹp mắt trên mọi kích thước màn hình (Responsive Design). Sau khi đã tự tay viết CSS thuần thuần thục, bạn nên học thêm một CSS Framework để tăng tốc độ làm việc: • Bootstrap 4: Vẫn là ông vua phổ biến nhất hiện tại, dễ học, nhiều component có sẵn. • Tailwind CSS: Một cái tên đang nổi lên rất mạnh mẽ trong năm 2020 nhờ tư duy utility-first cực kỳ linh hoạt. Anh em rất nên trải nghiệm thử. Bước 3: Thực hành qua các dự án thực tế (Pet Projects) - Học đi đôi với hành "Cách học lập trình nhanh nhất không phải là đọc hết cuốn sách lý thuyết, mà là tự tay code một cái gì đó hoạt động được." Thay vì làm những bài tập tính toán tẻ nhạt, tại sao bạn không thử tự làm những dự án thực tế, gần gũi với cuộc sống? Ví dụ, trong mùa dịch này, nhu cầu kết nối online tăng đột biến. Thay vì ngồi lướt mạng tìm cách tìm ny, hay đăng ký dịch vụ tại các trung tâm mai mối ở sài gòn (vốn đang phải tạm đóng cửa vì giãn cách xã hội), tại sao anh em không tự tay xây dựng một sản phẩm hẹn hò cho riêng mình? Dưới đây là một vài ý tưởng dự án từ dễ đến khó để anh em thực hành: • Dự án 1 (Dễ): Một trang web giới thiệu bản thân (Portfolio) thật ngầu để sau này đi xin việc. • Dự án 2 (Trung bình): Thiết kế giao diện một web ghép đôi đơn giản. Bạn có thể dùng HTML/CSS để tạo giao diện hiển thị thông tin, sở thích của hai người, kèm theo một nút bấm "Ghép đôi ngẫu nhiên" viết bằng JavaScript để hiển thị kết quả ngẫu nhiên đầy thú vị. • Dự án 3 (Khó): Một web call video với người la sử dụng công nghệ WebRTC kết hợp với Socket.io. Mùa dịch này ai cũng cô đơn, một ứng dụng cho phép mọi người gọi video nói chuyện trực tiếp với nhau chắc chắn sẽ là một điểm cộng cực lớn trong CV của bạn khi đi xin việc. • Dự án 4 (Nâng cao): Phát triển ý tưởng trên thành một app ghép cặp đôi chạy mượt mà trên nền tảng web di động. Bạn có thể tích hợp thêm tính năng nhắn tin thời gian thực (real-time chat). Bước 4: Nâng cấp lên Frontend Framework (ReactJS hoặc VueJS) Khi các dự án của bạn ngày càng lớn, việc quản lý code bằng JavaScript thuần sẽ trở nên cực kỳ phức tạp. Đây là lúc bạn cần đến các thư viện/framework hiện đại. Trong năm 2020, thị trường việc làm tại Việt Nam đang cực kỳ khát nhân lực ở hai mảng này: • ReactJS: Thư viện do Facebook phát triển, cực kỳ phổ biến. Với sự ra đời của React Hooks ở các phiên bản gần đây, việc code React đã trở nên dễ tiếp cận và gọn gàng hơn rất nhiều. • VueJS: Rất dễ học, tài liệu cực kỳ thân thiện với người mới bắt đầu. Phù hợp cho các dự án vừa và nhỏ. Lời khuyên của mình là chọn một trong hai và học thật sâu, đừng học cả hai cùng lúc kẻo tẩu hỏa nhập ma nhé anh em. Bước 5: Trang bị kiến thức Backend cơ bản và Git Để trở thành một lập trình viên web thực thụ, bạn không thể không biết về cách hệ thống vận hành phía sau (Backend). Bạn cần hiểu cách Web Server hoạt động, cách kết nối cơ sở dữ liệu (Database) và xây dựng API. • NodeJS (ExpressJS): Lựa chọn tuyệt vời vì nó sử dụng chính ngôn ngữ JavaScript mà bạn đã học ở Frontend. Học một ngôn ngữ nhưng làm được cả hai đầu, quá tiết kiệm thời gian! • Cơ sở dữ liệu: Hãy bắt đầu với MongoDB (NoSQL) hoặc MySQL (SQL). • Git & GitHub: Đây là công cụ quản lý mã nguồn bắt buộc phải biết. Hãy tập thói quen đẩy code lên GitHub mỗi ngày bằng các câu lệnh cơ bản:

git init
git add .
git commit -m "First commit"
git push origin master

Tài nguyên tự học miễn phí chất lượng trong năm 2020 Hiện tại có rất nhiều nguồn học miễn phí cực kỳ chất lượng mà không cần phải tốn hàng chục triệu đồng vào các trung tâm: • Kênh Youtube F8 (Sơn Đặng): Kênh học lập trình web bằng tiếng Việt cực kỳ tâm huyết và chi tiết cho người mới bắt đầu. • FreeCodeCamp: Trang web học lập trình thực hành qua bài tập tương tác bằng tiếng Anh rất nổi tiếng. • Javascript.info: Cuốn "kinh thánh" về JavaScript từ cơ bản đến nâng cao. Lời kết và thảo luận Tự học lập trình chưa bao giờ là con đường dễ dàng, nhất là trong giai đoạn khó khăn chung của năm 2020 này. Sẽ có những ngày bạn ngồi hàng giờ chỉ để sửa một lỗi cú pháp nhỏ, hay những đêm thức trắng để tìm hiểu tại sao code không chạy. Nhưng cảm giác khi thấy sản phẩm của mình hoạt động, hay khi tự tay làm được một trang web hoàn chỉnh, nó sướng vô cùng anh em ạ! Anh em trên diễn đàn mình có ai đang tự học trong mùa dịch này không? Anh em đang học đến bước nào rồi và có gặp khó khăn gì ở phần kết nối cơ sở dữ liệu hay WebRTC không? Hãy cùng comment thảo luận bên dưới để cùng nhau tiến bộ nhé! Chúc anh em giữ gìn sức khỏe và học tập thật tốt!