Lộ trình học lập trình Front-end từ đầu cho người mới
Mình biết lập trình là nghề rất HOT trong mắt các bạn học sinh cấp trung học phổ thông, và các bạn sẽ đăng ký học lập trình vào các trường cao đẳng - đại học công nghệ thông tin, lúc này các bạn được đào tạo bài bản nên trong tương lai sẽ trở thành một lập trình viên giỏi là điều hiển nhiên.
Nhưng với những bạn mất gốc, hoặc những bạn ngoại đạo đam mê lập trình thì đa số là tự học nên rất khó nắm bắt được cốt lõi. Lý do lớn nhất là các bạn không có một lộ trình học cụ thể, và vì không có lộ trình nên dẫn tới học chán nản, cuối cùng dẫn đến mất phương hướng.
Vậy thì trong bài này mình sẽ giúp bạn có một phương hướng rõ ràng hơn. Và sẽ lộ trình học Front-end trước, lộ trình học backend mình sẽ trình bày ở một bài khác nhé. Sau đây là lộ trình học Frontend và các khóa học cần thiết cho từng bước trong lộ trình.
1/ Học HTML & CSS
Bước đầu tiên bạn cần phải học HTML&CSS, đây là hai ngôn ngữ phía client giúp bạn tạo giao diện của website. Thường thì bạn sẽ nhận một file thiết kế bằng Photoshop (PSD), sau đó bạn sẽ cắt chúng ra thành một file .html
và kết hợp với CSS để tạo ra giao diện y hệt như file PSD.
Bài viết này được đăng tại [free tuts .net]
- Khi bạn xây một căn nhà thì cần các vật liệu như: gạch, xi măng, cát, .. thì HTML chính là các vật liệu đó.
- Khi bạn sử dụng sơn, đồ trang trí nội thất để trang trí giúp căn nhà đẹp hơn thì nó giống như là CSS.
Như vậy HTML sẽ giúp hiển thị dữ liệu ở mức đơn sơ, còn CSS sẽ giúp trang web hiển thị đẹp và lộng lẫy hơn. Kết quả của bước này bạn phải nắm vững và cắt được một file PSD sang file HTML nhé.
Tài liệu:
- responsive chưa? Chắc chắn là có rồi phải không nào? Và bạn có thắc mắc là tại sao 3 phần trên mình không nói tới responsive phải không? Nếu vậy thì bạn nên quay lại đầu bài viết mình đã nói đó là quy trình.
Bootstrap là một thư viện CSS dùng để xây dựng giao diện website theo hệ thống grid, nó hoạt động theo cơ chế responsive nên hiển thị tốt trên mọi trình duyệt và thiết bị.
Sử dụng bootstrap có rất nhiều lơi thế như: giúp bạn xây dựng giao diện nhanh hơn, chạy hầu hết trên các thiết bị, cập nhật theo công nghệ mới, những điều này rất khó nếu bạn tự mình thực hiện responsive, riêng check chạy trên mọi thiết bị và trình duyệt thôi cũng bất ổn rồi. Ngoài ra bạn cũng có thể chọn một CSS Framework khác như Foundation, flexbox.
Tài liệu:
- Series responsive căn bản
- https://www.w3schools.com/bootstrap/
- https://www.w3schools.com/bootstrap4/
Khóa học:
5/ Học tool hỗ trợ như SASS, GIT
Nếu bạn vào làm cho các công ty chuyên nghiệp thì có thể họ sẽ bắt bạn sử dụng SASS, còn Git thì mình nghĩ là điều bắt buộc, vì vậy bạn cần học thêm hai công cụ hỗ trợ này nữa. SASS thì được xem như là ngôn ngữ lập trình CSS, bạn cũng có thể sử dụng LESS nhưng SASS thông dụng hơn.
Tài liệu:
- Series GIT và SASS.
- https://www.w3schools.com/sass/
- https://www.w3schools.in/git/intro/
- https://www.tutorialspoint.com/git/index.htm
Khóa học gợi ý: Tham khảo khóa học GIT và SASS
6/ Học ES6
Bây giờ là bước nhảy đánh dấu sự nghiệp của bạn, ban sẽ cần học thêm các Framework JS như React JS hay React Native, Angular, VueJS thì bắt buộc bạn phải tìm hiểu chút về ES6.
Nếu công việc của bạn đơn thuần chỉ là cắt HTML thì bạn chỉ cần học 5 bước ở trên là quá được rồi, nhưng nếu bạn cần học thêm về code frontend chuyên sâu thì cần phải học thêm các framework trên.
Tài liệu:
Khóa học:
- => Khóa học lập trình TypeScript với ES6 (học cả TypeScript và ES6 - 2 trong 1)
7/ Học JS Framework
Nếu bạn hoàn thành 6 bước trên thì quá ok rồi nhé, bạn có thể đi làm ứng tuyển vào vị trí frontend được rồi. Nhưng nếu bạn muốn học nâng cao thì có thể theo dõi bước 7 mà mình sắp trình bày ở đây.
Bước này bạn sẽ học theo yêu cầu của công ty mà bạn đang làm. Ví dụ công ty bạn đòi hỏi bạn phải làm React JS thì bắt buộc bạn phải học nó phải không nào? Hoặc công ty bạn đang sử dụng Angular thì bạn cũng phải học Angular.
Vì vậy bước này mình nghĩ sẽ phụ thuộc vào môi trường và định hướng mà bạn đang làm việc, vì khi học tới bước này bạn đã có đủ kiên thức để quyết định công nghệ mà bản thân cần phải học thêm.
Học React JS
React JS là một thư viện được viết bằng ngôn ngữ Javascript, nó dùng để xây dựng giao diện người dùng (user interface - UI). Nói một cách khác thì nó dùng để xây dựng giao diện phía ngoài của người dùng.
Vì là một thư viện JS dùng tạo UI nên bản thân nó không thể kết nối lên server, vì vậy bạn phải kết hợp một ngôn ngữ khác như PHP, NodeJS, ASP. React JS mới nổi khoảng 2 năm nay nên các khóa học về nó còn hạn chế, chỉ có trên udemy là nhiều nhất.
Tài liệu:
Khóa học:
- => Khóa học React JS kết Redux (bộ đôi hoàn hảo nhất)
Học Angular
Angular là một framework được xây dựng bởi google, nên bạn hoàn toàn yên tâm về sự sống của nó nhé.
Tài liệu:
Khóa học:
Ngoài ra còn rất nhiều Javascript Framework khác như VueJS, Backbone JS, tuy nhiên bạn chỉ cần học React JS và Angular là quá đủ rồi, 2 framework này được sử dụng nhiều nhất tại Việt Nam.
# Giải pháp tiết kiệm cho bạn?
Khi bạn mua riêng lẻ tất cả các khóa học trên thì giá sẽ rất cao, vì vậy tốt nhất bạn nên đầu tư một lần bằng cách mua tất cả trong một combo luôn, giá sẽ nhẹ hơn rất nhiều.
- => Combo khóa học theo lộ trình frontend (10 khóa)
- => Combo 5 khóa học frontend (html/ css, js, jquery, bootstrap, html5)
Hoặc bạn cũng có thể tự tạo combo cho mình qua link dưới đây.
- => Tự tạo combo
Như vậy mình đã giới thiệu sơ lược lộ trình tự học lập trình frontend tại nhà, lộ trình này theo cá nhân mình thấy rất hay, bạn sẽ học từng bước nên kiến thức ban nắm là quá vững chắc, không có sự nhảy vọt và lỗ hổng. Lỗ hổng tức là bạn khuyết đi một phần kiến thức nào đó. Ví dụ bạn không rành CSS mà bạn sử dụng bootstrap thì trong quá trình làm việc bạn sẽ gặp khó khăn trong việc đưa ra giải pháp giải quyết một vấn đềmà bootstrap không làm được.
Review