Lộ Trình Giúp Bạn Trở Thành Front End Developer

Lộ Trình Giúp Bạn Trở Thành Front End Developer


Ngày 3 Tháng 12 Năm 2021

Trong bài viết hôm nay mình sẽ giới thiệu đến các kiến thức cơ bản cũng như lộ trình học dành cho lập trình viên front end nha.

Lộ Trình Trở Thành Lập Trình Web

Website Là Gì?

Trước khi trở thành lập trình viên phát triển website thì mình nghĩ bạn nên tìm hiểu website là gì để có cái nhìn tổng quát hơn về nghành này nhé.

Trang web (còn được viết là trang web) là một tập hợp các trang web và nội dung liên quan được xác định bằng một tên miền chung và được xuất bản trên ít nhất một máy chủ web. Các ví dụ đáng chú ý là wikipedia.org, google.com và amazon.com. Tất cả các trang web có thể truy cập công khai đều tạo thành World Wide Web. Cũng có những trang web riêng tư chỉ có thể được truy cập trên mạng riêng, chẳng hạn như trang web nội bộ của công ty dành cho nhân viên của công ty.
Các trang web thường dành riêng cho một chủ đề hoặc mục đích cụ thể, chẳng hạn như tin tức, giáo dục, thương mại, giải trí hoặc mạng xã hội. Siêu liên kết giữa các trang web hướng dẫn điều hướng của trang web, thường bắt đầu bằng trang chủ.

Nguồn Wikipedia

What is website

Đến thời điểm mình viết bài này thì website đã và đang trải qua 3 giai đoạn phát triển chính là:

  • Web 1.0(Quá Khứ): Là các trang web tĩnh chủ yếu dành cho việc tìm kiếm và đọc thông tin.
  • Web 2.0(Hiện Tại): Là các trang web cho phép người dùng có thể chia sẻ nội dung của mình đồng thời là nơi tương tác và cộng tác với nhau. Với mục đích chính là thúc đẩy trao đổi thông tin và hợp tác giữa các thành viên trên mạng. Các website điển hình 2.0 là mạng xã hội, blog, ứng dụng trực tuyến...
  • Web 3.0 (Tương lai): Đây được xem là bước phát triển tiếp theo của website. Dù chưa có nhiều thông tin nhưng theo một số chuyên gia thì nó sẽ là một ý tưởng cho một phiên bản của Internet được phân cấp dựa trên các blockchain công khai, sử dụng AI để sàn lọc thông tin và mang tính phi tập trung (không chịu sự chi phối của các nhóm lợi ích, quốc gia nào).

Có Mấy Kiểu Developer Phát Triển Website?

Theo mình nghĩ thì có 3 dạng developer phát triển website chính là:

  • Front-end: Lập trình viên front-end có nhiệm vụ chính là tạo và thiết kế giao diện cho trang web như xây dựng bố cục, lựa chọn màu chủ đạo, font chữ... Đồng thời cũng chịu trách nhiệm hiển thị web trên tất cả các thiết bị phổ biến hiện nay như máy tính để bàn, máy tính bảng, điện thoại. Ngoài ra các developer front-end còn phải nắm bắt các xu hướng hiện đại trong thiết kế phát triển web để đảm bảo tối ưu hóa, nâng cao trải nhiệm người dùng khi sử dụng trang web.
  • Back-end: Lập trình viên back-end có nhiệm vụ xây dựng, xử lý logic và duy trì các chức năng phía server side của trang web. Đồng thời chịu trách nhiệm viết các dịch vụ web và API cho front-end developer. Các ngôn ngữ lập trình phổ biến dành cho back-end như Nodejs, Java , PHP, Python,Golang...
  • Full-stack: full-stack developer là người có thể thực hiện cả front-end và back-end. Họ phải là một người có nhiều kỹ năng trong các lĩnh vực phát triển website từ cơ sở dữ liệu, xây dựng phía server side đến thiết kế đồ họa và quản lý UI / UX.
Type Of Developer

Các Công Cụ Cơ Bản Cho Developer

Máy tính và hệ điều hành:

Cái này là bắt buộc phải có nha. Vì có nó thì bạn mới có môi trường lập trình được. Thông thường các lập trình viên sẽ sử dụng 3 hệ điều hành chính:

Windows Windows
Macos Macos
Linux Linux

