CSS-CSS3


Home / Tài liệu CNTT / CSS-CSS3 / Lộ trình học thiết kế Web hiệu quả cho người mới bắt đầu

Lộ trình học thiết kế Web hiệu quả cho người mới bắt đầu

Phương pháp học lập trình web hiệu quả cho người mới bắt đầu

Sau nhiều lần chia sẻ các dự án thi mình nhận được nhiều inbox nói về chia sẻ định hướng và phương pháp học lập trình web hiệu quả nên hôm nay mình viết bài này chia sẻ về cách học hiệu quả mà mình đã áp dụng.

GIAI ĐOẠN BẮT ĐẦU (HTML, CSS, JS)

Đây là giai đoạn khá quan trọng khi mới bắt đầu học lập trình web.

Tìm môi trường học tập. Học có phí có thể chia làm 2 dạng:

Trung tâm: Thường thì khoá học ở trung tâm sẽ có học phí cao hơn, nhưng cũng sẽ có nhiều quyền lợi hơn. Ví dụ như hết mỗi buổi học sẽ có những bài tập về nhà, có mentor support tận răng và cuối khoá sẽ làm một vài dự án giúp lên trình

Khoá học trả phí online: Học trả phí online thì có lộ trình rõ ràng hơn so với tự học miễn phí và tiện vì sẽ sắp xếp thời gian học tốt hơn, có join vào box chat để được support, và trên hết là đã tốn tiền rồi nên dù ngồi nhà lười vẫn sẽ cố học.

Nếu không có tài chính thì tất nhiên sẽ phải tìm đến học miễn phí, nhiều kênh youtube như F8 làm những tutorial dạy html, css, js miễn phí, nhưng cũng dễ rơi vào tình trạng như mất định hướng, lạc vào tutorial hell hoặc là mất gốc.

Tài liệu miễn phí:

ĐỂ HỌC HTML CSS JS HIỆU QUẢ THÌ

Tập clone giao diện với html css thuần

Tìm thêm những bài tập thuật toán với js, giúp luyện tư duy và hiểu rõ hơn về những concept trong js
Khi đã thấy ổn với việc clone những trang cơ bản như trang tin tức v.v. thì nên nghiên cứu thêm về firebase, một platform của google hỗ trợ tạo auth và database, khi đó vừa có thể hình dung được một web app hoàn chỉnh sẽ như thế nào và cũng có thể luyện thêm skill js.

HỌC BOOTSTRAP HAY TAILWIND?

Câu trả lời là: học chắc css thuần → bootstrap → tailwind

CSS thuần rất quan trọng, học được chắc css thuần thì sẽ giúp hiểu được cách xử lí những giao diện phức tạp và hiểu được những thư viện nó làm gì ở phía sau

Khi đã nắm chắc css thuần rồi thì có thể dùng bootstrap để build giao diện đẹp hơn, rút ngắn thời gian style và trong lúc đó có thể tập trung vào chức năng chính của web bằng js

Tailwind thì không đi kèm những component có sẵn nên là phụ thuộc vào khả năng tự design, mắt thẩm mĩ khá nhiều và có thể quên mất những syntax css thuần. Do đó không nên dùng tailwind quá sớm

GIAI ĐOẠN HỌC REACT

React thì không thể phủ nhận là library cần học nhất khi làm frontend. Nhưng để học react hiệu quả thì trước hết vẫn cần học chắc js, không để bị rơi vào tình trạng “I have learned react, I still don’t know javascript”

Nên mua một khoá học react để có một lộ trình rõ ràng, dạy đủ thứ của react từ cơ bản lên nâng cao.

Nếu không có tiền mua khoá học thì đầu tiên có thể lên youtube tìm với từ khoá như “react full course”, “react crash course” v.v. Sau đó tìm hiểu những tutorial về chủ đề nhỏ. Ví dụ như form, state management, … Những kiến thức nhỏ này có thể tích luỹ thêm hằng ngày và qua việc làm dự án

