Lộ trình để trở thành một Frontend Developer

Công việc của 1 Front-end web developer là xây dựng giao diện phía người sử dụng cho một trang web hay một ứng dụng web.

Về cơ bản đây là một phần công việc để chạy được một website hay ứng dụng hoàn chỉnh với dữ liệu dynamic.

Ngày nay, việc phát triển web đã phức tạp hơn trước đây rất nhiều. Nó không chỉ đơn giản là HTML, CSS và Javascript. Rất nhiều công nghệ bạn cần học, rất nhiều việc phải làm khi phát triển một ứng dụng web.

Tuy nhiên, nếu bạn có đam mê và sự quyết tâm chắc chắn bạn sẽ trở thành một Frontend developer trong thời gian ngắn nhất.

Trong bài viết này, chúng ta sẽ cung cấp cho bạn 1 roadmap chi tiết nhất "Làm sao để trở thành một Frontend developer" trong năm 2021.

1. Web hoạt động như thế nào?

Trước khi bắt đầu học bất kỳ công nghệ nào liên quan đến Frontend Development, cái mà bạn phải học đầu tiên đó là "Cơ chế hoạt động của website như thế nào?". Đây là điều bắt buộc đối với tất cả Web Developer. Những cái đó là: HTTP, domain names, hosting, browsers và cách hoạt động của chúng.

Dưới đây là checklist giúp bạn bắt đầu việc học của mình

• Internet là gì?
• Internet hoạt động như thế nào?
• HTTP là gì? Nó hoạt động như thế nào?
• Browsers là gì? Browsers hoạt động như thế nào?
• Domain là gì? Hosting là gì?
• DNS hoạt động như thế nào?

2. HTML & CSS

HTML là ngôn ngữ siêu văn bản với tên đầy đủ là Hypertext Markup Language. Dùng để tạo bộ khung hay bố cụ cho một trang web, nó cung cấp các thẻ giúp chúng ta định dạng nội dung muốn hiển thị trên trình duyệt.

Với HTML các bạn chỉ cần nắm được các thẻ HTML cơ bản để có thể dựng được bộ khung cho một trang web, theo kinh nghiệm của mình các bạn chỉ cần nhớ không quá 20 thẻ HTML là đủ dùng.

Sau khi có kiến thức cơ bản về HTML rồi bạn có thể bắt đầu học sang CSS. CSS được viết tắt của Cascading Style Sheets. Nó giúp chúng ta làm giao diện trang web trở nên đẹp hơn, tương thích với mọi device khác nhau như mobile, desktop, tablet,... 

CSS là ngôn ngữ dễ ràng để học, nhưng để master bạn cần thời gian trải nghiệm qua nhiều dự án thực tế. Dưới đây là những Topics quan trọng khi học CSS

Box model: Hiểu về các khái niệm như margins, padding, width, height và borders. Chúng ảnh hưởng đến nhau như thế nào 

CSS units: Hiểu về các khái niệm liên quan đến đơn vị sử dụng trong CSS ( rem , vh , and vw ).

Position: Specifies the type of positioning method. It also confuses many people so make sure you spend some time on it.

Variables: Biến trong CSS và các khái niệm liên quan đến biến trong CSS

Media query: Hiểu và ứng dụng Media Query để làm responsive cho một trang web

Animation: Các thuộc tính xây dựng hiệu ứng với CSS

Flexbox, CSS Grid: Hiểu về các khái niệm liên quan đến Flexbox và Grid trong CSS. Biết cách dựng giao diện với Flexbox và Grid

Bên cạnh những kiến thức trên, bạn cũng có thể học thêm về UX UI Design giúp tích lũy được tu duy làm sản phẩm tốt cho người dùng. 

2. Git và Github

Git là một Version Control giúp bạn quản lý những thay đổi trên code của bạn. Nó quản lý theo version, nên bạn có thể quay trở lại code trong quá khứ một cách dễ ràng mà không phát sinh lỗi. Nó cũng giúp chúng ta làm việc với Team work hiệu quả hơn

Khi làm việc với Git bạn cần phải sử dụng được các câu lệnh cơ bản của Git trong command line. Bên cạnh đó bạn phải tạo 1 tài khoản Github để lưu trữ code của bạn qua một Repository trên Github

Để hiểu rõ hơn về Git và Github xem bài viết này

3. Website deployment

Sau khi đã có kiến thức về HTML CSS, bạn có thể tạo ra được một trang web đơn giản với hai công nghệ này. Bây giờ bạn muốn đưa trang web của bạn lên môi trường Internet để mọi người cùng xem. Thì bạn cần phải học cách để được được website lên Internet.

Trước đây, để làm được điều bạn phải chuẩn bị khá nhiều thứ từ domain, hosting và một vài công cụ để push code của bạn lên. Nhưng bây giờ, việc này vô cùng dễ ràng với GitHub Pages hoặc Netlify. Bạn có thể tham khảo video này.

4. Javascript

Sau khi đã học xong HTML CSS và tạo được website đơn giản rồi. Bạn nên bắt đầu ngay với Javascript. Đây là ngôn ngữ quan trọng giúp bạn phát triển các chức năng ở phía End User. Việc học Javascript cũng giúp bạn có được tư duy để tiếp cận với các ngôn ngữ lập trình khác dễ ràng hơn như Java, PHP, Python,...

Javascript đang là ngôn ngữ được yêu thích và sử dụng nhiều nhất hiện nay. Bạn có thể làm mọi thứ với Javascript như Frontend Web, Backend, Mobile App, Desktop App, IoT,...

Để hãy bắt đầu với Javascript từ những cái cơ bản như: variables, data types, functions, arrays, objects, DOM,... vv. Dưới đây là checklist bạn có thể tham khảo:

• Syntax and Basic Construct.
• Learn DOM manipulation.
• Learn Fetch API/ Ajax.
• ES6+.
• Modular javascript.
• Hiểu về các khái niệm như: Closures, Scope, Async Await, Prototype, Event Bubbling, Shadow DOM, Hoisting, Strict, and many more.

5. Sass

Khi bạn làm được giao diện web với CSS và đã làm được một số web cụ thể rồi. Nhìn lại những dòng CSS mà bạn đã viết, mình tin chắc bạn sẽ thấy ngợp "Vì phải code quá nhiều hơn nữa lại còn bị trùng lặp"

Sass sinh ra để giải quyết vấn đề này cho các bạn, bạn sẽ cảm thấy việc viết CSS trở nên dễ ràng hơn với Sass và code của bạn cũng ít bị trùng lặp hơn, việc chỉnh sửa và update lại code cũng nhanh hơn

Tổng kết

Bài viết này mình sẽ cập nhật tiếp những Skill khác, tuy nhiên bấy nhiêu đây cũng đã đủ để bạn chiến đấu cho cuộc chuyển mình từ Zero thành Frontend Developer rồi