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ó để giỏi được. 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. Trong bài này mình sẽ nói về lộ trình học Front-end trước, lộ trình học backend mình sẽ nói ở 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.

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é. 

Gợi ý khóa học: đang cập nhật

Tài liệu:

  • Xem các series HTMLCSS tại freetuts.
  • Xem trên W3C: https://www.w3schools.com/css/ và https://www.w3schools.com/html/

2/ Học Javascript căn bản

Sau khi bạn đã nắm vững HTML và CSS thì nhiệm vụ bây giờ là bạn phải học Javascript. Bạn nên nhớ rằng Javascript rất quan trọng khi bạn theo lĩnh vực lập trình web nói chung và mảng frontend nói riêng nhé. Bước này bạn cần nắm vững kỹ thuật lập trình Javascript căn bản, hiểu được quy trình hoạt động của Javascript trong một trang HTML, cuối cùng là vận dụng nó để xử lý hành động trên website.

Javascript sẽ giúp bạn tạo một trang web có nhiều hiệu ứng hơn. Ví dụ tại freetuts bạn thấy các hai hiệu ứng scroll to topscroll to bottom chính là kết quả của Javascript.

Gợi ý khóa học:  Bạn nên học khóa học Javascript từ đầu của FEDU nhé, khóa này dành cho người mới tìm hiểu lập trình Javascript.Trong khóa này bạn sẽ được học các kỹ thuật lập trình từ đầu như biến là gì? khai báo biến như thế nào? Cách sử dụng mệnh đề rẻ nhánh, vòng lặp ... nói chung là bạn sẽ nắm vững JS căn bản sau khi học xong khóa học này.

Tài liệu: Xem các series Javascript tại freetuts.

3/ Học jQuery

jQuery là một thư viện được viết bằng Javascript, điểm mạnh của nó là giúp bạn rút gọn chương trình Javascript. Nếu bạn đã học xong phần 2 thì bạn sẽ thấy khi thao tác với DOM bằng JS thì rất rườm rà, cú pháp dài dòng nên nhìn vào chương trình rất là rối, vì vậy việc sử dụng jQuery là rất cần thiết.

jQuery xử lý hiệu ứng rất mạnh, thư viện của nó rất ít thay đổi cú pháp nên bạn học một lần là sử dụng vĩnh viễn ;) Một điểm quan trọng nữa là hầu hết các plugin hiệu ứng hiện nay đều được viết bằng jQuery. Ví dụ các hiệu slide, tab, scroll 90% được viết bằng jQuery. Như vậy jQuery rất quan trọng khi bạn làm việc với Front-end.

Gợi ý khóa học: Bạn nên học khóa học jQuery từ căn bản đến nâng cao của anh Việt. Đây là khóa học jQuery dành cho người mới bắt đầu, điều kiện là bạn phải biết 2 phần trên nhé.

Tài liệu: Xem các series jquery tại freetuts.

4/ Học Bootstrap / CSS framework

Có bao giờ bạn nghe tới khái niệm responsive chưa? Chắc chắn là có rồi phải không nào? Và bạn cũng 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 :)

Bạn cũng có thể chọn một CSS Framework khác như Foundationflexbox.

Khóa học gợi ý: Hiện có hai khóa học cho bạn, một khóa cơ bản và một khóa nâng cao.

Nếu bạn không có điều kiện thì có thể mua từng khóa riêng lẻ, nhưng nếu có điều kiện thì nên mua combo 2 khóa cùng một lúc để tiết kiệm thêm vài chục ngàn :)

Tài liệu:

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.

Khóa học gợi ý: Hiện chưa có

Tài liệu: Xem các series GITSASS.

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, Vue 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.

Khóa học gợi ý: hiện chưa có

Tài liệu: Xem series ES6.

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đị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ư: 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ế, tuy nhiên mình cũng biết được một khóa chi phí rẻ nhưng chất lượng cũng rất ok.

Gợi ý khóa học: Bạn có thể học khóa React js và Redux.

Học VuejS, Angular ... những chủ đề này mình chưa tìm được khóa học chất lượng.

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é ;)

Khóa học gợi ý: Hiện chưa có

Học VueJS

VueJS được nổi lên nhờ nó đi kèm với Laravel, đây được xem là một cặp bài trùng rất mạnh mẽ.

Khóa học gợi ý: Hiện chưa có

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.