Các Công Cụ Viết Mã:

  • Visual Studio Code(Bạn Nên Dùng): Visual Studio Code là một mã nguồn mở và được phát triển bởi Microsoft nên các bạn cứ yên tâm sử dụng vì nó hoàn toàn miễn phí và luôn được cập nhật những phiên bản mới nhất. Không chỉ vậy nó còn rất thích hợp cho việc phát triển các dự án lớn, phức tạp ngoài ra còn hỗ trợ việc tích hợp Git. Công cụ này còn cung cấp các phần mở rộng(extension) giúp chúng ta có thể code một cách nhanh hơn, quản lý file hiệu quả...
  • Atom: là mã nguồn mở và được phát triển bởi github và miễn phí. Cung cấp những tiện ích giúp chúng ta làm việc với git và github dễ dàng hơn. Nó cũng cung cấp các những tiện ích mở rộng, được hỗ trợ bởi cộng đồng github nên mình thấy ở những bản cập nhật sau này thì có cải thiện về hiệu suất hơn trước. Điểm đặc biệt nữa là cho phép chúng ta tùy chỉnh giao diện theo sở thích của mình!
  • Sublime Text: là một trình soạn thảo có khoảng 4500 tiện ích mở rộng. Theo mình đây là một trình soạn thảo vừa nhẹ nhanh, hiệu suất cao và giao diện bắt mắt giúp người dùng trải nghiệm tốt hơn. Nó có thể xử lý, quản lý các dự án lớn rất tốt. Không chỉ vậy nó còn luôn được cập nhật thường xuyên!

Nếu bạn muốn tham khảo thêm các công cụ viết mã dành cho lập trình viên thì truy cập đường dẫn bên dưới nha.
25 Code Editors Và IDE Dành cho Lập Trình Viên

Trình Duyệt Website:

Các Công cụ Thiết Kế Website:

  • Figma(Bạn Nên Dùng): là nền tảng tập hợp nhiều tính năng mạnh mẽ dành cho thiết kế đồng thời làm tăng hiệu suất suất làm việc cho các bạn designer. Nó giúp bạn dễ dàng tạo ra thiết kế mẫu cho trang web thông qua việc cung cấp nhiều công cụ hữu ích như là cho phép ra các UI mà người dùng có thể tương tác, tạo các hiệu ứng chuyển động cho UI, thêm các hiệu ứng khi người dùng hover hay nhấn vào phần tử trong trang web, tự động tối ưu hóa mẫu thiết kế web trên màn hình điện thoại...
  • AdobeXD: là một công cụ giúp các nhà thiết kế UX có thể dễ dàng tạo sự tương tác trải ngiệm người dùng cho trang web và app điện thoại. Nó cho phép bạn có thể chia mẫu thiết kế web ra nhiều thành phần nhỏ hơn để có thể sử dụng cho các dự án khác nhau (nhằm giảm sự lặp lại ). Ngoài ra nó còn cung cấp hơn 200 plugin để giúp bạn có thể tự động hóa thiết kế cũng như tăng hiệu suất làm việc lên gấp nhiều lần.

Nếu bạn muốn tham khảo thêm các công cụ thiết kế website thì truy cập đường dẫn bên dưới nha.
Những Công Cụ Phát Triển UX/UI Cho Trang Web

Học HTML CSS

HTML Logo

HTML là từ viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản) được phát triển bởi Tim Berners-Lee năm 1990. Đến ngày nay nó đã trải qua 5 phiên bản nâng cấp và hiện tại thì đang sử dụng HTML5. Nó là ngôn ngữ giúp bạn có thể tạo cấu trúc và nội dung cho website như hình ảnh, văn bản, video... Đây có thể xem là ngôn ngữ đầu tiên bạn bắt buộc phải học khi lập trình website vì nó rất phổ biến trong quá trình tạo website.

Sau đây là các yếu tố bạn cần phải nắm khi học HTML là:

  • Học Xây Dựng Cấu Trúc Trang Web Bằng HTML.
  • Hiểu được chức năng của các tag cơ bản.
  • Biết xây dựng form và biết vận dụng các thuộc tính cho thẻ input như email, tel...
  • Các thẻ quan trọng dành cho SEO.
CSS Logo

CSS (Cascading Style Sheets) là ngôn ngữ thiết kế giúp bạn xây dựng trang web hấp dẫn hơn bằng cách xác định bố cục website, thiết lập màu sắc, font chữ cho văn bản, thiết lập website sẽ hiển thị như thế nào trên các thiết bị khác nhau... Có thể nói HTML là xương sống của con người thì CSS chính là vẻ bề ngoài của người đó. Trước khi CSS ra đời thì chúng ta phải thiết lập style cho mỗi thẻ trong HTML điều này gây ra tình trạng "repeat code" (lặp lại đoạn mã) cho từng trang. Nhưng khi CSS được phát triển thì nó đã giúp cho chúng ta có thể dễ dàng thiết lập style cho nhiều thẻ cùng một lúc cũng như giảm thời gian code cho trang web. Đồng thời nó cũng cung cấp thêm nhiều thuộc tính hơn giúp độ tuỳ chỉnh website được mở rộng hơn.

