Lộ trình để trở thành lập trình viên Front end 2018

Front end • 19/07/2018 • 85 Lượt xem

Phần front-end của một trang web được hiểu 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.

Phần front-end của một trang web được hiểu 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.

1.HTML

HTML là thứ cung cấp cấu trúc cho các trang của bạn. Nó giống như bộ xương người giữ bạn đứng được.

Vì vậy khi học HTML bạn cần chú ý:

  • Tìm hiểu các khái niệm cơ bản và cách viết HTML
  • Hiểu cách chia trang thành các phần và cách cấu trúc DOM đúng cách.

Hãy thử ngồi xây dựng một trang html bất kỳ mà bạn muốn. Tuy nó chưa đẹp nhưng quan trọng mà chúng ta hướng đến đó là cấu trúc bố cục. Và hãy cố gắng nhớ được thật nhiều các thẻ của HTML nhé.

2.CSS

CSS - Cascading stylesheets, sử dụng để làm đẹp trang web. Điều đầu tiên mà bạn sẽ phải làm là tìm hiểu về cú pháp CSS và tự thực hành với các thuộc tính CSS phổ biến.

Một khi bạn có một số kiến thức cơ bản, điều tiếp theo mà bạn nên làm là xây dựng phong cách cho các trang HTML mà bạn đã thực hiện trong bước cuối cùng. Ở trên, sau khi tạo được khung cho trang web mà bạn muốn. Bạn hãy dùng css tiếp tục xây dựng để giống với những gì mà bạn đang làm theo.

3.Javascript

Javascript hay còn gọi là ngôn ngữ kịch bản, nó cho phép bạn làm cho các trang HTML của bạn tương tác với thao tác của người dùng hơn.JavaScript cho phép thêm hàng tấn chức năng cho trang web. Bạn thậm chí có thể tạo ra rất nhiều các ứng dụng web cơ bản mà chỉ cần sử dụng HTML, CSS và JavaScript (JS).

Javascript rất là ảo diệu và gần như mọi website đều sử dụng nó. Mình chắc chắn các bạn sẽ thích khi sử dụng nó.

  • Tìm hiểu cú pháp và cấu trúc cơ bản của ngôn ngữ.
  • Tìm hiểu về DOM, cách thao tác DOM bằng JavaScript.
  • Tìm hiểu cách gọi HTTP bằng XHR hoặc Ajax. Ajax là những gì cho phép bạn thực hiện một số hành động nhất định mà không cần tải lại trang.
  • Sau khi bạn đã làm xong với điều đó thì tìm hiểu thêm theo các keyword như sau: Scopes, Closures, Hoisting và Event bubbling.

Thông thường chỉ cần HTML, CSS và Javascript là đủ để xây dựng một website hoàn chỉnh rồi đấy.

4.jQuery

jQuery là một thư viện JavaScript: một tập hợp các plugins và phần extensions giúp việc phát triển với JavaScript nhanh hơn và dễ dàng hơn. Thay vì phải coding tất cả mọi thứ từ đầu, nhờ có jQuery, bạn có thêm các yếu tố có sẵn vào dự án và tùy chỉnh khi cần thiết.

Query không được sử dụng nhiều cho các dự án mới nhưng vẫn có những người sử dụng nó. Bạn không cần phải học nó nhưng nó thực sự dễ dàng và nó sẽ có lợi cho bạn nếu bạn muốn tham khảo.

5.CSS Frameworks

CSS Frameworks hỗ trợ CSS như chính những gì mà các frameworks JS hỗ trợ cho JavaScript: điểm khởi đầu để code nhanh hơn. Vì CSS thường bắt đầu với các elements giống nhau từ dự án này đến dự án khác, nên chúng ta cần 1 framework để defines trước những elements này. Hầu hết các công việc hiện này cho front-end dev đều cần bạn am hiểu và vận dụng tốt các frameworks này.

