Web-Dev-For-Beginners/translations/vi

Phát Triển Web Cho Người Mới Bắt Đầu - Một Chương Trình Đào Tạo

Học những kiến thức cơ bản về phát triển web với khóa học toàn diện kéo dài 12 tuần của Microsoft Cloud Advocates. Mỗi trong số 24 bài học sẽ đi sâu vào JavaScript, CSS và HTML qua các dự án thực hành như terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia với các bài kiểm tra, thảo luận và bài tập thực tiễn. Nâng cao kỹ năng và tối ưu việc ghi nhớ kiến thức với phương pháp dạy dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!

Tham gia Cộng Đồng Discord Azure AI Foundry

Làm theo các bước sau để bắt đầu sử dụng những tài nguyên này:

1. Tạo Fork cho Kho Lưu Trữ: Nhấn vào
2. Sao chép Kho Lưu Trữ: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia cùng lập trình viên đồng hành

🌐 Hỗ Trợ Đa Ngôn Ngữ

Hỗ trợ qua GitHub Action (Tự động & Luôn Cập Nhật)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Thích Sao Chép Locally?

Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ, điều này làm tăng đáng kể kích thước tải xuống. Để sao chép mà không có bản dịch, sử dụng sparse checkout:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

Điều này cung cấp cho bạn mọi thứ cần thiết để hoàn thành khóa học với tốc độ tải xuống nhanh hơn nhiều.

Nếu bạn muốn có thêm hỗ trợ cho các ngôn ngữ dịch khác, những ngôn ngữ được hỗ trợ được liệt kê tại đây

🧑‍🎓 Bạn là học sinh/ sinh viên?

Truy cập Trang Student Hub nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, gói dành cho sinh viên và thậm chí cả cách để có được phiếu chứng chỉ miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên khi chúng tôi thay đổi nội dung hàng tháng.

📣 Thông báo - Các thử thách chế độ GitHub Copilot Agent mới để hoàn thành!

Thử thách mới đã được thêm, hãy tìm "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đây là một thử thách mới để bạn hoàn thành bằng cách sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa sử dụng chế độ Agent trước đây, nó không chỉ tạo văn bản mà còn có thể tạo và chỉnh sửa file, chạy lệnh và nhiều hơn nữa.

📣 Thông báo - Dự Án Mới tạo bằng Generative AI

Dự án Trợ lý AI mới vừa được thêm, hãy kiểm tra dự án

📣 Thông báo - Chương Trình Đào Tạo Mới về Generative AI cho JavaScript vừa được phát hành

Đừng bỏ lỡ chương trình đào tạo Generative AI mới của chúng tôi!

Truy cập https://aka.ms/genai-js-course để bắt đầu!

• Các bài học bao gồm mọi thứ từ cơ bản đến RAG.
• Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi.
• Câu chuyện vui nhộn và hấp dẫn, bạn sẽ du hành ngược thời gian!

Mỗi bài học bao gồm một bài tập để hoàn thành, một bài kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:

• Việc tạo prompt và kỹ thuật prompt engineering
• Tạo ứng dụng văn bản và hình ảnh
• Ứng dụng tìm kiếm

Truy cập https://aka.ms/genai-js-course để bắt đầu!

🌱 Bắt Đầu

Các giáo viên, chúng tôi đã bao gồm một số đề xuất về cách sử dụng chương trình này. Chúng tôi rất mong nhận phản hồi của bạn trong diễn đàn thảo luận của chúng tôi!

Người học, cho mỗi bài học, bắt đầu với bài kiểm tra trước bài giảng và tiếp tục đọc tài liệu bài giảng, hoàn thành các hoạt động đa dạng và kiểm tra sự hiểu biết của bạn với bài kiểm tra sau bài giảng.

Để nâng cao trải nghiệm học tập, hãy kết nối với các bạn cùng học để làm dự án cùng nhau! Khuyến khích thảo luận trong diễn đàn thảo luận của chúng tôi nơi nhóm điều phối viên của chúng tôi sẽ sẵn sàng trả lời các câu hỏi của bạn.