Sau đây là các yếu tố bạn cần phải nắm khi học CSS là:

  • Hiểu được cách styling cơ bản cho đối tượng trong trang HTML như màu sắc, font chữ...
  • Hiểu được cách sử dụng position, display, box model, float.
  • Nắm được cách xây dựng layout bằng flexbox và css grid.
  • Tạo responsive design và sử dụng media queries.
  • Nắm được transition và animation.

Học Sass

Sass

Sass là một CSS preprocessor, một phần mở rộng của CSS. Nó cung cấp cho bạn thêm các chức năng và tiện ích để có thể viết CSS được dễ dàng và hiệu quả hơn. Trong các dự án thực tế thì các file CSS có tới hàng ngàn dòng code nhưng lại không có bất kỳ các thành phần nào có thể reusable(sử dụng lại) cũng như không có một logic nào cả. Điều này sẽ làm chúng ta khó khăn trong việc quản lý. Do đó Sass ra đời giúp bạn giải quyết các vấn đề trên mà không làm ảnh hưởng tới cách CSS hoạt động.

Nếu bạn muốn tham khảo về các tính năng cơ bản của Sass thì truy cập đường dẫn bên dưới nha.
Các Tiện Ích Của Sass Trong Thiết Kế Web

Học Các CSS Frameworks

Framework CSS là công cụ giúp các lập trình viên thiết kế và phát triển giao diện một cách nhanh chóng và dễ dàng. Đồng thời nó cũng giải quyết các vấn đề phổ biến trong quá trình tạo giao diện bằng việc kết hợp giữa HTML, CSS và Javascript.

tailwindcss

Tailwindcss: là một utility-first CSS framework giúp bạn có thể nhanh chóng xây dựng giao diện người dùng. Thực ra nó cũng giống với các thư viện khác như Bootstrap, Materialize... nhưng điểm khác biệt chính của nó là khung CSS cấp thấp (low-level CSS framework) cung cấp cho chúng ta nhiều chức năng tuỳ biến phát triển component mà không cần phải viết lại CSS.

Bootstrap

Bootstrap: được xây dựng trên những ngôn ngữ thông dụng về web đó là CSS, HTML và Javascript. Nó sẽ giúp các bạn phát triển giao diện nhanh, đẹp hơn và responsive(đáp ứng) được nhiều màn hình của những thiết bị khác nhau. Đồng thời cũng tương thích với đa số trình duyệt hiện đại như là Chrome, Firefox, Internet Explorer 10+, Edge, Safari, Opera...

Materialize

Materialize: Là một framework CSS được xây dựng dựa trên thiết kế material design. Nó giúp xây dựng các trang web và ứng dụng web trong hiện đại, hấp dẫn, nhất quán về mặt chức năng, tuân thủ các nguyên tắc thiết kế web hiện đại như tính mobile first cho trình duyệt.

Học Javascript

Javascript Logo

Javascript được tạo ra để bạn tương tác với các thành phần trang web và thường được kết hợp với HTML, CSS để tạo ra các chức năng tiện ích, tăng khả năng tương tác cho trang web.. Việc tiện lợi của nó là có thể viết ngay trong trang HTML và tư động chạy khi trang được tải mà không cần bất kỳ trình biên dịch nào cả, bạn có thể hiểu nôm na trình biên dịch là công việc chuyển ngôn ngữ lập trình hiện tại sang một ngôn ngữ cấp thấp hơn như là ngôn ngữ máy để giúp máy tính có thể hiểu và thực hiện.
Vào năm 1995, Javascript được tạo ra bởi một lập trình viên tên là Brendan Eich thuộc công ty Netscape. Tên đầu tiên mà nhà sáng lập đặt cho nó là Mocha sau đó đổi thành LiveScript. Nhưng tại thời điểm đó thì ngôn ngữ Java đang được sử dụng rộng rãi và phổ biển nên họ đã quyết định đổi tên thành Javascript. Và hai ngôn nghữ này không hề liên quan gì đến nhau đâu nhé.

