Lộ trình học front end chi tiết nhất năm 2022

Bạn mới bắt đầu học Frontend tuy nhiên không biết phải bắt đầu tại đâu & học những gì? Hãy cùng mình đi qua bài blog này để có thể hình dung ra Lộ trình học front end mình sẽ cần học những gì nhé !

Tổng quan về Lịch trình học cho người mới bắt đầu

Các mục chính bạn cần chinh phục

1. Kiến thức nền tảng của developer
2. HTML: layout có element nào?
3. CSS: render layout như thế nào?
4. Javascript/ES6: ngôn ngữ lập trình
5. ReactJS/Angular/VueJS: thư viện/framework của JS để xây dựng UI hiệu quả
6. NextJS: hỗ trợ SSR/SSG
7. Deployment: hiểu được cách deploy một phần mềm Frontend lên server.
8. Tools: các tools nên biết vì dev hay dùng
9. Soft skills: các kĩ năng phụ cần thiết khác

Kiến thức nền tảng của Developer

• What: nền tảng của một developer
• Why: nền tảng chắc –> phát triển nhanh và lâu bền
• When: học ngay từ đầu
• Who: bất cứ ai mong muốn trở thành developer
• How: xem phía dưới

• Tư duy / kĩ thuật lập trình (phần này có thể move xuống phần Javascript)
• Kiến trúc tổng quan của một hệ thống Web / phần mềm.
• Quá trình phát triển ứng dụng
• Căn bản về Internet: tên miền, Hosting, DNS, http vs https, …
• Các nhiệm vụ trong một dự án thực tế.
• … (Còn nhiều nữa ?)

Học một vài cái cơ bản của HTML

HTML mang tới cho page một cấu trúc rõ rệt. Nó chẳng hạn như bộ xương sống giúp bạn đứng thẳng vậy. Cái đầu tiên cần biết đấy là syntax & toàn bộ những thứ liên quan trong đó. Bạn nên chăm chú vào học những thứ sau:

• Học những cái căn bản & học viết semantic HTML
• Biết được cách chia page thành các section và cách sắp xesp DOM hợp lý

Task — Khi mà đã nắm những điều cơ bản về HTML, hãy tạo tối thiểu 5 page HTML. Tôi chỉ bạn chọn bất kì Website nào Ví dụ, một profile page github bất kì hoặc login page của twitter. Sau đó tập trung vào nội dung. Có thể nó hơi xấu ban đầu nhưng mà đưunfg lo lắng quá và cứ chăm chú vào structure chính.

Học CSS

Sau khi đã tạo được phần xương sườn của page, chúng ta sẽ cho nó một số lớp áo & tô điểm cho nó đẹp một chút. Sử dụng CSS — Cascading stylesheets để làm đẹp cho các page HTML.

• Đầu tiên phải biết về syntax và phải quen với các CSS property.
• Học về box model & học cách chuẩn bị các layout bằng Grid và Flexbox
• Sau khi đã xong, học cách làm responsive Website bằng các media query.

Task –– Sau khi đã xong phần cơ bản, tiếp theo bạn cần phải chọn style cho các trang HTML bạn làm ở bước cuối. Ví dụ, nếu bạn viết trang HTML cho Github profile, bạn nên áp dụng CSS & khiến cho nó trông chẳng hạn như một Github profile page. Cứ làm thế với cả 5 page đã viết trước đó.

>>> Xem thêm: Tư duy lập trình là gì? Những điều bạn cần biết

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 lịch sử 1 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 có kết quả tốt hơn

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

Để hiểu hơn về Git & Github đọc bài viết này

>>>Xem thêm: Định nghĩa về GitHub những lợi ích cho lập trình viên

3. Web deployment

Một khi đã có chuyên môn về HTML CSS, bạn sẽ làm ra được một trang Web dễ dàng 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 Web lên trên mạng internet.

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

4. Javascript

Sau khi đã học xong HTML CSS và tạo được Web đơn giản rồi. Bạn nên bắt đầu ngay với Javascript. Đây chính là ngôn ngữ cần thiết giúp bạn phát triển các công dụng ở phía End User. Việc học Javascript cũng giúp cho bạn có được tư duy để tiếp xúc 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 & sử dụng nhiều nhất vào thời điểm hiện tại. 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ăn 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 định nghĩa như: Closures, Scope, Async Await, Prototype, Event Bubbling, Shadow DOM, Hoisting, Strict, and many more.

5. Sass

Khi bạn thực hiện được giao diện Website với CSS và đã thực hiện được một số Web cụ thể rồi. Nhìn nhận lại những dòng CSS mà bạn đã viết, mình tin chắc bạn có thể 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 điều này cho các bạn, bạn có thể 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 & cập nhập lại code cũng nhanh hơn.

Lộ trình hoàn chỉnh

Tổng kết

Bài viết này mình đã chia sẽ lộ trình học front end cơ bản cho các bạn, 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.

Nhật Minh – Tổng hợp và bổ sung

Nguồn: topdev.vn, codelearn.io, suntech.edu.vn, viblo.asia