Bạn đang cố gắng học lập trình web, nhưng không biết phải bắt đầu từ đâu?
Ngay bây giờ, tất cả những gì bạn cần biết là những điều cơ bản về phát triển web – một lời giải thích tổng quát cùng với một số hướng đi tiếp theo.
Học lập trình Web nên bắt đầu từ đâu? Nordic Coder

Đầu tiên, đây là các bước cơ bản bạn sẽ phải làm để trở thành lập trình viên về web.

Các bước để học lập trình web

  1. Khái niệm cơ bản: Hiểu cách hoạt động của một trang web
  2. Khái niệm cơ bản: HTML, CSS và JavaScript
  3. Kỹ năng trung cấp frontend: thiết kế responsive, công cụ lập trình, Git
  4. Framework dành cho frontend: React, Vue, hay Angular
  5. Kỹ năng backend (nếu bạn muốn trở thành full-stack)
  6. Kỹ năng cơ bản về triển khai và cài đặt máy chủ

Bây giờ, trước khi chúng ta đi qua tất cả mọi thứ về website, hãy bắt đầu với bạn trước đã!

Mục tiêu học code của bạn là gì?

Trong cuốn sách “The 7 Habits of Highly Effective People”, Stephen R. Covey khẳng định rằng để thành công, bạn phải bắt đầu với sự kết thúc trong tâm trí.

Hãy xem xét lý do để bạn tham gia vào việc coding… Bạn đang nhắm đến mục đích gì?

Mục tiêu cuối cùng của bạn là gì?

Bạn đang tìm kiếm một sở thích, một sự thay đổi nghề nghiệp, một công việc linh hoạt, nơi bạn có thể gần gũi hơn với gia đình?

Toàn bộ cách tiếp cận về lập trình web của bạn nên tập trung vào việc để đạt được ước mơ này.

Bạn thậm chí có thể thử viết ra mục tiêu của mình và đặt nó ở một nơi nào đó mà bạn sẽ thấy nó hàng ngày, như gương phòng tắm hoặc bên cạnh máy tính.

Khi bạn xem qua bài viết này, hãy ghi nhớ mục tiêu của bạn và để điều đó quyết định những hướng mà bạn sẽ đi: học ngôn ngữ nào, thậm chí cả cách bạn học.

Như đã nói, chúng ta hãy bắt đầu với những điều cơ bản!

Mục tiêu học code của bạn là gì? Nordic Coder

Phần 1: Những điều cơ bản

Điều này có vẻ hiển nhiên, nhưng dù sao cũng phải nhắc tới nói:

Tại cốt lõi của nó, lập trình web là bao gồm mọi thứ về xây dựng trang web

Một trang web có thể là một trang web đơn giản hoặc nó có thể là một ứng dụng web cực kỳ phức tạp.

Nếu bạn có thể xem nó trên web bằng trình duyệt, thì nó phải liên quan đến phát triển web.

Đây là một lời giải thích đơn giản về cách các trang web trên internet đang hoạt động:

  1. Website: về cơ bản là một loạt các tập tin được lưu trữ trên các máy tính được gọi là máy chủ.
  2. Máy chủ: là máy tính được sử dụng để lưu trữ trang web, có nghĩa là chúng lưu trữ các tập tin trang web. Các máy chủ này được kết nối với mạng khổng lồ có tên World Wide Web hay là Internet.
  3. Trình duyệt: là chương trình mà bạn chạy trên máy tính của bạn. Chúng tải các tập tin trang web thông qua kết nối internet. Máy tính của bạn còn được gọi là máy khách , kết nối với máy chủ .

Đọc thêm

3 thành phần tạo nên mọi trang web

Như đã đề cập ở trên, các trang web được tạo thành từ các tập tin, chủ yếu là HTML, CSS và JavaScript.

Chúng ta hãy xem xét kỹ hơn từng cái:

HTML hay là Ngôn ngữ Đánh dấu Siêu văn bản

HTML là nền tảng của tất cả các trang web. Đây là loại tệp chính được tải trong trình duyệt của bạn khi bạn xem một trang web.

Bạn thực sự có thể tạo một trang web rất cơ bản chỉ bằng cách sử dụng HTML và không có loại tệp nào khác.

Nó sẽ trông không đẹp, nhưng đó là mức tối thiểu mà bạn cần để tạo ra một trang web.

CSS hay là Cascading Style Sheets

Không có CSS, một trang web sẽ trông có vẻ thẩm mỹ như một tài liệu Word.

Với CSS, bạn có thể thêm mọi màu sắc, mọi font chữ hấp dẫn và trình bày bố cục trang web theo bất kỳ cách nào bạn muốn.

Bạn thậm chí có thể thêm chuyển động và vẽ hình bằng CSS nâng cao.

JavaScript

JavaScript là ngôn ngữ lập trình cho phép bạn tương tác với các yếu tố trên trang web và thao tác với chúng.

Trong khi CSS thêm phong cách vào HTML, JavaScript thêm tương tác và làm cho trang web linh động hơn.