Sau đây là các yếu tố bạn cần phải nắm khi học Javascript là:

  • Nắm được các cấu trúc và syntax cơ bản của Javascript như biến, function, vòng lặp, array, object...
  • Biết sử dụng cáo thao tác với DOM.
  • Hiểu được JSON(Javascript Object Notation).
  • Các kiến thức về ES6, modular Javascript
  • Biết cách dùng fetch API/ Ajax.
  • Hiểu các nội dung nâng cao như Scope, Prototype, strict, hoisting...

Nếu bạn muốn tham khảo các nơi học javascript miễn phí thì truy cập đường dẫn bên dưới nha.
Những Ebook Và Khóa Học Lập Trình Web Miễn Phí

Các Công cụ Quan Trọng Khác

Trong phần này mình sẽ giới thiệu một số công cụ quan trọng mà bạn nên tìm hiểu dể xây dựng các dự án lớn cũng như làm việc với các thành viên trong team dễ dàng hơn.

1) Package managers

Package managers là một tập hợp các công cụ phần mềm tự động hóa quá trình cài đặt, nâng cấp, cấu hình và gỡ bỏ các chương trình một cách nhất quán cho dự án của bạn.

npm
Yarn

2) Module Bundler

Nó là công cụ dành cho JavaScript để gom các Javascript modules thành một file duy nhất để chạy trong trình duyệt.

3) Version Control System

Nó là một loại công cụ phần mềm giúp ghi lại các thay đổi được thực hiện đối với file bằng cách theo dõi các sửa đổi được thực hiện đối với các đoạn code trong dự án.

git

4) Các Extension VS Code

Trong Visual Studio Code có hỗ trợ các extension giúp bạn có thể tối ưu công việc cũng như giảm thời gian viết mã cho dự án như:

Live Server

Live Server: giúp khởi chạy local server một cách nhanh chóng với tính năng tự động tải lại trực tiếp cho các trang web tĩnh và động. Ví dụ khi bạn thay đổi một thông tin trên trang HTML thì nó sẽ tự động cập nhật mà không cần chúng ta phải nhấn reload trên trình duyệt. Nó cũng có nhiều lựa chọn cho việc thiết lập sử dụng như là tùy chỉnh số port, thiết lập trình duyệt mặc định, hỗ trợ SVG, https, proxy...

ESLint

ESLint: là một công cụ phân tích đoạn mã trong chương trình để đưa ra các lỗi cũng như những đoạn mã cần phải cải thiện. Ngoài ra nó cũng cung cấp cho bạn những giải pháp để tối ưu hay sửa lỗi một cách nhanh hơn. Bạn cũng có thể tùy chỉnh trình phân tích cú pháp của ESLint để phù hợp với mục đích hay dự án của mình.

Auto Close Tag

Auto Close Tag: được xây dựng để giúp bạn tự động đóng thẻ khi bạn mở thẻ. Ví dụ như là khi bạn gõ <html> thì nó sẽ tự động thêm </html>. Ngoài ra nó cũng hỗ trợ cho nhiều ngôn ngữ khác như là XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX... nó cũng có một số thiết lập giúp bạn dễ dàng tinh chỉnh như là đặt danh sách thẻ không tự động đóng, sử dụng phím tắt để thêm thẻ đóng thủ công...

Nếu bạn muốn tham khảo tham về các vscode extension khac thì truy cập đường dẫn bên dưới nha.
30 Visual Studio Code Extensions Tốt Nhất Cho Phát Triển Web

Các Hosting Tĩnh

Static Website là trang web có nội dung cố định và thường được sử dụng với ba ngôn ngữ chính là HTML, CSS, Javascript. Ngoài ra bạn cũng có thể sử dụng các front-end javascript để tạo dạng website này như là React, Vue, Nuxt... Thông thường những trang web này sẽ không có cơ sở dữ liệu(database) mà sẽ sử dụng dữ liệu thông qua API, các tệp lưu trữ... Nó thường được sử dụng cho các trang landing page, giới thiệu sản phẩm, trang thông tin...

Netlify

Netlify

  • Tự động xây dựng từ Git.
  • Được triển khai trên global Edge network.
  • Bandwidth: 100GB/ Tháng.
  • Số lượng website: Không Giới Hạn.
  • Có thể khôi phục cho bất kỳ phiên bản.
GitHub Pages

GitHub Pages

  • Trang Web có thể có dung lượng lên tới 1GB.
  • Bandwidth: 100Gb mỗi tháng.
  • Có thể tự thiết lập domain name cho trang web thông qua CNAME.
  • Có hỗ trợ HTPPS cho website.
Vercel

Vercel

  • Cải thiện hiệu suất trang web với Edge Network.
  • Không giới hạn website và API.
  • Có thể custom domain với đầy đủ chức năng SSL.
  • Có cung cấp Serverless Functions.
