|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 2 weeks ago | |
| 5-browser-extension | 2 weeks ago | |
| 6-space-game | 2 weeks ago | |
| 7-bank-project | 2 weeks ago | |
| 8-code-editor/1-using-a-code-editor | 2 weeks ago | |
| 9-chat-project | 2 weeks ago | |
| 10-ai-framework-project | 2 weeks ago | |
| Git-Basics | 2 weeks ago | |
| docs | 2 weeks ago | |
| lesson-template | 2 weeks ago | |
| memory-game | 2 weeks ago | |
| quiz-app | 2 weeks ago | |
| .co-op-translator.json | 1 week ago | |
| AGENTS.md | 1 week ago | |
| CODE_OF_CONDUCT.md | 2 weeks ago | |
| CONTRIBUTING.md | 2 weeks ago | |
| README.md | 1 week ago | |
| Roadmap.md | 1 week ago | |
| SECURITY.md | 2 weeks ago | |
| SUPPORT.md | 2 weeks ago | |
| _404.md | 2 weeks ago | |
| for-teachers.md | 2 weeks 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 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 12 tuần do các Chuyên Gia Microsoft Cloud biên soạn. Mỗi trong số 24 bài học đi sâu vào JavaScript, CSS và HTML thông 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 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 giảng 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 Azure AI Foundry trên Discord
Thực hiện các bước sau để bắt đầu sử dụng các tài nguyên này:
- Fork Kho Lưu Trữ: Nhấn
- 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 cùng 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ậ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 Kannada | Tiếng Hàn Quốc | Tiếng Litva | Tiếng Mã Lai | Tiếng Malayalam | Tiếng Marathi | Tiếng Nepal | Tiếng Pidgin Nigeria | 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 Punjabi (Gurmukhi) | Tiếng Romania | Tiếng Nga | Tiếng Serbia (Chữ Kirin) | Tiếng Slovakia | 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 Telugu | Tiếng Thái | Tiếng Thổ Nhĩ Kỳ | Tiếng Ukraina | Tiếng Urdu | Tiếng Việt
Muốn Clone cục bộ?
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. Để 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 sẽ 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 được hỗ trợ được liệt kê ở đây
🧑🎓 Bạn là 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, bộ dụng cụ dành cho sinh viên và thậm chí 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 định kỳ vì chúng tôi thay đổi nội dung hàng tháng.
📣 Thông báo - Thử thách Chế độ GitHub Copilot Agent mới để hoàn thành!
Thử thách mới đã được thêm vào, tìm thử thách "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đó là thử thách mới dành cho bạn sử dụng GitHub Copilot và chế độ Agent để hoàn thành. 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 nữa.
📣 Thông báo - Dự án Mới để xây dựng sử dụng Generative AI
Dự án trợ lý AI mới vừa được thêm, xem 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!
- Bài học bao gồm tất cả từ cơ bản đến RAG.
- Tương tác với các nhân vật lịch sử sử dụ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ẽ trải nghiệm 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ập trình lời nhắc và kỹ thuật lập trình 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 có đư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!
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 bằng cách đọc tài liệu giảng dạy, hoàn thành các hoạt động khác nhau 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.
Để tăng cường trải nghiệm học tập, hãy kết nối với bạn bè để làm việc cùng nhau trên các dự án! Thảo luận được khuyến khích trong diễn đàn thảo luận nơi nhóm điều hành của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn.
Để tiếp tục học tập, chúng tôi khuyến nghị bạ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 của bạn
Chương trình học này đã chuẩn bị môi trường phát triển sẵn sàng! Khi bắt đầu, bạn có thể chọn chạy chương trình học trong một Codespace (môi trường dựa 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, khuyến nghị bạ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 Sử dụng mẫu này ở đầu trang. Điều này sẽ tạo kho lưu trữ mới trong tài khoản GitHub của bạn với 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ấn 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ữ bạn vừa 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 học cục bộ 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ụ của nghề, sẽ hướng dẫn bạn qua các tùy chọn khác nhau cho mỗi công cụ để bạn chọn phù hợp nhất.
Khuyến nghị của chúng tôi là sử 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. Bạn có thể tải Visual Studio Code tại đây.
-
Clone 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ấp nút Code và sao chép URL:
CodeSpace Sau đó, mở Terminal bên 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 sao chép về.
Tiện ích mở rộng Visual Studio Code được khuyên dùng:
- Live Server - để xem trước các trang HTML ngay 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 cách 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 kiểm tra sau bài học post-lesson quiz
Ghi chú về các bài kiểm tra: Tất cả bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài với mỗi bài gồm ba câu hỏi. Chúng có thể truy cập tại đây. Ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai trên Azure; hãy 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 ngành | Tìm hiểu các nền tảng cơ bản đằng sau hầu hết ngôn ngữ lập trình và về phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Bắt Đầu | Những điề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 | Intro to GitHub | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận (Accessibility) | Học những kiến thức cơ bản về khả năng tiếp cận trên web | Accessibility Fundamentals | Christopher |
| 04 | JS Cơ Bản | Các kiểu dữ liệu trong JavaScript | Những kiến thức cơ bản về các kiểu dữ liệu trong JavaScript | Data Types | Jasmine |
| 05 | JS Cơ Bản | Các hàm và phương thức | Tìm hiểu về các hàm và phương thức để quản lý luồng logic ứng dụng | Functions and Methods | Jasmine and Christopher |
| 06 | JS Cơ Bản | Tạo quyết định với JS | Học 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 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 | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML trong thực hành | Xây dựng HTML để tạo một môi trường sinh thái 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 môi trường sinh thái 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 trang responsive | Introduction to CSS | Jen |
| 10 | Terrarium | Closure trong JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho môi trường sinh thái hoạt động như giao diện kéo/thả, tập trung vào closure và thao tác DOM | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Xây dựng trò chơi đánh máy | Học cách sử dụng sự kiện bàn phím để điều khiển logic ứ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 cách các trình duyệt hoạt động, lịch sử của chúng, và cách khởi tạo các phần tử đầu tiên của tiện ích 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ộ (local storage) | Xây dựng các phần tử JavaScript của tiện ích trình duyệt để gọi API sử dụng biến lưu trong bộ nhớ cục bộ | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | Các tiến trình nền trong trình duyệt, hiệu năng 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 năng web và một số tối ưu hóa để cải thiện | Background Tasks and Performance | 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 (Classes) và thành phần (Composition) và mẫu 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ề API Canvas, được 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ử quanh màn hình | Khám phá cách các phần tử có thể chuyển động bằng tọa độ Đề-các và API Canvas | 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 với nhau bằng phím bấm và cung cấp chức năng làm nguội để đảm bảo hiệu năng trò chơi | Collision Detection | Chris |
| 19 | Space Game | Giữ điểm | Thực hiện các phép toán dựa trên trạng thái và hiệu năng 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 giá trị biến | The Ending Condition | Chris |
| 21 | Banking App | Mẫu HTML và các tuyến trong ứng dụng web | Học cách tạo khung kiến trúc cho website nhiều trang bằng cách dùng routing và mẫu HTML | HTML Templates and Routes | Yohan |
| 22 | Banking App | Xây dựng biểu 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 pháp lấy và sử dụng dữ liệu | Cách luồng dữ liệu đi 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 | Data | 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 | 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 | Học cách xây dựng trợ lý AI riêng của bạn | AI Assistant project | Chris |
🏫 Phương pháp giảng dạy
Chương trình của chúng tôi được thiết kế dựa trên hai nguyên tắc giáo dục chính:
- học dựa trên dự án
- kiểm tra định kỳ
Chương trình dạy các 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 các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội trải nghiệm thực hành thông qua việc xây dựng trò chơi đánh máy, môi trường sinh thái ảo, tiện ích mở rộng trình duyệt thân thiện môi trường, trò chơi kiểu không gian xâm lược và một ứng dụng ngân hàng dành cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ thu được hiểu biết vững chắc về phát triển web.
🎓 Bạn có thể bắt đầu với vài bài học đầu tiên 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 các dự án, quá trình học được làm thú vị hơn cho học viên và việc ghi nhớ các khái niệm cũng đượ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èm theo video từ bộ sưu tập "Beginners Series to: JavaScript", trong đó một số tác giả đã góp phần cho chương trình này.
Ngoài ra, một bài kiểm tra nhẹ trước lớp đặt mục tiêu học tập cho học sinh, trong khi bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ sâu thêm. Chương trình 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 nhỏ và ngày càng phức tạp hơn vào cuối chu kỳ 12 tuần.
Mặc dù chúng tôi có chủ ý 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 để hoàn thành chương trình này là học về Node.js qua bộ video khác: "Beginner Series to: Node.js".
Truy cập Bộ Quy tắc Ứng xử và Hướng Dẫn Góp Phần 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. Sao chép 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ẽ chạy trên cổng 3000 tại localhost của bạn: localhost:3000.
File PDF tất cả các bài học có thể 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:
LangChain
Azure / Edge / MCP / Agents
Chuỗi AI Tạo Sinh
Học Tập Cơ Bản
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. 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 các câu hỏi luôn đượ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 khi 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 chính thức và đáng tin cậy. Đố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 con người. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu nhầ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.