Để thúc đẩy việc học tập của bạn, chúng tôi rất khuyến khích bạn khám phá Microsoft Learn để tìm tài liệu học thêm.

📋 Cài đặt môi trường

Chương trình này đã chuẩn bị sẵn môi trường phát triển! Khi bắt đầu bạn có thể chọn chạy chương trình trong Codespace (một môi trường trên trình duyệt, không cần cài đặt), hoặc chạy cục bộ trên máy tính của bạn bằng trình soạn thảo văn bản như Visual Studio Code.

Tạo kho lưu trữ của bạn

Để bạn dễ dàng lưu công việc, nên tạo bản sao kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấn nút Use this template ở trên đầu trang. Điều này sẽ tạo một kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao chương trình đào tạo.

Thực hiện theo các bước:

1. Tạo Fork Kho Lưu Trữ: Nhấn nút "Fork" ở góc trên bên phải trang này.
2. Sao chép Kho Lưu Trữ: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Chạy chương trình trong Codespace

Trong bản sao kho lưu trữ bạn đã tạo, nhấn nút Code và chọn Open with Codespaces. Điều này sẽ tạo một Codespace mới để bạn làm việc.

Chạy chương trình trên máy tính của bạn

Để chạy chương trình này trên máy tính, bạn sẽ cần một trình soạn thảo văn bản, một trình duyệt và một công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, Giới Thiệu Về Ngôn Ngữ Lập Trình và Công Cụ Làm Việc, sẽ hướng dẫn bạn qua các lựa chọn cho từng công cụ để bạn chọn cái phù hợp nhất.

Chúng tôi đề xuất sử dụng Visual Studio Code làm trình soạn thảo, nó cũng có Terminal tích hợp sẵn. Bạn có thể tải Visual Studio Code tại đây.

1. Sao chép kho lưu trữ về máy tính của bạn. Bạn có thể làm điều này bằng cách nhấn nút Code và sao chép URL:

   CodeSpace Sau đó, mở Terminal trong Visual Studio Code và chạy lệnh sau, thay thế <your-repository-url> bằng URL bạn vừa sao chép:

   git clone <your-repository-url>
   

2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào File > Open Folder và chọn thư mục bạn vừa sao chép.

Các tiện ích mở rộng Visual Studio Code được đề xuất:

• Live Server - để xem trước các trang HTML trong Visual Studio Code
• Copilot - giúp bạn viết mã nhanh hơn

📂 Mỗi bài học bao gồm:

• ghi chú minh hoạ tùy chọn
• video bổ sung tùy chọn
• bài kiểm tra khởi động trước bài học
• bài học viết
• đối với các bài học dự án, hướng dẫn từng bước cách xây dựng dự án
• kiểm tra kiến thức
• thử thách
• bài đọc bổ sung
• bài kiểm tra sau bài học post-lesson quiz

Lưu ý về các bài kiểm tra: Tất cả các bài kiểm tra được chứa trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra với ba câu hỏi mỗi bài. Chúng có sẵn ở đây và ứng dụng kiểm tra có thể chạy cục bộ hoặc được triển khai lên Azure; làm theo hướng dẫn trong thư mục quiz-app.

🗃️ Các bài học

	Tên Dự án	Khái niệm được dạy	Mục tiêu học tập	Bài học liên kết	Tác giả