Cloudflare Page

Cloudflare Page

  • Tích hợp Git dễ dàng.
  • Không giới hạn website và số lượng trang.
  • Không giới hạn băng thông.
  • Tích hợp CDN cho dự án web.

Nếu bạn muốn tham khảo các hosting miễn phí dành cho các dự án front end thì truy cập đường dẫn bên dưới nha.
Web Hosting Miễn Phí Cho Website

Ở đây mình xin lưu ý với bạn là thường có 3 cách chính để deploy website tĩnh lên hosting là:

  • FTP/SFTP: File Transfer Protocol
  • Git
  • SSH

Xây Dựng Dự Án Front End

Khi học xong các kiến thức trên thì mình nghĩ bạn nên cần tìm một dự án mẫu hay giao diện trang web mà mình cảm thấy thích và bắt đầu thực hành viết mã để thực hành các kiến thức đã học cũng như nâng cao kỹ năng cho chính bản thân của bạn. Ngoài ra nó sẽ rất có ích khi đi phỏng vấn vì các nhà tuyển dụng đánh giá rất cao các dự án mà bạn tự làm đồng thời có thể nắm được tổng quát trình độ và kỹ năng của bạn.
Sau đây mình sẽ tổng kết kỹ năng mà bạn cần phải có khi muốn trở thành front-end developer nha.

  • Xây dựng môi trường để viết code.
  • Hiều và thành thạo HTML, CSS và Javascript.
  • Xây dựng các layout có thể hiển thị tên nhiều màn hình khác nhau(responsive).
  • Sử dụng CSS Framework.
  • Biết làm việc và tương tác với DOM.
  • Hiểu được HTTP và kết nối với các API thông qua fetch.
  • Biết sử dụng Git vói Github.
  • Đưa dự án của bạn public trên Internet.

Học Javascript Frontend FrameWork

Reactjs Logo

React.js là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng giao diện người dùng dành riêng cho các ứng dụng một trang(single-page applications). React cho phép bạn có thể tạo ra các thành phần UI tái sử dụng(reusable components). Lần đầu tiên React được tạo ra bởi Jordan Walke, một kỹ sư phần mềm làm việc cho Facebook. React được triển khai lần đầu tiên trên newsfeed của Facebook vào năm 2011.
Ngoài ra React cho phép bạn tạo các ứng dụng, dự án web lớn có thể thay đổi dữ liệu mà không cần phải tải lại trang. Mục đích chính của nó là nhanh, có thể mở rộng và đơn giản. Trang Download Reactjs

Bạn cũng nên học thêm các công cụ hỗ trợ cho việc quản lý state(State management) cho React như:

VueJS Logo

Vue.js (thường được gọi là Vue; phát âm là / vjuː /, như "view") là một framework JavaScript mã nguồn mở và hoàn toàn miễn phí được phát triển bởi Evan You vào năm 2014. Theo mình tìm hiểu thì Evan You mong muốn tạo ra một framework Javascript dựa trên việc tích hợp các tiện ích của hai framewwok đang nổi thời bấy giờ là Reactjs và Angular. Nó giúp xây dựng giao diện người dùng và các ứng dụng một trang (single page application) dựa trên mô hình model-view-viewmodel. Điểm mình cảm thấy thực sự thích ở Vuejs là có documnet cực kỳ chi tiết giúp chúng ta dễ dàng hiểu và áp dụn vào dự án thực tế. (Đặc biệt là có tiếng Việt nữa nha).
Trang Download VueJS

Bạn cũng nên học thêm các công cụ hỗ trợ cho việc quản lý state(State management) cho Vue như:

Angular Logo

Angular là một framework JavaScript mã nguồn mở được viết bằng TypeScript được một nhóm kỹ sư Google tạo ra và phát triển. Mục đích chính của nó là duy trì và phát triển các ứng dụng một trang. Nó cho phép người dùng tạo các ứng dụng lớn một cách dễ dàng cũng như đơn giản hoá quá trình bảo trì. Do được Google phát triển nên bạn có thể hoàn toàn yên tâm về tính ổn định của nó. Ngoài ra Angular cũng có một cộng đồng rộng lớn nên rất dễ dàng tìm được câu trả lời khi bạn gặp các vấn đề trong quá trình áp dụng Angular vào dự án thực tế.
Trang Download Angular

Bạn cũng nên học thêm các công cụ hỗ trợ cho việc quản lý state(State management) cho Angular như:

Tìm Hiểu Static Site Generator(SSG)

