Lộ Trình Chi Tiết Để Trở Thành Web Developer 2021 (P1)

Khi tôi theo đuổi sự nghiệp web developer, tôi đã bị shock vì có quá nhiều thứ phải học, có quá nhiều thứ phải tìm hiểu mà mình thì lại chẳng biết phải bắt đầu từ đâu. Và chắc hẳn cũng có nhiều bạn như thế. Vì vậy tôi đã quyết định chuẩn bị một lộ trình cho những người mới bắt đầu tìm hiểu con đường này từ kinh nghiệm cá nhân tôi, ít nhiều nó sẽ giúp ích bạn trong hành trình sắp tới.

Bài viết này sẽ siêu dài, nhưng cực kỳ đầy đủ và chi tiết. Mong các bạn sẽ bỏ thời gian để đọc qua một lượt và lưu lại. Nếu bạn đang theo đuổi sự nghiệp web developer, tôi chắc chắn nó sẽ hữu ích!

Internet vận hành như thế nào?

Tuy không cần hiểu quá sâu các khái niệm về Internet để trở thành một Web-Developer, nhưng bạn vẫn cần có các kiến thức cơ bản về cách mọi thứ hoạt động để lộ trình học tập trở nên thiết thực hơn. Nếu không, bạn sẽ chỉ code mà không biết nó sẽ hoạt động như thế nào trong ứng dụng.
Bạn có thể coi internet như một cặp máy tính, chạy 24 * 7 để cung cấp dịch vụ, bất kỳ loại ứng dụng web hoặc trang web nào đều phải truy cập vào máy chủ hoặc bộ nhớ nơi lưu trữ các tệp liên quan đến ứng dụng đó.
Lưu ý: Có nhiều thuật ngữ khác mà bạn nên học như Địa chỉ Ip, gateways, Cookie, v.v.

• HTTP / HTTPS (Hypertext Transfer Protocol / Hypertext Transfer Protocol Secure): Giao thức truyền siêu văn bản là phương thức chính mà qua đó dữ liệu của các trang web được truyền qua mạng. Vì các trang web được lưu trữ trên các máy chủ, sau đó chúng sẽ được phục vụ cho máy khách khi người dùng truy cập. Nhưng có một vấn đề là HTTP kém an toàn hơn, điều này dễ dàng cung cấp quyền truy cập cho những kẻ tấn công bên thứ ba đánh cắp dữ liệu. Do vấn đề bảo mật này, HTTPS đã ra đời. HTTPS yêu cầu chứng chỉ bảo mật từ nhà cung cấp bên thứ ba để bảo mật kết nối và xác minh xem trang web đó có an toàn hay không. Chứng chỉ bảo mật này được gọi là SSL (Lớp cổng bảo mật), nó chỉ đơn giản là thêm một lớp bảo mật bổ sung cho dữ liệu nhạy cảm mà chúng ta không muốn ai đó truy cập dễ dàng (hầu hết là kẻ tấn công bên thứ ba).

• DNS: Trong lĩnh vực phát triển web, DNS là một trong những khái niệm ít được hiểu nhất về internet, DNS khá quan trọng để hiểu đối với các Nhà phát triển web vì nó là chất keo liên kết tên miền (yourwebsite.com) với trang web được lưu trữ trên internet. DNS là viết tắt của Domain Name Service – Dịch vụ tên miền. Nói một cách đơn giản, chúng ta đang nói về khả năng cho những người dùng đang duyệt internet tại địa chỉ web được chuyển hướng đến Địa chỉ IP của máy chủ đang lưu trữ trang web.
• Hosting: Hosting web là quá trình cung cấp một không gian, nơi tất cả nội dung của trang web phải được lưu trữ trên một máy chủ để mọi người có thể truy cập nó trên toàn thế giới. Bạn không cần phải đi sâu vào các khái niệm về hosting, vì có rất nhiều nền tảng mà bạn có thể lưu trữ một trang web trong vòng vài bước.
• Trình duyệt: Là một nhà phát triển web, bạn nên biết cách trình duyệt hoạt động với một ứng dụng web, có kiến thức tốt về trình duyệt sẽ mở ra nhiều cách hơn để tối ưu hóa ứng dụng, dẫn đến các ứng dụng đáng tin cậy hơn để người dùng trên các trình duyệt khác nhau có thể có các kết quả hoạt động tốt hơn.
• Tên miền: Bạn có thể gọi nó là địa chỉ web cho trang web của mình, vì vậy bất cứ khi nào người dùng nhập địa chỉ đó vào trình duyệt, họ sẽ được chuyển hướng đến trang web.

