初学者的网页开发课程

通过微软云倡导者提供的为期12周的综合课程，学习网页开发的基础知识。每个24节课程深入讲解JavaScript、CSS和HTML，通过动手项目如生态瓶、浏览器扩展和太空游戏进行学习。参与测验、讨论和实操作业。通过我们有效的项目驱动教学法，提升技能并优化知识保持。立即开始你的编码之旅！ 加入 Azure AI Foundry Discord 社区 按照以下步骤开始使用这些资源： 1. Fork 仓库：点击 2. 克隆仓库： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git 3. 加入 Azure AI Foundry Discord，结识专家和其他开发者 ### 🌐 多语言支持 #### 通过 GitHub Action 支持（自动且始终保持最新） 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 | Khmer | 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 如果你希望支持额外的翻译语言，列表见 这里 #### 🧑‍🎓 你是学生吗？ 访问 学生中心页面，这里有初学者资源、学生礼包，甚至获得免费证书代金券的途径。请收藏此页并定期查看，因为我们会每月更新内容。 ### 📣 公告 - 新的 GitHub Copilot Agent 模式挑战活动上线！ 新增挑战，许多章节中找到“GitHub Copilot Agent Challenge 🚀”。这是使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果你以前未使用过 Agent 模式，它不仅可以生成文本，还能创建和编辑文件、运行命令等。 ### 📣 公告 - 新的生成式 AI 项目上线 新 AI 助手项目已添加，查看该项目 ### 📣 公告 - 新发布的 JavaScript 生成式 AI 课程 不要错过我们的新生成式 AI 课程！ 访问 https://aka.ms/genai-js-course 开始学习！ - 从基础到 RAG 的课程内容。 - 使用生成式 AI 和我们的伴侣应用与历史人物互动。 - 有趣且引人入胜的叙事，你将体验时光穿梭！ 每节课都包含作业、知识检测和挑战，帮助你学习以下主题： - 提示语和提示工程 - 文本与图像应用生成 - 搜索应用 访问 https://aka.ms/genai-js-course 开始学习！ ## 🌱 入门指南 学习者，每节课请先完成课前测验，然后阅读讲义材料，完成各种活动，并通过课后测验检测理解度。 为了提升学习体验，建议你与同伴一起协作完成项目！鼓励在我们的讨论区中展开讨论，我们的版主团队将为你解答问题。 为了进一步学习，我们强烈推荐访问 Microsoft Learn 获得更多学习资料。 ### 📋 设置你的环境 这套课程自带开发环境！开始时，你可以选择在 Codespace（基于浏览器，无需安装的环境）中运行，或者在你的电脑上使用文本编辑器如 Visual Studio Code 本地运行。 #### 创建你的仓库 为了方便保存你的作品，建议你创建本仓库的个人副本。点击页面顶部的 Use this template 按钮，会在你的 GitHub 账户中创建包含课程副本的新仓库。 步骤如下： 1. Fork 仓库：点击页面右上角的“Fork”按钮。 2. 克隆仓库： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git #### 在 Codespace 中运行课程 在你创建的仓库副本中，点击 Code 按钮，选择 Open with Codespaces。这将为你创建一个新的 Codespace 进行开发。 #### 在本机电脑上运行课程 要在本机电脑上运行此课程，需要文本编辑器、浏览器和命令行工具。我们的第一课，编程语言介绍及工具，将带你了解每类工具的多种选择，帮助你选出最适合自己的工具。 我们推荐使用 Visual Studio Code 作为编辑器，它自带内置的 终端。你可以在这里下载 Visual Studio Code。 1. 将您的仓库克隆到计算机。您可以通过点击 Code 按钮并复制 URL 来完成此操作： CodeSpace 然后，在 Visual Studio Code 中打开 Terminal，运行以下命令，将 替换为您刚刚复制的 URL： bash git clone <your-repository-url> 2. 在 Visual Studio Code 中打开文件夹。您可以通过点击 File > Open Folder 并选择您刚刚克隆的文件夹来完成。 ## 📂 每节课程包含： - 可选的手绘笔记 - 可选的补充视频 - 课程前热身测验 - 书面课程内容 - 项目式课程包含构建项目的逐步指南 - 知识检测 - 挑战任务 - 补充阅读 - 作业 - 课后测验 ## 🗃️ 课程列表 ## 🏫 教学法 我们的课程设计基于两个关键教学原则： * 项目式学习 * 频繁测验 该项目教授 JavaScript、HTML 和 CSS 基础知识，以及当今网络开发者使用的最新工具和技术。学生将通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空侵略者风格游戏和商业银行应用等项目获得实践经验。课程结束时，学生将掌握扎实的网页开发知识。 通过确保内容与项目紧密相关，过程对于学生更有吸引力，概念的掌握也将得到增强。我们还编写了多节 JavaScript 基础入门课程配合 “JavaScript 初学者系列” 视频教程，该教学系列部分作者也参与了本课程编写。 此外，课堂前的低风险测验帮助学生明确学习目标，课后的第二次测验则确保进一步的知识巩固。本课程设计灵活有趣，可整体或部分学习。项目从小型开始，逐渐增加复杂度，覆盖为期 12 周的周期。 虽然我们刻意避免引入 JavaScript 框架以专注于作为网页开发者所需的基本技能，但完成本课程后，学习 Node.js 是很好的下一步，您可以通过另一系列视频 “Node.js 初学者系列” 了解相关内容。 ## 🧭 离线访问 您可以使用 Docsify 离线运行本教程。将本仓库 Fork 到本地机器，安装 Docsify，然后在仓库根目录下输入 docsify serve。网站将在本地的 3000 端口运行：localhost:3000。 ## 📘 PDF 所有课程的 PDF 可在此处找到。 ## 🎒 其他课程 我们的团队还制作了其他课程！请查看： ### LangChain --- ### Azure / Edge / MCP / Agents --- ### 生成式 AI 系列 -9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA) -C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC) -E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9) --- ### 核心学习 --- ### Copilot 系列 ## 获取帮助 如果您卡住或者对构建 AI 应用有任何疑问，请加入其他学习者和有经验的开发者一起讨论 MCP。这里是一个支持性的社区，欢迎提问并自由分享知识。 如果在构建过程中有产品反馈或错误，请访问： ## 许可证 本仓库采用 MIT 许可证。详情请见LICENSE文件。 --- 免责声明： 本文档使用 AI 翻译服务 Co-op Translator 进行翻译。尽管我们努力确保准确性，但请注意自动翻译可能包含错误或不准确之处。以原始语言版本文档为权威来源。对于关键信息，建议使用专业人工翻译。我们对因使用本翻译而产生的任何误解或误释不负任何责任。