Nó là một công cụ tạo các trang web tĩnh HTML mà không cần phải dựa vào cơ sở dữ liệu, nguồn dữ liệu bên ngoài và không phải xử lý server side. Nó được xem là giải pháp thay thế cho các hệ thống quản lý nội dung (CMS) hiện nay. Một số điểm mạnh của nó là Không cần quản lý phía máy chủ cơ sở dữ liệu, tốc độ tải trang nhanh hơn, có thể tạo nhiều templates cho website...

Các Công cụ Testing

Thông thường khi làm một dự án web lớn thì nó sẽ được chia thành nhiều phần nhỏ để dễ dàng phát triển cũng như chỉnh sửa. Các công cụ Testing có nhiệm vụ giúp bạn thực hiện kiểm tra các chức năng đó có chạy đúng theo yêu cầu hay không. Thông thường nó sẽ có 3 loại test là Unit, Integration và Functional.

Jest

Jest là một framework testing tập trung vào sự đơn giản. Nó có thể làm việc với Babel, TypeScript, Node, React, Angular, Vue... Với các bài test được chạy song song trong các quy trình riêng nhằm tối đa hiệu suất cho chương trình. Ngoài ra nó còn có tài liệu hướng dẫn chi tiết, yêu cầu thiết lập không phức tạp và dễ dàng có thể mở rộng để phù hợp với yêu cầu của lập trình viên.

MochaJS

MochaJS MochaJS là một framwork testing được sử dụng phổ biến trong lập trình web và hỗ trợ cho cả back-end(Nodejs) và front-end. Nó giúp bạn thực hiện kiếm tra không đồng bộ một cách đơn giản và dễ dàng. Ngoài ra nó còn có cộng động lập trình viên hỗ trợ đông đảo, nhiều hướng dẫn ví dụ chi tiết và được nhiều công ty cũng như website lớn tin tưởng sử dụng.

Cypress

Cypress là một testing framework giúp bạn kiểm tra nhanh chóng dễ dàng với mọi thứ chạy trên trình duyệt. Một sổ điểm mạnh của nó là cách thiết lập đơn giản, tự động tải lại khi các test case thay đổi, các hình ảnh được chụp tự động khi chạy test case, có thể gỡ lỗi trực tiếp thông qua các cụ phổ biến như Chrome DevTools...

Nếu bạn muốn tham khảo thêm các công cụ testing cho dự án web thì truy cập đường dẫn bên dưới nha.
Công Cụ Testing Javascript

Các Kiến Thức Liên Quan Khác

TypeScript

TypeScript

TypeScript là superset của ngôn ngữ JavaScript với trình biên dịch mã nguồn mở được phát triển chủ yếu bởi Microsoft. Nhiệm vụ chính của nó là giúp phát hiện sớm các lỗi thông qua type system đồng thời phát triển JavaScript hiệu quả hơn cho dự án.

  • Thích hợp với các dự án lớn.
  • Áp dụng "strict" type system cho ngôn ngữ Javascript.
  • Hỗ trợ các tính năng JavaScript hiện đại.
  • Giảm lỗi cho dự án của bạn.
BEM CHEAT SHEET

BEM CHEAT SHEET

BEM CHEAT SHEET là một trang web cung cấp cho bạn cách đặt tên class với các component trong trang web một cách tối ưu và nhất quán hơn. Việc đặt tên theo quy tắc này sẽ giúp các lập trình viên trong team có thể dễ dàng hiểu được chức năng của từng class cũng như làm việc với nhau được hiệu quả hơn.

Reset CSS

Sử dụng Reset CSS

Nếu như bạn để ý thì mỗi trình duyệt sẽ có một cách thiết lập style mặc định riêng cho phần tử HTML do đó khoảng cách padding, margin, border... của các phần tử này sẽ thường hiển thị không giống nhau ở các trình duyệt khác nhau. Việc chúng ta sử dụng đoạn mã reset file CSS sẽ giúp các phần tử của trang web có thể hiển thị một cách nhất quát trên nhiều trình duyệt khác nhau.

WebAssembly

WebAssembly được ra mắt vào năm 2007 là một ngôn ngữ giống như hợp ngữ cấp thấp với định dạng nhị phân nhỏ gọn có thể chạy trong các trình duyệt web hiện đại. Mục tiêu chính của WebAssembly là cho phép các ứng dụng hiệu suất cao trên các trang web. Nó không được thiết kế để sử dụng như một ngôn ngữ mà là một mục tiêu biên dịch hiệu quả cho các ngôn ngữ như C, C ++ và Rust.