Các công cụ cơ bản

1. Terminal (Thiết bị đầu cuối)

Mọi nhà phát triển nên nắm vững hệ sinh thái của các công cụ thiết bị đầu cuối. Khi bắt đầu lập trình, vấn đề lớn nhất mà tôi từng phải đối mặt là không biết phải làm gì với thiết bị đầu cuối, vì vậy nếu bạn đang bắt đầu phát triển web, bạn nên học cách thiết bị đầu cuối hoạt động trên các máy khác nhau.

Trên các máy chạy hệ điều hành macOS và Linux, chúng ta có thiết bị đầu cuối bash, đây là thiết bị đầu cuối được các nhà phát triển yêu thích nhất vì nó cung cấp gói công cụ tốt nhất mà không có vấn đề tương thích. Nếu bạn có Hệ điều hành Windows trên máy của mình thì bạn cũng có thể truy cập không gian làm việc của UNIX thông qua WSL2 (Hệ thống con của Windows dành cho Linux), sử dụng WSL2, bạn hầu như có thể sử dụng môi trường dựa trên UNIX trong máy của mình và hoàn thành công việc một cách hiệu quả nhất.

Từ kinh nghiệm cá nhân của tôi, bạn sẽ gặp rất nhiều vấn đề trong trường hợp của thiết bị đầu cuối Hệ điều hành Windows, vì có một số công cụ không hỗ trợ trong thiết bị đầu cuối Hệ điều hành Windows, vì vậy tôi thực sự khuyên bạn nên cài đặt môi trường WSL trước khi sử dụng.

Môi trường WSL2 mà tôi đang sử dụng

Có rất nhiều lợi thế nếu bạn sử dụng môi trường WSL, vì bạn có thể cài đặt các công cụ như zsh và các plugin tự động hoàn thành.

• Bash: Bạn sẽ thấy bash là thiết bị đầu cuối hữu ích nhất của mình, vì nó có khả năng tùy biến cao và hỗ trợ các plugin tuyệt vời, hầu hết thời gian bạn sẽ khó làm việc mà không có lệnh UNIX nếu bạn không sử dụng thiết bị đầu cuối bash.
• Git Bash: Thành thật mà nói, tôi không sử dụng Git bash nhiều, nhưng đó hoàn toàn là vấn đề ưu tiên, Git bash cung cấp môi trường dựa trên UNIX trên các máy hệ điều hành Windows khi chúng tôi cài đặt Git.

2. Các công cụ thiết kế

Figma & Adobe XD: Bạn sẽ sử dụng rất nhiều công cụ thiết kế để tạo wireframes hoặc tạo bản xem trước cho các ứng dụng. Figma & Adobe XD đều hoạt động khá tốt, nhưng bạn nên sử dụng Figma để có thể truy cập trên mọi thiết bị và tất cả các tệp đều được lưu trữ trên cloud, vì vậy bạn không phải lo lắng về các tệp và các thay đổi mà bạn đã thực hiện.

3. Text Editors

Bạn không cần biết quá nhiều về trình soạn thảo văn bản trước khi bắt đầu, vì tất cả các công cụ và plugin bạn cần chỉ là một phần trong lộ trình học tập, cũng không cần phải làm quen với bất kỳ nội dung chuyên sâu nào về trình soạn thảo văn bản, hầu hết trình soạn thảo văn bản VS Code được đề xuất và yêu thích vì nó cung cấp các công cụ tốt nhất và rất nhẹ. Nhưng các trình soạn thảo như Atom & Sublime Text có hỗ trợ đặc biệt cho việc phát triển web, bạn có thể chọn bất kỳ cái nào trong số 3 trình soạn thảo văn bản này nhưng hãy đảm bảo rằng chỉ sử dụng một cái cho đến khi bạn đủ quen với IDE.

HTML