01	Bắt đầu	Giới thiệu về lập trình và công cụ chuyên dụng	Tìm hiểu nền tảng cơ bản của hầu hết các ngôn ngữ lập trình và phần mềm hỗ trợ các nhà phát triển chuyên nghiệp làm việc	Giới thiệu về ngôn ngữ lập trình và công cụ chuyên dụng	Jasmine
02	Bắt đầu	Cơ bản về GitHub, bao gồm làm việc nhóm	Cách sử dụng GitHub trong dự án, cách cộng tác với người khác trên mã nguồn	Giới thiệu về GitHub	Floor
03	Bắt đầu	Khả năng truy cập	Tìm hiểu các kiến thức cơ bản về truy cập web	Kiến thức cơ bản về khả năng truy cập	Christopher
04	JS Cơ bản	Kiểu dữ liệu JavaScript	Kiến thức cơ bản về các kiểu dữ liệu trong JavaScript	Kiểu dữ liệu	Jasmine
05	JS Cơ bản	Hàm và phương thức	Tìm hiểu về hàm và phương thức để quản lý luồng logic của ứng dụng	Hàm và phương thức	Jasmine và Christopher
06	JS Cơ bản	Quyết định với JS	Học cách tạo điều kiện trong mã bằng các phương pháp ra quyết định	Ra quyết định	Jasmine
07	JS Cơ bản	Mảng và Vòng lặp	Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript	Mảng và Vòng lặp	Jasmine
08	Terrarium	HTML trong thực hành	Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào xây dựng bố cục	Giới thiệu về HTML	Jen
09	Terrarium	CSS trong thực hành	Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các kiến thức cơ bản về CSS bao gồm làm cho trang đáp ứng	Giới thiệu về CSS	Jen
10	Terrarium	Đóng gói JavaScript, thao tác DOM	Xây dựng JavaScript để làm cho terrarium hoạt động như giao diện kéo/thả, tập trung vào đóng gói và thao tác DOM	Đóng gói JavaScript, thao tác DOM	Jen
11	Typing Game	Xây dựng trò chơi gõ phím	Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic ứng dụng JavaScript	Lập trình theo sự kiện	Christopher
12	Green Browser Extension	Làm việc với trình duyệt	Tìm hiểu cách các trình duyệt hoạt động, lịch sử của chúng, và cách dựng sườn các thành phần đầu tiên của tiện ích mở rộng trình duyệt	Về trình duyệt	Jen
13	Green Browser Extension	Xây dựng biểu mẫu, gọi API và lưu biến vào bộ nhớ cục bộ	Xây dựng các thành phần JavaScript của tiện ích trình duyệt để gọi API sử dụng biến được lưu trong bộ nhớ cục bộ	API, Biểu mẫu và Bộ nhớ cục bộ	Jen
14	Green Browser Extension	Quá trình nền trong trình duyệt, hiệu suất web	Sử dụng các quy trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu suất web và một số tối ưu để cải thiện hiệu suất	Các tác vụ nền và hiệu suất	Jen
15	Space Game	Phát triển trò chơi nâng cao với JavaScript	Tìm hiểu về Kế thừa sử dụng cả Lớp và Cấu trúc, cũng như mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi	Giới thiệu phát triển trò chơi nâng cao	Chris
16	Space Game	Vẽ lên canvas	Tìm hiểu về API Canvas, dùng để vẽ các thành phần lên màn hình	Vẽ lên Canvas	Chris
17	Space Game	Di chuyển các thành phần xung quanh màn hình	Khám phá cách các thành phần có thể chuyển động sử dụng tọa độ Cartesian và API Canvas	Di chuyển các thành phần	Chris
18	Space Game	Phát hiện va chạm	Làm cho các thành phần va chạm và phản ứng với nhau sử dụng phím bấm và cung cấp một hàm cooldown để đảm bảo hiệu suất cho trò chơi	Phát hiện va chạm	Chris
19	Space Game	Tính điểm	Thực hiện các phép tính toán dựa trên trạng thái và hiệu suất của trò chơi	Tính điểm	Chris
20	Space Game	Kết thúc và khởi động lại trò chơi	Tìm hiểu về kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến	Điều kiện kết thúc	Chris
21	Banking App	Mẫu HTML và Định tuyến trong ứng dụng web	Tìm hiểu cách tạo khung kiến trúc cho một trang web đa trang sử dụng định tuyến và mẫu HTML	Mẫu HTML và Định tuyến	Yohan
22	Banking App	Xây dựng Biểu mẫu Đăng nhập và Đăng ký	Tìm hiểu về xây dựng biểu mẫu và xử lý các quy trình kiểm tra hợp lệ	Biểu mẫu	Yohan
23	Banking App	Phương thức lấy và sử dụng dữ liệu	Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và loại bỏ nó	Dữ liệu	Yohan
24	Banking App	Khái niệm Quản lý trạng thái	Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình	Quản lý trạng thái	Yohan
25	Browser/VScode Code	Làm việc với VScode	Học cách sử dụng trình soạn thảo mã	Sử dụng trình soạn thảo mã VScode	Chris
26	AI Assistants	Làm việc với AI	Tìm hiểu cách xây dựng trợ lý AI của riêng bạn	Dự án trợ lý AI	Chris