Jamstack

Jamstack là một kiến trúc được thiết kế để làm cho web nhanh hơn, an toàn và dễ dàng mở rộng quy mô. Nó được tạo ra bởi Mathias Biilmann, Giám đốc điều hành của Netlify vào năm 2015. Nó được xây dựng dựa trên Javascript, API và Markup. Jamstack không phải là một công nghệ cụ thể mà là một cách khác để xây dựng ứng dụng và trang web.

  • Javascript: xây dựng và thêm chức năng động bằng Javascript.
  • API: thay thế cơ sở dữ liệu và tìm nạp trực tiếp từ các dịch vụ được yêu cầu.
  • Markup: Các trang web được chuyển dưới dạng tệp HTML tĩnh.

Tìm Hiểu Các Kiến Thức Liên Quan Đến Internet

  • Cách Internet hoạt động.
  • HTTP Là gì?
  • Trình duyệt là gì và cách hoạt động của nó.
  • DNS là gì và cách thức hoạt động.
  • Hosting là gì?
  • Domain Name(Tên miền) là gì?

Các Github Giúp Bạn Học Lập Trình

Free Programming Books

Theo mình thấy đây là trang web tập hợp gần như đầy đủ các khóa học và sách lập trình miễn phí dành cho lập trình viên hiện nay. Điểm mình cảm thấy thích nhất ở đây là nó chia thành nhiều ngôn ngữ khác nhau giúp chúng ta có thể dễ dàng lựa chọn tài liệu phù hợp. Ngoài việc đọc tài liệu thì nó còn có cung cấp cho bạn thêm các định dạng khác như là popcast, video, các chương trình luyện code...

Awesome

Awesome là nơi tổng hợp gần như đầy đủ như sách, công cụ, thư viện... dành cho các ngôn ngữ và chủ đề lập trình phổ biến hiện nay.

Design Resources For Developers

Design Resources For Developers là nơi tổng hợp các công cụ thiết kế dành cho lập trình viên trong quá trình phát triển website như chọn màu, font, template miễn phí, framewwork CSS...

Nếu bạn muốn tham khảo thêm về các github dành cho học lập trình thì bạn truy cập đường dẫn bên dưới nha.
Trang GitHub Giúp Bạn Học Lập Trình Miễn Phí

Các Website Giúp Bạn Luyện Code

CodeWars

Trang web CodeWars như tên gọi của nó thì đây là nơi mà bạn giải quyết từng vấn đề từ dễ đến khó để có thể được rank cao hơn. Ở trang web này thì rank sẽ được tính theo điểm gọi là kyu và tùy vào mức độ của vấn đề mà bạn giải quyết thì điểm này sẽ cao hay thấp. Sau khi tìm ra phương pháp cho một vấn đề thì bạn có thể xem các đáp án của người khác để so sánh cách viết code cũng như tính hiệu quả của code bạn viết.

Edabit

Trang web Edabit là nơi giúp chúng ta có thể ghi nhớ những điều cơ bản và nâng cao của một ngôn ngữ thông qua cách giải quyết vấn đề trực tiếp trên trang này. Nó sẽ tự động tính điểm theo xp mỗi khi bạn giải quyết được vấn đề nào đó. Càng nhiều điểm thì level càng cao. Thật hứng thú khi bạn và các lập trình viên khác cạnh tranh nhau từng điểm một để có thể dẫn đầu bảng xếp hạng phải không nào. Nó còn giúp chúng ta tăng khả năng hứng thú khi coding cũng như suy nghĩ và giải quyết vần đề như một lập trình viện thực thụ.

CodinGame

Trang web CodinGame giúp bạn thực sự vừa chơi game vừa viết code. Nó khiến chúng ta tiếp cận vấn đề một cách thoải mái, vui vẻ hơn cũng như tăng sự húng thú trong việc giải quyết vấn đề. CodinGame hỗ trợ hơn 25 ngôn ngữ và ở đây bạn có thể học được nhiều thuật toán, thủ thuật từ những lập trình viên giỏi trên thế giới. Nó cũng đi theo mức độ từ dễ tới khó nên phù hợp với nhu cầu học hỏi của mọi người.

Nếu bạn muốn tham khảo thêm về các trang luyện code dành cho học lập trình thì bạn truy cập đường dẫn bên dưới nha.
Trò Chơi Và Ứng Dụng Giúp Bạn Học Code Tốt Hơn

Các Blog Dành Cho Front end

CSS-TRICKS

