Front end và lộ trình học lập trình Front end

Những bạn đ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 với lộ trình hoc front end – lo trinh hoc front end – lap trinh vien – code html – front end la gi

Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi thứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript được điều khiển bởi trình duyệt máy tính của bạn.

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

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 top và scroll to bottom chính là kết quả của Javascript.

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. cho front end

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.

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. – code front end la gi

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ư Foundation, flexbox.

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.

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 – lap trinh vien đơ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. code front end la gi

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. – lo trinh hoc front end

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. – code front end la gi

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). – lap trinh vien . 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.

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é – lo trinh hoc front end

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. – lap trinh vien

Như vậy sơ lược lộ trình tự học lập trình front end tại nhà, lộ trình này, 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.