Bạn có thể tìm hiểu một số CSS Frameworks như Bootstrap, Bulma, Foundation, mini.css...Nhưng nếu bạn nhìn vào nhu cầu của bạn và thị trường, bạn nên chọn Bootstrap để bắt đầu.

6.Các frameworks của JavaScript

Các frameworks của Javascript (bao gồm AngularJS, Backbone, Ember, và ReactJS) cung cấp structure có sẵn cho code Javascript. Có nhiều frameworks khác nhau phù hợp với từng yêu cầu khác nhau nhưng 4 frameworks trên là ưu tiên hàng đầu. Những frameworks này thực sự giúp tăng tốc độ lập trình, có thể sử dụng cùng với các thư viện như jQuery để giảm thiểu việc phải code lại từ đầu.

Ngày càng có nhiều nhu cầu về React.js. Vue.js thì đã trở thành một framework cực hot trong 2017 và 2018 dự kiến nó sẽ còn mạnh mẽ hơn nữa. Nếu bạn chọn React.js, bạn sẽ phải học Redux, còn với Vue.js bạn sẽ học Vuex. Với Angular bạn sẽ phải làm TypeScript (bạn có thể phát triển các ứng dụng Angular mà không cần nó, nhưng nó được khuyến khích sử dụng nó) và Rx.js cũng sẽ giúp bạn thoát khỏi các ứng dụng Angular của bạn.

6.Thiết kế Responsive và Thiết kế Mobile

Responsive design chính là là bố trí của trang web (và đôi khi chức năng và nội dung) thay đổi dựa trên kích thước màn hình và thiết bị đang dùng.Ví dụ, khi 1 trang web được truy cập từ desktop với màn hình lớn, người dùng sẽ nhận được nhiều cột, các đồ họa lớn và tương tác được tạo ra riêng cho chuột và bàn phím sử dụng. Trên thiết bị di động, trang web giống nhau sẽ xuất hiện 1 cột duy nhất được tối ưu hóa cho tương tác touch nhưng sử dụng cùng các base files.

Thiết kế mobile có thể bao gồm thiết kế responsive, cũng như các thiết kế mobile cụ thể riêng biệt. Đôi khi trải nghiệm của user mà bạn muốn khi họ vào trang web trên desktop sẽ hoàn toàn khác với những trải nghiệm xảy ra trên mobile. 

7.Cross-Browser Development

Những trình duyệt hiện đại đang hiển thị trang web 1 cách nhất quán, nhưng vẫn có sự khác biệt trong cách “thông dịch” code. Cho đến khi tất cả các trình duyệt hiện đại làm việc hoàn hảo với các tiêu chuẩn web, bạn cần biết cách làm thế nào để làm cho mỗi loại trình duyệt đó tuân theo ý muốn của mình. Đây chính là trọng tâm chính của lập trình cross-browser.

8.Server Side Rendering

Các kỹ năng mà bạn đã có cho đến thời điểm này là đủ để giúp bạn có được vị trí cho bất kỳ vai trò “Kỹ thuật Front-end” nào. Nhưng đừng dừng ở đây vội!

Tìm hiểu về Server Side Rendering trong bất kỳ framework nào bạn đã chọn. Có các tùy chọn khác nhau, tùy thuộc vào framework bạn đang sử dụng. Ví dụ: nếu bạn quyết định sử dụng React, các tùy chọn đáng chú ý nhất là Next.js và After.js. Đối với Angular, có Universal. Và đối với Vue.js có Nuxt.js.

9.Kết Luận

Có thể có những thứ vẫn còn thiếu trong lộ trình ngày nhưng đây là tất cả những gì bạn cần cho bất kỳ vai trò “Front-end Engineering”.

Và hãy nhớ điều quan trọng nhất để trở thành lập trình viên front-end là code nhiều nhất có thể. Mới đầu có thể sẽ gặp nhiều khó khăn nhưng hi vọng dần dần mọi thứ sẽ quen thuộc hơn và hi vọng các bạn sẽ tìm được niềm đam mê trong đó.