CSS-TRICKS là một trang web được thành lập bởi Chris Coyier vào năm 2007. Với mục đích chính là chia sẻ cho bạn các thủ thuật để giải quyết các vấn đề hay gặp trong quá trình thiết kế trang web. Ngoài ra website này còn có rất nhiều chủ đề hay về việc phát triển web như là animation, performance, responsive image... Theo mình thấy thì mức độ cập nhật bài viết cũng rất thường xuyên do đó bạn hoàn toàn yên tâm để học hỏi cũng như trau dồi được nhiều kiến thức đang hot hiện nay nha.

Smashing Magazine

Smashing Magazine được thành lập vào năm 2006 tại Đức. Tuy nhiên bạn hoàn toàn yên tâm vì các bài viết đều bằng tiếng anh hết nhé. Nó là một trang blog chuyên viết về giải pháp cho các vấn đề hay gặp trong quá trình phát triển cũng như thiết kế web. Các bài viết được đúc kết từ kinh nghiệm làm việc thực tế của các bạn lập trình viên có chuyên môn cao trong lĩnh vực do đó bạn có thể hoàn toàn yên tâm về chất lượng bài viết nha. Một điểm mà mình cảm thấy thích ở website này là dù có nhiều bài viết đã cách đây 5 hay 6 năm nhưng kiến thức của nó vẫn có thể hoàn toàn áp dụng được cho trang web hiện tại.

freeCodeCamp

freeCodeCamp là một tổ chức phi lợi nhuận với mục tiêu là giúp bạn có thể học lập trình thông qua những dự án thực tế bằng cách tương tác với code. Theo mình thấy ngoài tính năng học code hữu ích thì ở đây còn là nơi chia sẻ những kinh nghiệm rất hay của chính các bạn đang học và trải nghiệm ở freeCodeCamp. Với hơn 6000 khóa học, có thể nói đây một kho tài liệu tri thức khổng lồ dành cho các bạn thích nghiên cứu và học hỏi về việc phát triển web (đặc biệt dành cho các bạn mới bắt đầu).

Nếu bạn muốn tham khảo thêm về các blog cho lập trình viên front end thì bạn truy cập đường dẫn bên dưới nha.
Trang Blog Dành Cho Lập Trình Viên

Kênh Youtube Giúp Học Lập Trình

Traversy Media là một kênh youtube chuyên cung cấp các khóa học về những công nghệ mới cũng như ngôn ngữ lập trình trong việc phát triển web. Theo quan điểm của mình là kênh này rất thích hợp cho những bạn mới bắt đầu tiếp xúc một ngôn ngữ lập trình mới nào đó thông qua từng bài hướng dẫn và ví dụ rất thực tế. Kênh này cung cấp rất nhiều kiến thức bổ ích về các công nghệ và ngôn ngữ lập trình web như React, VueJS, NodeJS, HTML, CSS, Python... Ngoài ra cũng chia sẻ những kinh ngiệm, quan điểm sống, cách giải quyết những vấn đề mà một lập trình viên hay gặp phải ở trong cuộc sống.

Wes Bos là nới bạn có thể tìm thấy những bài hướng dẫn tập trung chủ yếu về phía Front-end giúp chúng ta tăng kỹ năng xây dựng giao diện, thiết kế và phát triển web với các công nghệ chủ yếu là Javascript, HTML, CSS, React.js, Node, Express, Lambda, Gatsby và Next.js. Mình cảm thấy rất ấn tượng với series thử thách lập trình Javascript trong 30 ngày, nó giúp bạn hiểu và áp dụng những khả năng của ngôn ngữ Javascript vào trong thực tế .

freeCodeCamp.org là trang web tổ chức phi lợi nhuận với mục đích là giúp mọi người có thể học code hoàn toàn miễn phí. Việc thành lập kênh Youtube này được dùng để hỗ trợ thêm cho việc cải thiện kỹ năng lập trình của bạn thông qua các ví dụ thực tế. Nó có đầy đủ các khóa học hướng dẫn cho hầu hết những công nghệ web hay ngôn ngữ lập trình phổ biến hiện nay như là React, Docker, Javascript, API, NodeJS, Laravel... Ngoài ra bạn cũng có thể học hỏi thêm từ nhiều lập trinh viên giỏi trên thế giới thông qua các video chia sẻ kinh nghiệm, nhìn nhận một công nghệ web nào đó hay cùng họ thực hiện một series với dự án thực tế trong 30 ngày...

Nếu bạn muốn tham khảo thêm về các kênh youtube dành cho việc học lập trình thì truy cập đường dẫn bên dưới nha.
Youtube Giúp Học Code Online

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn lộ trình học front end cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!