Tìm hiểu về căn bản của bất kỳ kỹ năng nào cũng là điều cực kì quan trọng trong lập trình. Nếu bạn không biết gì về HTML và cách định hình ứng dụng web của nó thì nó sẽ giống như thầy bói xem voi vậy. Tuy không cần phải hoàn toàn thành thạo HTML để trở thành nhà phát triển web nhưng chắc chắn đó là một kỹ năng mà bạn nên biết.

Tìm hiểu cơ bản về HTML và các khái niệm sau:

• Forms & Validations (Biểu mẫu & Xác thực): Ngày nay, chúng ta không sử dụng HTML core cho các biểu mẫu có xác thực trong ứng dụng của mình, có rất nhiều thư viện bên ngoài được các LTV xây dựng và chúng ta có thể tạo các biểu mẫu đẹp xác thực trong vòng vài bước. Nhưng trong trường hợp ứng dụng rất nhẹ để sử dụng, bạn nên tìm hiểu các biểu mẫu và xác thực HTML.
• Semantic HTML: Semantic HTML là cách viết HTML mà sử dụng các thẻ HTML ứng với nội dung được chứa trong nó chứ không phải sử dụng các thẻ theo cách mà chúng ta muốn nội dung trong đó được hiển thị. Ví dụ như không thể sử dụng thẻ <h1> để bọc 1 đoạn văn chỉ vì ta muốn đoạn văn đó có font chữ to ra. <h1> và <p> biểu diễn cho các nội dung rất khác nhau nên không thể sử dụng như thế.
• Phương pháp luyện tập: Khi bạn đã hoàn tất các kiến ​​thức cơ bản về HTML, hãy đảm bảo áp dụng một số quy tắc trong code, chẳng hạn như sử dụng thẻ tiêu đề có ý nghĩa và luôn khai báo một loại tài liệu. Làm theo các phương pháp này giúp bạn trở thành LTV giỏi hơn, người có thể quản lý dự án tốt hơn bất kỳ ai.

CSS

1. CSS Căn bản

• CSS Grid: Là một hệ thống bố cục trong CSS cho phép bạn nhanh chóng tạo các bố cục hai chiều linh hoạt, nó không phải là một framework hay một thư viện, bạn có thể sử dụng để đặt kích thước, căn chỉnh bố cục một cách dễ dàng mà không cần CSS Grid khi chúng ta chỉ có float và flexbox. CSS Grid rất được khuyến khích để học khi mới bắt đầu nếu bạn tập trung hơn vào phát triển giao diện người dùng.
• Flexbox: Một chế độ bố cục trong CSS3, nó được sử dụng để làm cho các phần tử hoạt động tương thích khi chúng được sử dụng với các kích thước màn hình khác nhau, flexbox hầu như ở khắp mọi nơi trong các ứng dụng web hiện đại, chúng có nhiều khả năng xử lý các thay đổi hơn khi ứng dụng hoạt động theo các cách thức khác nhau. Bạn có thể coi flexbox như một vùng chứa nơi bạn có thể hiển thị bất kỳ loại dữ liệu nào hợp lệ bên trong flexbox và sử dụng các thuộc tính flex khác nhau, bạn có thể quản lý vị trí của các vùng chứa này.
• Custom Properties: Còn được gọi là biến CSS, chúng là các thực thể do tác giả CSS xác định có chứa một số giá trị cụ thể được sử dụng lại trong toàn bộ tài liệu. Lợi thế của việc sử dụng các Custom Properties trong CSS là bạn có thể tạo các ứng dụng front-end phức tạp hơn với code sạch.

Ví dụ: giả sử bạn có một ứng dụng web phức tạp và nếu giao diện người dùng của bạn chứa một số màu cụ thể thì bạn phải xác định chúng ở mọi nơi trong code của mình, thay vào đó, chúng ta có thể sử dụng các thuộc tính CSS tùy chỉnh nơi chúng ta có thể lưu trữ giá trị ở đó toàn cầu và sử dụng chúng ở mọi nơi.

2. CSS Hiện đại

Khi bạn đã hoàn tất CSS & HTML cơ bản, tôi thực sự khuyên bạn nên xây dựng một số trang web buộc bạn phải tự học và sử dụng HTML & CSS.

• Mô-đun CSS: là kiểu viết module hóa stylesheet thành từng file nhỏ, không còn sử dụng một file stylesheet tập trung nữa. Thêm vào đó, tất cả tên class lúc này sẽ được scope lại local, có thế viết bằng vanilla CSS hay SCSS.