🏫 Phương pháp giảng dạy

Chương trình giảng dạy của chúng tôi được thiết kế với hai nguyên tắc giảng dạy chính:

• học dựa trên dự án
• bài kiểm tra thường xuyên

Chương trình dạy những kiến thức cơ bản về JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được sử dụng bởi các nhà phát triển web ngày nay. Học viên sẽ có cơ hội phát triển kinh nghiệm thực tế bằng cách xây dựng một trò chơi gõ phím, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện môi trường, trò chơi phong cách space-invader và ứng dụng ngân hàng cho doanh nghiệp. Cuối chuỗi bài học, học viên sẽ có hiểu biết vững chắc về phát triển web.

🎓 Bạn có thể học vài bài đầu trong chương trình này như một Lộ trình học trên Microsoft Learn!

Bằng cách đảm bảo nội dung phù hợp với dự án, quá trình học trở nên hấp dẫn hơn cho học viên và việc ghi nhớ các khái niệm được tăng cường. Chúng tôi cũng đã xây dựng một số bài học khởi đầu về cơ bản JavaScript để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập video "Seri dành cho người mới bắt đầu về: JavaScript", một số tác giả đã đóng góp cho chương trình này.

Ngoài ra, một bài kiểm tra nhẹ trước khi lớp học bắt đầu đặt mục tiêu học của học viên cho chủ đề, trong khi một bài kiểm tra thứ hai sau lớp giúp đảm bảo ghi nhớ kiến thức lâu hơn. Chương trình này được thiết kế để linh hoạt và vui nhộn, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu nhỏ và trở nên phức tạp hơn theo cuối chu kỳ 12 tuần.

Mặc dù chúng tôi cố ý tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết cho nhà phát triển web trước khi áp dụng framework, bước tiếp theo tốt sau khi hoàn thành chương trình có thể là học về Node.js qua bộ sưu tập video khác: "Seri dành cho người mới bắt đầu về: Node.js".

Truy cập Bộ Quy tắc Ứng xử và hướng dẫn Đóng góp của chúng tôi. Chúng tôi rất hoan nghênh phản hồi mang tính xây dựng của bạn!

🧭 Truy cập ngoại tuyến

Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng Docsify. Fork repo này, cài đặt Docsify trên máy cục bộ của bạn, rồi trong thư mục gốc của repo này, gõ docsify serve. Website sẽ được phục vụ trên cổng 3000 tại localhost của bạn: localhost:3000.

📘 PDF

Bạn có thể tìm thấy file PDF của tất cả các bài học ở đây.

🎒 Các Khóa học khác

Nhóm của chúng tôi còn sản xuất các khóa học khác! Hãy xem:

LangChain

Azure / Edge / MCP / Agents

---

Series AI Tạo sinh

---

Học cốt lõi

---

Series Copilot

Nhận trợ giúp

Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng ứng dụng AI. Hãy tham gia cùng những người học khác và các nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ nơi các câu hỏi được hoan nghênh và kiến thức được chia sẻ thoải mái.

Nếu bạn có phản hồi về sản phẩm hoặc lỗi trong quá trình xây dựng, hãy truy cập:

Giấy phép

Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp LICENSE để biết thêm thông tin.

---

Tuyên bố từ chối trách nhiệm:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi nỗ lực đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc sai sót. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn chính thức. Đối với những thông tin quan trọng, khuyến khích sử dụng dịch vụ dịch thuật chuyên nghiệp do con người thực hiện. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này.