|
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 3 months ago | |
| 2-js-basics | 3 months ago | |
| 3-terrarium | 3 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 3 months ago | |
| 9-chat-project | 3 months ago | |
| 10-ai-framework-project | 3 months ago | |
| Git-Basics | 4 months ago | |
| docs | 5 months ago | |
| lesson-template | 5 months ago | |
| memory-game | 4 months ago | |
| quiz-app | 5 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 5 months ago | |
| CONTRIBUTING.md | 5 months ago | |
| README.md | 2 months ago | |
| SECURITY.md | 5 months ago | |
| SUPPORT.md | 5 months ago | |
| _404.md | 5 months ago | |
| for-teachers.md | 4 months ago | |
README.md
Phát triển Web cho Người mới bắt đầu - Một chương trình học
Học các kiến thức cơ bản về phát triển web với khóa học 12 tuần toàn diện của Microsoft Cloud Advocates. Mỗi bài học trong 24 bài sẽ đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như làm terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia các bài kiểm tra, thảo luận và bài tập thực hành. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức của bạn với phương pháp học 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 Azure AI Foundry Discord
Thực hiện các bước sau để bắt đầu sử dụng tài nguyên này:
- Fork kho lưu trữ: Nhấp vào
- Clone kho lưu trữ:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia và nhà phát triển khác
🌐 Hỗ trợ đa ngôn ngữ
Được hỗ trợ qua GitHub Action (Tự động & Luôn cập nhật)
Tiếng Ả Rập | Tiếng Bengal | Tiếng Bulgaria | Tiếng Miến Điện (Myanmar) | Tiếng Trung (Giản thể) | Tiếng Trung (Phồn thể, Hồng Kông) | Tiếng Trung (Phồn thể, Macau) | Tiếng Trung (Phồn thể, Đài Loan) | Tiếng Croatia | Tiếng Séc | Tiếng Đan Mạch | Tiếng Hà Lan | Tiếng Estonia | Tiếng Phần Lan | Tiếng Pháp | Tiếng Đức | Tiếng Hy Lạp | Tiếng Do Thái | Tiếng Hindi | Tiếng Hungary | Tiếng Indonesia | Tiếng Ý | Tiếng Nhật | Tiếng Hàn | Tiếng Litva | Tiếng Mã Lai | Tiếng Marathi | Tiếng Nepal | Tiếng Na Uy | Tiếng Ba Tư (Farsi) | Tiếng Ba Lan | Tiếng Bồ Đào Nha (Brazil) | Tiếng Bồ Đào Nha (Bồ Đào Nha) | Tiếng Punjab (Gurmukhi) | Tiếng Romania | Tiếng Nga | Tiếng Serbia (Cyrillic) | Tiếng Slovak | Tiếng Slovenia | Tiếng Tây Ban Nha | Tiếng Swahili | Tiếng Thụy Điển | Tiếng Tagalog (Philippines) | Tiếng Tamil | Tiếng Thái | Tiếng Thổ Nhĩ Kỳ | Tiếng Ukraina | Tiếng Urdu | Tiếng Việt
Nếu bạn muốn có thêm các ngôn ngữ dịch, danh sách các ngôn ngữ được hỗ trợ có tại đây
🧑🎓 Bạn là học sinh/sinh viên?
Truy cập Trang Hub dành cho Học sinh nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, các gói dành cho học sinh và thậm chí là cách nhận voucher chứng chỉ miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên vì nội dung sẽ được thay đổi hàng tháng.
📣 Thông báo - Thử thách chế độ Agent của GitHub Copilot mới để hoàn thành!
Thử thách mới đã được thêm, tìm "Thử thách GitHub Copilot Agent 🚀" 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 từng sử dụng chế độ Agent trước đây, nó không chỉ có khả năng tạo 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 nữa.
📣 Thông báo - Dự án mới để xây dựng bằng AI Tạo sinh
Dự án Trợ lý AI mới vừa được thêm, hãy xem dự án
📣 Thông báo - Chương trình học mới về AI Tạo sinh cho JavaScript vừa được phát hành
Đừng bỏ lỡ chương trình học AI Tạo sinh 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 thú vị và hấp dẫn, bạn sẽ được 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, 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ư:
- Tạo prompt và kỹ thuật tạo prompt
- Ứng dụng tạo 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 đã bao gồm 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, hãy bắt đầu bằng 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 khác nhau và kiểm tra 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 của bạn, hãy kết nối với bạn bè để cùng làm các dự án! Khuyến khích thảo luận trong diễn đàn thảo luận của chúng tôi nơi đội ngũ quản trị viên của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn.
Để mở rộng kiến thức của bạn, chúng tôi khuyến khích bạn khám phá Microsoft Learn để tìm thêm tài liệu học tập.
📋 Thiết lập môi trường của bạn
Chương trình học này đã có sẵn môi trường phát triển! Khi bạn bắt đầu, bạn có thể chọn chạy chương trình học trong một Codespace (một môi trường dựa trên trình duyệt, không cần cài đặt), hoặc trên máy tính của bạn bằng cách 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 công việc của bạn, chúng tôi khuyến nghị bạn tạo một bản sao của kho lưu trữ này. Bạn có thể làm điều này 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 một bản sao của chương trình học.
Thực hiện các bước sau:
- 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.
- Clone kho lưu trữ:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Chạy chương trình học trong Codespace
Trong bản sao kho lưu trữ mà bạn đã tạo, nhấp vào 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 học trên máy tính của bạn
Để chạy chương trình học này trên máy tính của bạn, 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ụ, sẽ hướng dẫn bạn qua các tùy chọn khác nhau cho từng công cụ này để bạn chọn những gì phù hợp nhất với bạn.
Chúng tôi khuyến nghị sử dụng Visual Studio Code làm trình soạn thảo, nó cũng có một Terminal tích hợp sẵn. Bạn có thể tải xuống Visual Studio Code tại đây.
-
Clone kho lưu trữ của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấp vào nút Code và sao chép URL:
Sau đó, mở Terminal trong Visual Studio Code và chạy lệnh sau, thay
<your-repository-url>bằng URL bạn vừa sao chép:git clone <your-repository-url> -
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 clone.
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:
- sketchnote 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ựa trên dự án, hướng dẫn từng bước để xây dựng dự án
- kiểm tra kiến thức
- một thử thách
- tài liệu đọc bổ sung
- bài tập
- bài kiểm tra sau bài học
Lưu ý về bài kiểm tra: Tất cả các bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra, mỗi bài gồm ba câu hỏi. Chúng có sẵn tại đây và ứ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 | Các Khái Niệm Được Dạy | Mục Tiêu Học Tập | Liên Kết Bài Học | Tác Giả | |
|---|---|---|---|---|---|
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ hỗ trợ | Tìm hiểu các nguyên lý cơ bản đằng sau hầu hết các ngôn ngữ lập trình và phần mềm giúp 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ụ hỗ trợ | 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ủa bạ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 nguyên tắc cơ bản về khả năng truy cập web | Nguyên tắc cơ bản về Khả năng truy cập | Christopher |
| 04 | Cơ bản JS | Kiểu dữ liệu trong JavaScript | Các nguyên tắc cơ bản về kiểu dữ liệu trong JavaScript | Kiểu Dữ Liệu | Jasmine |
| 05 | Cơ bản JS | 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 | Cơ bản JS | Ra quyết định với JS | 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 | Ra Quyết Định | Jasmine |
| 07 | Cơ bản JS | Mảng và Vòng lặp | Làm việc với dữ liệu bằng mảng và vòng lặp trong JavaScript | Mảng và Vòng lặp | Jasmine |
| 08 | Terrarium | HTML trong thực tế | Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào việc xây dựng bố cục | Giới thiệu về HTML | Jen |
| 09 | Terrarium | CSS trong thực tế | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các nguyên tắc cơ bản của CSS bao gồm làm cho trang web đá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ư một 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 | Trò chơi gõ phím | 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 của ứng dụng JavaScript của bạn | Lập trình dựa trên sự kiện | Christopher |
| 12 | Tiện ích mở rộng trình duyệt xanh | Làm việc với trình duyệt | Tìm hiểu cách trình duyệt hoạt động, lịch sử của chúng và cách tạo các yếu tố đầu tiên của tiện ích mở rộng trình duyệt | Về trình duyệt | Jen |
| 13 | Tiện ích mở rộng trình duyệt xanh | Xây dựng biểu mẫu, gọi API và lưu trữ biến trong bộ nhớ cục bộ | Xây dựng các yếu tố JavaScript của tiện ích mở rộng trình duyệt của bạn để gọi API bằng các biến được lưu trữ trong bộ nhớ cục bộ | API, Biểu mẫu và Bộ nhớ cục bộ | Jen |
| 14 | Tiện ích mở rộng trình duyệt xanh | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các quá trình nền của trình duyệt để quản lý biểu tượng của tiện ích mở rộng; tìm hiểu về hiệu suất web và một số tối ưu hóa để cải thiện | Nhiệm vụ nền và Hiệu suất | Jen |
| 15 | Trò chơi không gian | Phát triển trò chơi nâng cao hơn với JavaScript | Tìm hiểu về Kế thừa bằng cách sử dụng cả Lớp và Thành phần và mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | Giới thiệu về Phát triển Trò chơi Nâng cao | Chris |
| 16 | Trò chơi không gian | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các yếu tố lên màn hình | Vẽ lên Canvas | Chris |
| 17 | Trò chơi không gian | Di chuyển các yếu tố trên màn hình | Khám phá cách các yếu tố có thể chuyển động bằng cách sử dụng tọa độ cartesian và API Canvas | Di chuyển các yếu tố | Chris |
| 18 | Trò chơi không gian | Phát hiện va chạm | Làm cho các yếu tố va chạm và phản ứng với nhau bằng cách sử dụng các phím nhấn và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi | Phát hiện Va chạm | Chris |
| 19 | Trò chơi không gian | Ghi điểm | Thực hiện các phép tính toán học dựa trên trạng thái và hiệu suất của trò chơi | Ghi điểm | Chris |
| 20 | Trò chơi không gian | Kết thúc và khởi động lại trò chơi | Tìm hiểu về việc 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 | Ứng dụng Ngân hàng | 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 của một trang web nhiều trang bằng cách sử dụng định tuyến và mẫu HTML | Mẫu HTML và Định tuyến | Yohan |
| 22 | Ứng dụng Ngân hàng | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu về việc xây dựng biểu mẫu và xử lý các quy trình xác thực | Biểu mẫu | Yohan |
| 23 | Ứng dụng Ngân hàng | Phương pháp 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à xử lý dữ liệu | Dữ liệu | Yohan |
| 24 | Ứng dụng Ngân hàng | Khái niệm về Quản lý Trạng thái | Tìm hiểu cách ứng dụng của bạn duy trì 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 | Trình duyệt/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ã | Sử dụng Trình soạn thảo Mã VScode | Chris |
| 26 | Trợ lý AI | 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 học của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính:
- học tập dựa trên dự án
- bài kiểm tra thường xuyên
Chương trình giảng dạy các nguyên tắ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 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 với môi trường, trò chơi kiểu không gian và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ có được sự hiểu biết vững chắc về phát triển web.
🎓 Bạn có thể tham gia một số bài học đầu tiên trong chương trình này dưới dạng Lộ trình học trên Microsoft Learn!
Bằng cách đảm bảo rằng nội dung phù hợp với các dự án, quá trình học tập trở nên thú vị hơn cho học viên và việc 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ác nguyên tắc cơ bản của JavaScript để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "Dành cho người mới bắt đầu: JavaScript", một số tác giả của bộ sưu tập này đã đóng góp vào chương trình học này.
Ngoài ra, một bài kiểm tra không áp lực trước lớp sẽ định hướng ý định của học viên đối với việc học một chủ đề, trong khi một bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ thêm. Chương trình học này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu từ nhỏ và trở nên phức tạp hơn vào 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 như một nhà phát triển web trước khi áp dụng một framework, một bước tiếp theo tốt sau khi hoàn thành chương trình học này sẽ là tìm hiểu về Node.js thông qua một bộ sưu tập video khác: "Dành cho người mới bắt đầu: Node.js".
Hãy ghé thăm Quy tắc ứng xử và Hướng dẫn đóng góp của chúng tôi. Chúng tôi 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ủa bạn, và sau đó trong thư mục gốc của repo này, gõ docsify serve. Trang web sẽ được phục vụ trên cổng 3000 trên localhost của bạn: localhost:3000.
Một tệp 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 sản xuất các khóa học khác! Hãy xem:
LangChain
Azure / Edge / MCP / Agents
Chuỗi AI Tạo Sinh
Học Tập Cốt Lõi
Chuỗi Copilot
Nhận Hỗ Trợ
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 các học viên và 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 mọi câu hỏi đều đượ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 gặp 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ố miễn trừ 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 không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp của con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.