Ví dụ: Cách CSS & HTML hoạt động bình thường là khi một lớp được áp dụng trong HTML, vì chúng ta phải áp dụng CSS cho tài liệu HTML và màu nền của <h1> sẽ là màu đỏ, phương pháp này trở nên khó duy trì hơn một chút trường hợp của các ứng dụng web khổng lồ, nhưng nếu bạn đang sử dụng mô-đun CSS thay vì viết HTML thuần túy, chúng ta cần viết tất cả đánh dấu của mình trong một tệp JavaScript, chẳng hạn như index.js.

• Styled Components: Một trong những cách mới để làm việc với CSS là Styled Components trong JavaScript hiện đại, bạn có thể gọi nó là sự kế thừa của các mô-đun CSS, nơi bạn viết CSS có phạm vi cho một thành phần duy nhất thay vì rò rỉ đến bất kỳ phần tử nào khác trên trang. Tôi khuyên bạn chỉ nên học Styled Components nếu bạn đủ thoải mái để làm việc với CSS mà không bị yếu ở bất cứ phần nào.

3. CSS Frameworks

CSS Framework ra đời như một công cụ hỗ trợ các designer thiết kế giao diện website nhanh chóng và đẹp mắt với thời gian ngắn nhất nhưng ít lỗi nhất. CSS Framework là một bộ mã nguồn CSS đã được viết một số chức năng nhất định và khai báo mỗi chức năng đó vào một class riêng, để người sử dụng sẽ dễ dàng áp dụng nó vào dự án của họ bằng cách thêm class của thành phần muốn sử dụng vào phần tử họ cần áp dụng lên, ví dụ như thêm style cho một nút bấm chẳng hạn.

• Bootstrap: Đây là bộ CSS Framework nổi tiếng nhất hiện tại mà hầu như bạn có thể dễ dàng gặp một website sử dụng các thành phần của Bootstrap trên mạng Internet. Bootstrap là bộ UI Framework khá chi tiết và hỗ trợ gần như toàn bộ các thành phần bên trong website. Chỉ tính riêng grid system của nó thôi cũng đã rất “khủng” và linh hoạt khi nó sử dụng quy trình mobile-first để làm giao diện. Ngoài ra, có hai lý do nữa để nhiều người thích dùng Bootstrap đó là các style có sẵn cho các thành phần rất đẹp nếu như bạn có xem qua Bootstrap components của nó. Và lý do nữa đó là nó cũng hỗ trợ sẵn nhiều hiệu ứng Javascript với jQuery rất độc đáo và đầy đủ.
• Tailwind: Đây là một tập hợp các lớp tiện ích (class) cấp thấp. Chúng có thể được sử dụng như những viên gạch lego để xây dựng bất kỳ loại thành phần nào. Framework bao gồm các thuộc tính CSS quan trọng nhất (nhưng có thể dễ dàng mở rộng bằng nhiều cách khác nhau). Với Tailwind, tùy biến trở nên dễ dàng hơn bao giờ hết. Framework này có tài liệu vô cùng chi tiết, bao gồm tất cả cách sử dụng chi tiết của class và chỉ dẫn nhiều cách tùy chỉnh khác nhau. Tất cả các trình duyệt hiện đại và IE11 +, đều được hỗ trợ.

4. Responsive Design

Là một nhà phát triển, một trong những vấn đề lớn nhất là xây dựng một giao diện tương thích, vì có các kích thước màn hình khác nhau nơi các ứng dụng của bạn sẽ được sử dụng, để giải quyết vấn đề này, có một thuật ngữ gọi là Responsive Desing tập trung vào việc xây dựng giao diện người dùng hoạt động linh hoạt trên mọi kích thước màn hình.

Để xây dựng một ứng dụng web đáp ứng, bạn cầnghi nhớ ba điều:

