Web-Dev-For-Beginners/translations/vi

Phát triển Web cho Người mới bắt đầu - Chương trình học

Học những điều cơ bản về phát triển web với khóa học toàn diện 12 tuần do Microsoft Cloud Advocates thiết kế. Mỗi trong số 24 bài học đào sâu về JavaScript, CSS, và HTML thông qua các dự án thực hành như terrariums, 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 tế. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức với phương pháp 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 các tài nguyên này:

1. Fork Kho lưu trữ: Nhấp vào
2. Clone Kho lưu trữ: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Tham gia Discord Azure AI Foundry và gặp gỡ các chuyên gia cũng như các nhà phát triển khác

🌐 Hỗ trợ Đa ngôn ngữ

Hỗ trợ qua GitHub Action (Tự động & Luôn được 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

Ưu tiên Clone về máy tính?

Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ làm tăng đáng kể kích thước tải xuống. Để clone mà không có bản dịch, hãy 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 tất cả những gì bạn cần để 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 các ngôn ngữ dịch hỗ trợ được liệt kê ở đây

🧑‍🎓 Bạn là sinh viên?

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

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

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

📣 Thông báo - Dự án mới xây dựng sử dụng AI Tạo sinh

Dự án Trợ lý AI mới vừa được thêm, xem ngay dự án

📣 Thông báo - Chương trình học mới về Generative AI cho JavaScript vừa được phát hành

Đừng bỏ lỡ chương trình học 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 phủ 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 thú vị và hấp dẫn, bạn sẽ du hành thời gian!

Mỗi bài học bao gồm một bài tập hoàn thành, 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ư:

• Lời nhắc và kỹ thuật tạo lời nhắc
• 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

Giáo viên, chúng tôi đã đưa ra một số gợi ý về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được 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, với 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 hiểu biết của bạn bằng 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 bạn bè để cùng làm các dự án! Thảo luận được khuyến khích trong diễn đàn thảo luận nơi đội ngũ điều hành của chúng tôi sẽ hỗ trợ trả lời câu hỏi của bạn.

Để mở rộng kiến thức, chúng tôi khuyên bạn nên khám phá Microsoft Learn để có thêm tài liệu học tập.

📋 Thiết lập môi trường

Chương trình học này đã có 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 sử dụ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

Để dễ dàng lưu trữ công việc của bạn, bạn nên tạo bản sao riêng của kho lưu trữ này. Bạn có thể làm điều đó bằng cách nhấp vào nút Use this template ở đầ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 học.

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

1. Fork Kho lưu trữ: Nhấp vào nút "Fork" ở góc trên bên phải của trang này.
2. Clone 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ấp nút Code và chọn Open with Codespaces. Điều này sẽ tạo 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 cần trình soạn thảo văn bản, trình duyệt và 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ụ, sẽ hướng dẫn bạn các lựa chọn cho từng công cụ để bạn chọn phù hợp nhất.

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

1. Clone kho lưu trữ về máy tính. Bạn có thể làm điều này bằng cách nhấp 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 khuyến nghị:

• 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:

• có thể có sketchnote tùy chọn
• có thể có video bổ sung tùy chọn
• bài kiểm tra làm nóng trước bài học
• bài học viết
• đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án
• các bài kiểm tra kiến thức
• một thử thách
• tài liệu đọ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 đều nằm trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra với mỗi bài 3 câu hỏi. Chúng có sẵn tại đây; ứng dụng kiểm tra có thể chạy cục bộ hoặ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	Getting Started	Giới thiệu về Lập trình và Công cụ làm việc	Tìm hiểu nền tảng cơ bản đằng sau hầu hết các ngôn ngữ lập trình và về phần mềm hỗ trợ các nhà phát triển chuyên nghiệp	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Kiến thức cơ bản về GitHub, bao gồm làm việc nhóm	Cách sử dụng GitHub trong dự án của bạn, cách hợp tác với người khác trên mã code	Intro to GitHub	Floor
03	Getting Started	Khả năng truy cập	Tìm hiểu các kiến thức cơ bản về truy cập web	Accessibility Fundamentals	Christopher
04	JS Basics	Các loại dữ liệu trong JavaScript	Các kiến thức cơ bản về các loại dữ liệu trong JavaScript	Data Types	Jasmine
05	JS Basics	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 ứng dụng	Functions and Methods	Jasmine và Christopher
06	JS Basics	Ra quyết định với JavaScript	Tìm hiểu cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định	Making Decisions	Jasmine
07	JS Basics	Mảng và Vòng lặp	Làm việc với dữ liệu bằng cách sử dụng mảng và vòng lặp trong JavaScript	Arrays and Loops	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	Introduction to 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 kiến thức cơ bản CSS bao gồm làm trang web phản hồi	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, thao tác DOM	Xây dựng JavaScript để làm cho terrarium hoạt động như giao diện kéo và thả, tập trung vào closures và thao tác DOM	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Xây dựng trò chơi đánh máy	Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển luồng logic cho ứng dụng JavaScript của bạn	Event-Driven Programming	Christopher
12	Green Browser Extension	Làm việc với Trình duyệt	Tìm hiểu về cách trình duyệt hoạt động, lịch sử của nó và cách dựng khung đầu tiên cho tiện ích mở rộng trình duyệt	About Browsers	Jen
13	Green Browser Extension	Xây dựng biểu mẫu, gọi API và lưu biến trong 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 lưu trữ trong bộ nhớ cục bộ	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Các tiến trình nền của trình duyệt, hiệu suất web	Sử dụng các tiến 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	Background Tasks and Performance	Jen
15	Space Game	Phát triển trò chơi nâng cao hơn với JavaScript	Tìm hiểu về Kế thừa sử dụng cả Lớp và Thành phần cũng như mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi	Introduction to Advanced Game Development	Chris
16	Space Game	Vẽ lên canvas	Tìm hiểu về Canvas API, sử dụng để vẽ các phần tử lên màn hình	Drawing to Canvas	Chris
17	Space Game	Di chuyển các phần tử trên màn hình	Khám phá cách các phần tử có thể di chuyển sử dụng tọa độ Decart và Canvas API	Moving Elements Around	Chris
18	Space Game	Phát hiện va chạm	Làm cho các phần tử va chạm và phản ứng lẫn nhau sử dụng phím bấm và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi	Collision Detection	Chris
19	Space Game	Giữ điểm số	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	Keeping Score	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 các giá trị biến	The Ending Condition	Chris
21	Banking App	Mẫu HTML và Định tuyến trong Web App	Tìm hiểu cách tạo khung kiến trúc website nhiều trang bằng kỹ thuật định tuyến và mẫu HTML	HTML Templates and Routes	Yohan
22	Banking App	Xây dựng mẫu đăng nhập và đăng ký	Tìm hiểu cách xây dựng biểu mẫu và xử lý các quy trình xác thực	Forms	Yohan
23	Banking App	Các phương thức lấy và sử dụng dữ liệu	Cách dữ liệu chảy vào và ra khỏi ứng dụng của bạn, cách lấy dữ liệu, lưu trữ và loại bỏ	Data	Yohan
24	Banking App	Các 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	State Management	Yohan
25	Browser/VScode Code	Làm việc với VScode	Tìm hiểu cách sử dụng trình soạn thảo mã	Use VScode Code Editor	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	AI Assistant project	Chris

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

Chương trình học của chúng tôi được thiết kế dựa trên hai nguyên tắc sư phạm chủ chốt:

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

Chương trình giảng dạy dạy các kiến thức cơ bản của JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học sinh sẽ có cơ hội phát triển kinh nghiệm thực hành bằng cách xây dựng trò chơi đánh máy, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu xâm lược không gian 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ẽ nắm chắc kiến thức cơ bản về phát triển web.

🎓 Bạn có thể theo học vài bài học đầu tiên trong chương trình này dưới dạng Learn Path 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 sinh và khả năng ghi nhớ các khái niệm sẽ được tăng cường. Chúng tôi cũng đã viết 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 "Beginners Series to: JavaScript", một số tác giả của video này đã góp sức vào chương trình học này.

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

Mặc dù chúng tôi cố tình 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 một nhà phát triển web trước khi áp dụng framework, bước tiếp theo tốt để hoàn thành chương trình học này là tìm hiểu về Node.js thông qua bộ sưu tập video khác: "Beginner Series to: Node.js".

Hãy tham khảo hướng dẫn Quy tắc ứng xử và Đóng góp của chúng tôi. Chúng tôi rất hoan nghênh phản hồi 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 kho lưu trữ này, cài đặt Docsify trên máy tính của bạn, sau đó trong thư mục gốc của kho này, gõ docsify serve. Trang web sẽ được phục vụ trên cổng 3000 tại localhost của bạn: localhost:3000.

📘 PDF

Bản PDF của tất cả các bài học có thể được tìm thấy tại đâ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 qua:

LangChain

---

Azure / Edge / MCP / Agents

---

Chuỗi AI Tạo Sinh

---

Học Tập Cốt Lõi

---

Chuỗi 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 giàu 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 chào đón và kiến thức được chia sẻ tự do.

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 cố gắng đả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ữ nguyên bản nên được xem là nguồn thông tin chính xác nhất. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi người dịch. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu nhầm hay giải thích sai nào phát sinh từ việc sử dụng bản dịch này.