Học các 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 Microsoft Cloud Advocates tổ chức. Mỗi trong số 24 bài học sẽ đ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 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 hành. Nâng cao kỹ năng và tối ưu khả năng 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 Discord Azure AI Foundry
Theo các bước sau để bắt đầu sử dụng tài nguyên này:
- Fork Repository: Nhấp vào
- Clone Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Tham gia Azure AI Foundry Discord và gặp gỡ chuyên gia cùng những nhà phát triển khác
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 Khmer | Tiếng Hàn | 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 (Cyrillic) | Tiếng Slovakia | Tiếng Slovenia | Tiếng Tây Ban Nha | Tiếng Swahili | Tiếng Thụy Điển | Tiếng Tagalog (Filipino) | 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
Thích Clone Cục Bộ?
Repository này bao gồm hơn 50 bản dịch ngôn ngữ làm cho dung lượng tải về tăng đáng kể. Để clone mà không có bản dịch, hãy dùng sparse checkout:
Bash / macOS / Linux:
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'CMD (Windows):
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ứ bạn cần để hoàn tất khóa học với tốc độ tải nhanh hơn nhiều.
Nếu bạn muốn có thêm ngôn ngữ dịch hỗ trợ được liệt kê ở đây
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ụ học sinh 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 định kỳ khi chúng tôi thay đổi nội dung hàng tháng.
Thử thách mới được thêm vào, hãy tìm "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đây là 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 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 tệp, chạy lệnh và hơn thế nữa.
Dự án trợ lý AI mới vừa được thêm, xem tại dự án
Đừng bỏ lỡ chương trình AI Tạo Tác 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 từ căn bản đến RAG.
- Tương tác với các nhân vật lịch sử qua GenAI và ứng dụng đồng hành của chúng tôi.
- Câu chuyện hấp dẫn và vui nhộ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 câu lệnh và kỹ thuật thiết kế câu lệnh
- 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!
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 học này. Chúng tôi rất mong nhận phản hồi từ 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 giờ học và tiếp tục với việ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 bằng bài kiểm tra sau giờ học.
Để nâng cao trải nghiệm học tập, hãy kết nối với bạn bè cùng học để làm dự án cùng nhau! Việc thảo luận được khuyến khích trong diễn đàn thảo luận nơi nhóm điều phối viên của chúng tôi sẽ có mặt để trả lời câu hỏi của bạn.
Để mở rộng kiến thức, chúng tôi rất khuyên bạn khám phá Microsoft Learn để có thêm tài liệu học.
Chương trình này có một môi trường phát triển sẵn sàng để dùng! Khi bắt đầu, bạn có thể chọn chạy chương trình trong 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 một trình chỉnh sửa văn bản như Visual Studio Code.
Để bạn dễ dàng lưu công việc, nên tạo bản sao repository này cho riêng bạn. Bạn có thể làm điều này bằng cách nhấp nút Use this template ở đầu trang. Điều này sẽ tạo một repository 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:
- Fork Repository: Nhấp vào nút "Fork" ở góc trên bên phải của trang này.
- Clone Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Trong bản sao repository bạn tạo, nhấp nút Code và chọn Open with Codespaces. Điều này sẽ tạo một Codespace mới cho bạn làm việc.
Để chạy chương trình này trên máy tính của bạn, bạn sẽ cần một trình chỉnh sửa 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ụ Phát Triển, sẽ hướng dẫn bạn qua các lựa chọn khác nhau cho mỗi công cụ để bạn có thể chọn cái 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, nó cũng có Terminal tích hợp sẵn. Bạn có thể tải Visual Studio Code tại đây.
-
Sao chép 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ấn nút Code và sao chép URL:
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>
-
Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấn 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 dùng:
- Live Server - để xem trước các trang HTML trong Visual Studio Code
- Copilot - giúp bạn viết mã nhanh hơn
- bản ghi chú vẽ tay tùy chọn
- video bổ trợ tùy chọn
- bài kiểm tra khởi động trước bài học
- bài học viết
- với bài học 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
- đọc thêm bổ trợ
- bài tập
- bài kiểm tra sau bài học
Lưu ý về các bài kiểm tra: Tất cả các bài kiểm tra đều được chứa 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 ở đây ứng dụng kiểm tra có thể chạy cục bộ hoặc được triển khai lên Azure; hãy làm theo hướng dẫn trong thư mục
quiz-app.
| Tên Dự Án | Các Khái Niệm Được Giảng Dạy | Mục Tiêu Học Tập | Bài Học Liên Quan | Tác Giả | |
|---|---|---|---|---|---|
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ chuyên môn | Tìm hiểu cơ bản về nền tảng của hầu hết 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 | Giới thiệu về Ngôn ngữ Lập trình và Công cụ chuyên môn | Jasmine |
| 02 | Bắt Đầu | Kiến thức cơ bản về GitHub, làm việc theo nhóm | Cách sử dụng GitHub trong dự án, cách cộng tác với những người khác trên cùng mã nguồn | Giới thiệu về GitHub | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận | Tìm hiểu cơ bản về khả năng tiếp cận web | Kiến thức cơ bản về Khả năng tiếp cận | 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 | 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 | Tìm hiểu 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 | Thực hành HTML | Xây dựng HTML để tạo 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 | Thực hành CSS | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào những kiến thức cơ bản về CSS bao gồm làm cho trang hiển thị responsive | Giới thiệu về CSS | Jen |
| 10 | Terrarium | Đóng gói JavaScript, thao tác DOM | Xây dựng JavaScript để làm terrarium hoạt động như một giao diện kéo/thả, tập trung vào sử dụng closures và thao tác DOM | Closures trong JavaScript, thao tác DOM | 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 logic trong ứng dụng JavaScript của bạn | 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 hoạt động của trình duyệt, lịch sử của chúng và cách tạo các phần tử đầ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 form, gọi API và lưu biến trong bộ nhớ cục bộ | Xây dựng các phần tử JavaScript của tiện ích mở rộng trình duyệt để gọi API sử dụng biến được lưu trong bộ nhớ cục bộ | API, Form và Bộ nhớ cục bộ | Jen |
| 14 | Green Browser Extension | Tiến trình nền trong trình duyệt, hiệu năng web | Sử dụng 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 | Tiến trình nền và Hiệu năng | Jen |
| 15 | Space Game | Phát triển game nâng cao 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ẫu Pub/Sub, chuẩn bị cho việc xây dựng game | Giới thiệu về Phát triển Game Nâng cao | Chris |
| 16 | Space Game | Vẽ trên canvas | Tìm hiểu về Canvas API, dùng để vẽ các phần tử lên màn hình | Vẽ trên 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ể chuyển động sử dụng tọa độ Descartes và Canvas API | Di chuyển các phần tử | 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 các phím nhấn, đồng thời cung cấp hàm cooldown để đảm bảo hiệu năng game | Phát hiện Va chạm | 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 game | Giữ điểm số | Chris |
| 20 | Space Game | Kết thúc và khởi động lại game | Tìm hiểu về cách kết thúc và khởi động lại game, bao gồm dọn dẹp tài nguyên và đặt lại giá trị các 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 bộ khung kiến trúc website đ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 Form Đăng nhập và Đăng ký | Tìm hiểu về xây dựng form và xử lý các quy trình xác thực | Form | Yohan |
| 23 | Banking App | Phương pháp lấy và sử dụng dữ liệu | Cách dữ liệu chảy vào và ra ứng dụng, cách lấy dữ liệu, lưu trữ và loại bỏ dữ liệu | 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 giữ trạng thái và cách quản lý 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 | 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 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 |
Chương trình học được thiết kế dựa trên hai nguyên tắc sư phạm chính:
- học qua 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 nền tảng của JavaScript, HTML, và CSS, cũng như các công cụ và kỹ thuật mới nhất mà 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 hành bằng cách xây dựng một 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 space-invader, và một ứ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 vững kiến thức về phát triển web.
🎓 Bạn có thể học các bài học đầu tiên trong chương trình học 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 trở nên thú vị hơn với học viên và tăng cường việc ghi nhớ các khái niệm. Chúng tôi cũng đã viết một số bài học khởi đầu về các kiến thức cơ bản JavaScript để giới thiệu các khái niệm, kèm theo một video trong bộ sưu tập "Beginners Series to: JavaScript", một số tác giả của video góp phần xây dựng chương trình này.
Ngoài ra, một bài kiểm tra nhẹ nhàng trước lớp giúp học viên xác định mục tiêu học tập chủ đề, trong khi bài kiểm tra thứ hai sau lớp giúp củng cố kiến thức. 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 một phần. Các dự án bắt đầu đơn giản và ngày càng phức tạp hơn sau 12 tuần học.
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 kỹ năng cơ bản cần thiết cho lập trình viên web trước khi chuyển sang học 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".
Hãy tham khảo Quy tắc ứng xử và Đóng góp của chúng tôi. Chúng tôi hoan nghênh những góp ý xây dựng của bạ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. Tạo nhánh (fork) kho này, cài đặt Docsify trên máy cục bộ, và 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.
Một tệp PDF của tất cả các bài học có thể được tìm thấy ở đây.
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem qua:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Nếu bạn bị mắc kẹt 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 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 chào đón và kiến thức được chia sẻ một cách tự do.
Nếu bạn có phản hồi sản phẩm hoặc lỗi trong quá trình xây dựng, hãy truy cậ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 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ữ mẹ đẻ nên được xem là nguồn tham khảo chính xác nhất. Đố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 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 hay giải thích sai nào phát sinh từ việc sử dụng bản dịch này.