• CSS Media Queries: Cho phép kết xuất nội dung để thích ứng với các điều kiện như độ phân giải màn hình (ví dụ: màn hình điện thoại thông minh so với màn hình máy tính). Nó đã trở thành một tiêu chuẩn được đề xuất của W3C vào tháng 6 năm 2012 và là một công nghệ nền tảng của thiết kế web đáp ứng (RWD). Với Media Queries thì bạn có thể định dạng cách hiển thị trang web sao cho nó hiển thị Responsive trên nhiều kích cỡ trình duyệt khác nhau. Nếu thiết bị là Desktop trở lên thì độ rộng tối thiểu của màn hình  @min-width  phải là 1024px | Tablet để đứng thì có độ rộng tối thiểu 768px và cao nhất là 1024px trên Smartphone thì tối đa là 767px chẳng hạn. Khi người dùng xem trang web bằng thiết bị có màn hình cỡ nào thì nó sẽ tự đối chiếu và đưa ra định dạng trang web tương ứng.
• Viewport: Vùng hiển thị của các trang web được gọi là chế độ xem, trước đây khi web chỉ được sử dụng trên máy tính, các trang web được thiết kế để có kích thước cố định, nhưng sau đó khi chúng ta bắt đầu sử dụng web trên thiết bị di động, các nhà phát triển đã bắt đầu sử dụng các Viewport trong các trang web để làm cho chúng hoạt động đẹp mắt và tương thích hơn.

• Rem units: Theo thông số kỹ thuật của W3C, rems units là giá trị được tính toán của kích thước phông chữ trên phần tử gốc, khi được chỉ định trên thuộc tính kích thước phông chữ của phần tử gốc, các rem units tham chiếu đến giá trị ban đầu của thuộc tính.

5. Bộ tiền xử lý CSS

CSS Preprocessors biên dịch code được viết bằng trình biên dịch đặc biệt, sau đó họ sử dụng trình biên dịch đó để tạo tệp CSS có thể được tham chiếu bởi tài liệu HTML chính.

• Sass: Một trong những bộ tiền xử lý CSS được sử dụng rộng rãi, Syntacally Awesome Stylesheets, sử dụng Sass, code của bạn trong CSS sẽ nhanh hơn và dễ bảo trì hơn. Ví dụ: thông thường bạn phải sử dụng các giá trị hex cho các màu khác nhau với rất nhiều biến thể, vì vậy thay vì nhập các giá trị hex đó, bạn có thể chỉ cần sử dụng Sass để lưu trữ các giá trị đó với một tên cụ thể và sau đó có thể sử dụng chúng bất cứ nơi nào.
• PostCSS: Một giải pháp thay thế tuyệt vời cho các bộ tiền xử lý CSS, PostCSS tập trung hơn vào việc làm việc với trạng thái trống với nhiều tùy chọn theo nhu cầu. Cá nhân tôi thấy PostCSS dễ làm việc hơn vì nó dễ thiết lập hơn và cung cấp nhiều khả năng mở rộng.

6. Animations

• Plain CSS: Trước khi đi sâu vào thư viện animation CSS, tốt hơn hết bạn nên học các kỹ năng animation CSS cơ bản, chẳng hạn như xác định keyframes cho hoạt ảnh. (keyframes giữ kiểu dáng mà phần tử sẽ có vào những thời điểm nhất định). Học những kỹ năng này sẽ không mất nhiều thời gian vì lúc này bạn đã khá quen thuộc với các thuộc tính CSS.
• GSAP: Nền tảng hoạt ảnh GreenSock là một trong những công cụ JavaScript phổ biến để tạo hoạt ảnh trên web, cho dù bạn tạo responsive web app, trò chơi: GSPA luôn hoàn thành nhiệm vụ. Ngoài ra, nó rất thân thiện với người mới bắt đầu và mang lại sự kiểm soát mà các chuyên gia cần, đó là lý do tại sao nó được sử dụng trên hơn 8 triệu trang web.
• anime.js: Bạn sẽ luôn tìm thấy các thư viện animation mới trong quá trình học tập của mình, vì vậy thay vì tập trung vào các công cụ và thư viện mới, hãy làm việc với các lựa chọn thay thế dễ sử dụng mang lại kết quả đầy hứa hẹn. anime.js là một trong những mục yêu thích của tôi vì cấu trúc nhỏ gọn với cách tiếp cận trang nhã.

Nguồn: https://codelearn.io/sharing/lo-trinh-tro-thanh-web-developer-2021

Tham khảo khóa học lập trình web 6 tháng, đảm bảo 100% công việc đầu ra!