Ví dụ: bạn có thể sử dụng JavaScript để cuộn lên đầu trang khi bạn nhấp vào nút hoặc để tạo trình chiếu bằng các nút để điều chỉnh hướng chạy của hình ảnh.

Để làm việc với các tệp HTML, CSS và JavaScript, bạn sẽ cần sử dụng một chương trình máy tính gọi là code editor.

Điều này đưa chúng ta đến điểm tiếp theo:

Sử dụng code editor như thế nào?

Đây là một câu hỏi rất phổ biến, đặc biệt nếu bạn mới bắt đầu.

Code editor tốt nhất sẽ phụ thuộc nhiều vào loại code bạn đang viết.

Nếu bạn đang chủ yếu làm và học HTML, CSS và JavaScript, bạn có thể viết code trong Windows Notepad hoặc TextEdit cho máy Mac nếu bạn muốn.

Các chương trình code editor như Sublime hoặc VS Code đi kèm với rất nhiều tính năng giúp coding dễ dàng hơn.

Chúng cho phép bạn canh lề nhiều dòng văn bản sang phải hoặc trái và có thể làm nổi bật văn bản theo các cách khác nhau tùy thuộc vào ngôn ngữ của tệp đó.

Sử dụng code editor như thế nào? - Nordic Coder

Ví dụ về syntax highlight trong VS Code

Đối với các ngôn ngữ backend (mà chúng ta sẽ nói đến trong phần sau), bạn sẽ cần một code editor mạnh mẽ hơn được gọi là IDE (Integrated Development Environment). IDE có các tính năng cho phép bạn debug và compile (xử lý) code của bạn.

Dưới đây là một số code editor phổ biến:

6-Visual Studio Code Nordic Coder

VS Code: Phiên bản nhẹ này của Visual Studio, IDE chính của Microsoft, chỉ mới vài năm nhưng nó đã trở nên cực kỳ phổ biến, do tốc độ, dễ sử dụng và các tính năng mạnh mẽ.

6-Atom Nordic Coder

Atom: Được tạo bởi GitHub và được quảng cáo là một code editor có thể hack được, Atom là một code editor đang được yêu thích. Một trong những thế mạnh chính của nó là khả năng tùy biến. Bạn có thể cài đặt các package và theme để thêm các tính năng cho chương trình.

6-Sublime Nordic Coder

Sublime: Một chương trình cực kỳ phổ biến đã xuất hiện được một thời gian. Giống như Atom, bạn có thể cài đặt các gói và chủ đề, và nó cũng có hiệu suất nhanh chóng. Không giống như hai code editor khác, Sublime có giá 70 đô la (nhưng miễn phí để dùng thử).

Tôi khuyên bạn nên thử một số hoặc tất cả các code editor này, để so sánh. Sau đó chọn một cái và đi theo nó, tìm hiểu các tính năng và phím tắt thông dụng.

Version control

Bây giờ bạn đã có code editor của mình và bạn đang bắt đầu viết code. Tuy nhiên, điều gì xảy ra nếu bạn mắc lỗi trong code và phải phục hồi tất cả các thay đổi code của mình trước lỗi đó?

Và nhấn Ctrl-Z để phục hồi một triệu lần sẽ không hiệu quả với bạn. Bạn sẽ làm gì?

Câu trả lời là version control!

Version control giống như là có nhiều điểm lưu cho các tệp mã của bạn.

Nếu bạn nghĩ rằng bạn có thể sắp thực hiện một số thay đổi code có thể phá vỡ mọi thứ, bạn có thể tạo một điểm lưu mới (được gọi là commit).

Sau đó, nếu bạn phá vỡ trang web của mình, bạn có thể phục hồi nguyên code của mình về trạng thái trước đó.

Nó có thể là cứu cánh nếu bạn từng phạm sai lầm mà bạn rất cần phải phục hồi.

Version control nghe thật tuyệt vời! Vậy nó hoạt động như thế nào?

Sử dụng hệ thống version control (VCS) bao gồm việc lưu trữ các tệp code của bạn và toàn bộ lịch sử thay đổi vào chỗ gọi là repository.

Thông thường bạn sẽ sử dụng một repository cho mỗi trang web hoặc dự án.

Sau đó, bạn lưu trữ repository trực tuyến của mình trong chỗ gọi là central repository  và đồng thời cũng giữ một phiên bản trên máy tính của bạn trong local repository.

Khi bạn thực hiện các thay đổi trên máy tính của mình, bạn có thể tạo các commit và sau đó đẩy chúng lên central repository.

Quá trình này cho phép nhiều người làm việc trên cùng một bộ code, thậm chí thay đổi cùng một tệp.

Git là VCS phổ biến nhất hiện nay

Hệ thống version control chính hiện nay là Git. Đối thủ cạnh tranh chính của nó là Subversion (SVN), một hệ thống cũ hơn.

Nhưng phần lớn các bootcamp và hướng dẫn code sẽ sử dụng Git, vì vậy đó là những gì tôi khuyên bạn nên học.

Đọc thêm

Bây giờ, khi chúng ta chuyển sang giải thích các ngôn ngữ lập trình và framework được sử dụng, chúng ta sẽ sử dụng các thuật ngữ mà bạn có thể đã gặp: frontend và backend.