Khi học tất nhiên cần làm dự án rất nhiều: những dự án todo list, dự án web phim gọi api, v.v.
Khi đã nắm rõ được react cơ bản rồi, có thể học mern stack song song để có thể hiểu thêm về nodejs xem server được build như thế nào.

Một dự án rất hay nếu học mern stack là làm google form clone, dự án này có thể áp dụng được rất nhiều những kiến thức trong react và mern như: auth, form, api call, thao tác với state v.v.

NÊN LÀM DỰ ÁN NHƯ THẾ NÀO?

Dự án là điều tất yếu để nâng cao trình độ và đưa vào portfolio xin việc, vậy làm dự án thế nào cho tốt?
Khi học html css js: Clone những trang tin tức như vnexpress, quantrimang v.v. những trang web này không có giao diện quá phức tạp nhưng cũng có những element như navbar, search v.v. thậm chí có thể dùng firebase để nhúng auth và db vào để làm chức năng comment

Khi học react:

Làm dự án dùng API về chủ đề mình thích, tận dụng những api có sẵn mà sau đó mình có thể sử dụng luôn web đó (web xem phim, nhạc, đọc truyện, …)

Làm những dự án có logic khá phức tạp như game connect four, chess, v.v.

Những dự án “fullstack” phức tạp như: realtime chat app, facebook clone, …

Không nên làm những dự án như ecommerce bởi vì nó sẽ dễ gây nhàm chán, dễ bỏ dở giữa chừng, không hiệu quả

Có thể tập làm những thư viện để publish lên npm, hoặc tìm hiểu viết extension cho vscode.

Khi làm xong một dự án nào đó nên share cho người quen hoặc đăng lên những cộng đồng lập trình để vừa được góp ý sửa lỗi vừa nhận được những lời khen và nhờ đó có động lực làm những dự án khác

CẢI THIỆN TIẾNG ANH

Tiếng anh là một yếu tố quan trọng khi học lập trình, có thể với html, css, js hoặc library phổ biến như react, sẽ có những tài liệu và tutorial tiếng việt, nhưng để học nhanh và học những công nghệ mới thì tiếng anh là tất yếu
Mới đầu khi nghe video trên youtube có vẻ nhanh và khó hiểu thì có thể giảm speed và bật phụ đề, qua vài tháng sẽ quen dần và nghe tiếng anh tốt hơn

Luyện đọc blog tiếng anh hằng ngày để luyện thêm khả năng đọc.

Đọc docs của thư viện.

Một số tài liệu miễn phí:

KHI HỌC THÊM MỘT THƯ VIỆN MỚI

Khi đã nắm chắc nền tảng react rồi thì việc học những framework khác như vue, svelte sẽ khá đơn đơn giản
Chỉ cần tìm một video “crash course” khoảng 3 tiếng trên youtube. Và phải luôn mở text editor để code theo với video

Khi đã nắm được những syntax cơ bản cần thiết rồi, hãy tự làm một dự án khác với framework đó và mở docs của nó ngay bên cạnh để search khi cần

Cách làm này sẽ giúp ta nhớ syntax và kiến thức mỗi khi học cái mới khá nhanh gọn

NHỮNG PHƯƠNG PHÁP KHÁC ĐỂ BỔ SUNG KIẾN THỨC MỖI NGÀY

Đọc code người khác: Mỗi khi có một người ở cộng đồng chia sẻ những dự án hay thì nên vào source code và đọc code người đó, nhờ đó sẽ học được thêm về folder structure, clean code, v.v.

Đọc blog về công nghệ thường xuyên: dailydotdev là một trang tổng hợp những bài blog chất lượng của developer trên khắp thế giới, chăm chỉ đọc blog sẽ giúp cập nhật công nghệ thường xuyên, học thêm được những tips and tricks khác.

KẾT LUẬN

Và đó là những phương pháp học lập trình web hiệu quả mà e đã rút ra qua thời gian dài học lập trình web, bài viết sẽ còn nhiều thiếu sót mong nhận được những góp ý để sửa đổi thêm.

Nguyễn Phong (Cộng đồng Front-end(HTML/CSS/JS) Việt Nam)

Mục Lục