Frontend là tất cả mọi thứ về cách trang web trông như thế nào một cách trực quan

6-Frontend là tất cả mọi thứ về cách trang web trông như thế nào một cách trực quan.

Sarah Maes qua GIPHY

Frontend (hoặc client-side) đề cập đến những gì được trình duyệt của người dùng tải, còn được gọi là máy khách.

Đây sẽ là HTML và CSS mà chúng tôi bắt đầu nói đến. JavaScript ban đầu chỉ là ngôn ngữ lập trình frontend, nhưng ngày nay bạn có thể sử dụng JavaScript làm ngôn ngữ phía máy chủ hay còn gọi là ngôn ngữ backend.

Frontend có vai trò to lớn trong việc làm trang web trông đẹp hơn.

Ngoài ra, nó cũng liên quan đến việc làm cho trang web hoạt động theo cách hợp lý với người dùng (còn gọi là UX hoặc trải nghiệm người dùng).

Nếu bạn thích điều chỉnh CSS của mình để đảm bảo trang web hoàn hảo về pixel và thêm hiệu ứng động JavaScript một cách tinh tế hỗ trợ người dùng, thì bạn có thể sẽ thích học lập trình frontend.

Backend là tất cả mọi thứ về chức năng và đảm bảo mọi thứ hoạt động tốt

Trong khi frontend là về sự xuất hiện và hành vi trực quan của trang web, thì backend là về việc làm cho mọi thứ hoạt động phía sau hậu trường.

Nếu bạn đang làm lập trình back-end, bạn sẽ thực hiện các tác vụ như xử lý các yêu cầu đến máy chủ và cơ sở dữ liệu.

Một số ví dụ về công việc backend sẽ là lưu dữ liệu khi ai đó điền vào biểu mẫu trên trang liên hệ hoặc truy xuất dữ liệu để hiển thị các bài đăng trên blog theo một danh mục cụ thể mà người dùng yêu cầu.

Công việc backend cũng có thể liên quan đến thiết lập trang web trên máy chủ, xử lý triển khai và thiết lập cơ sở dữ liệu SQL.

Nếu việc thiết lập tất cả các chức năng của một trang web nghe có vẻ thú vị với bạn, bạn có thể hợp với việc lập trình backend!

Đặt cả hai lại với nhau

6-Frontend, backend, hay full-stack?

Cái tên frontend và backend xuất hiện bởi vì frontend là những gì bạn có thể thấy trong trình duyệt của mình.

Và backend là phần mà bạn không thể nhìn thấy, nhưng nó xử lý rất nhiều công việc nặng nhọc và làm chức năng hỗ trợ cho frontend.

Bạn có thể nghĩ về frontend là mặt tiền của cửa hàng, phần duy nhất mà hầu hết khách hàng sẽ nhìn thấy. Backend giống như các trung tâm sản xuất, phân phối và vận hành giúp cửa hàng hoạt động.

Cả hai thực hiện các chức năng riêng biệt nhưng đều quan trọng như nhau.

Nên chọn Frontend, backend hay full-stack?

Trong lập trình web, bạn có thể tập trung vào chỉ frontend hoặc backend. Hoặc bạn có thể làm cả hai, được gọi là full-stack.

Những gì bạn chọn để tập trung vào chủ yếu nên phụ thuộc vào hai điều:

  • Sở thích cá nhân của bạn: Không phải ai cũng thích cả frontend và backend.
  • Tính khả dụng của công việc: Duyệt qua danh sách công việc tại nơi bạn ở và tham gia vào các cuộc gặp gỡ về lập trình trong cộng đồng IT để cảm nhận hiện có những loại công việc nào.

Điều đáng nói là nếu bạn thích cả frontend và backend, việc trở thành một lập trình viên full-stack sẽ giúp bạn có nhiều lựa chọn hơn.

Điều này có nghĩa là bạn càng có thể làm việc với nhiều công nghệ, bạn càng được giao nhiều nhiệm vụ hơn.

Stack Overflow đã báo cáo trong cuộc khảo sát năm 2017 rằng 63,7% người dùng được xác định là full-stack, 24,4% là backend và 11,9% là lập trình viên frontend:

6-Stack Overflow report

Tuy nhiên, một lần nữa, điều này cũng phụ thuộc rất nhiều vào công ty. Một số công ty có thể sử dụng các lập trình viên full-stack, trong khi những nơi khác thì chia ra frontend và backend.

Một số nơi cũng có các lập trình viên frontend tham gia vào thiết kế và xây dựng giao diện người dùng cho ứng dụng.

Xem tiếp: Phần 2 | Phần 3

Bạn muốn trở thành lập trình viên chuyên nghiệp trong thời gian ngắn nhất? Bạn muốn có việc làm IT mức lương khủng sau khoá học? Hãy đăng ký các khoá học lập trình online và offline tại Nordic Coder – Trung tâm dạy lập trình uy tín và chuyên nghiệp. Ngoài ra, Nordic Coder còn là cầu nối nghề nghiệp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.