关于 课程

MDN 前端开发课程旨在为当今 Web 行业中需要就业和长期发展的前端 Web 开发人员提供基础技能和知识的权威推荐。

本课程由 MDN 团队创建,并得到了 Mozilla 内部专家以及更广泛的 MDN 社区的审查和反馈。感谢您宝贵的意见;您知道自己是谁!

动机

Mozilla 每天都与行业专业人士交流,我们定期收到关于新员工知识缺口的反馈。招聘经理经常观察到

  • 过于关注使用框架快速构建 Web 应用,却缺乏对这些框架背后底层技术的理解。这导致了解决问题的能力不足,以及随着工具的变化,长期就业能力下降。
  • 缺乏核心最佳实践,例如语义化、可访问性和响应式设计。这导致缺乏用户导向,并限制了可用性。
  • 对浏览器如何从根本上工作、如何显示信息以及您免费获得的交互性等知识的了解不足。这导致解决方案过于复杂,而且通常不可访问。
  • 有限的解决问题、团队合作、研究和其他重要的软技能。

因此,我们决定创建本课程,以帮助指导人们学习更优秀的技能组合,提高他们的就业能力,并使他们能够构建一个更好、更易于访问、更负责任的未来 Web。我们希望他们有最大的成功机会。

本课程体现了我们认为 Web 应该拥有的价值观——可访问性、可持续性、可用性、性能和社区。我们希望教育工作者、开发人员和学生能够使用此资源,并在他们的工作中、教学中以及他们构建的产品中倡导这些价值观。

目标受众

学生

本课程对几类学生都有用

  • 希望进入该行业的学生,这可能涉及获得相关的资格或认证。本课程将作为他们应学习内容的指南。
  • 现有 Web 开发人员,他们希望“提升”他们的技能,确保他们的技能集是最新的,并找出他们应该了解更多知识的技能缺口。
  • 非前端 Web 开发人员,他们在其他领域(例如后端 Web 开发人员或特定平台开发人员)拥有现有的开发经验,希望进入前端 Web 开发,并希望获得他们应该学习的主题指南。

一旦学生有了要学习的主题列表,他们就应该通过自学、参加课程或训练营来学习,或者结合使用。无论哪种方式,在完成符合要求的课程后,学生应该能够通过一项测试他们所学主题知识的考试。

注意:本资源不是一门前端 Web 开发学习课程,也不旨在对其进行彻底的教授。它推荐了现代前端 Web 开发人员应该知道的内容。然而,我们花费了大量的时间和精力来审查涵盖我们模块的各种课程,并打算推荐我们认为适合学习本课程的免费和付费课程。

教育工作者

教育工作者可以在创建与 Web 相关的大学学位、学院课程、编码学校课程或类似课程的程序、单元和评估规范时,将本课程用作指南。遵循本课程将有助于确保课程教授最新的技术和最佳实践,并避免不良实践和过时的信息。

要了解更多信息,请查阅我们的 教育者资源 页面。

无忧 PDF 下载:完整的 MDN 课程可提供方便的 PDF 版本,供您与学生和同事分享。

下载课程

范围

前端开发人员这个术语可能含糊不清;它对不同的人可能有不同的含义,而且从事前端工作的人可能需要执行各种不同的任务。

涵盖内容

本课程不试图概述 Web 开发人员可能需要深入了解的每一个主题。本课程涵盖以下内容

  • 核心技术技能,如语义 HTML、CSS 和 JavaScript 基础。
  • 最佳实践,如可访问性、响应式设计和 UI 设计理论。
  • 关键工具,如框架和版本控制。
  • 软技能,以培养获得工作所需的思维方式和态度。
  • 环境知识,如计算机和文件系统、浏览 Web、命令行基础知识以及代码编辑器。
  • 几个“扩展”模块,我们认为它们构成了开发人员开始扩展知识和发展专业特长时应学习的有用附加技能。这包括
    • CSS 变换和动画
    • Web API 的常见类别(例如,媒体、图形和存储)
    • 性能
    • 安全和隐私
    • 测试

详细程度

所呈现的主题涵盖了不同程度的细节。

  • 有些内容被深入讲解,例如 HTML 和 CSS 基础。在学生开始他们的学习之旅之前,清晰地理解这些内容非常重要。
  • 有些内容讲解得更肤浅,例如版本控制或测试。理解这些主题是什么以及开始掌握一些基础知识很重要,但这些技能可以在您职业生涯的继续中进行扩展。

未涵盖内容

此外,还有几个领域我们明确不涵盖在本课程中,即

  • 后端语言/平台,例如 Node.jsPHPPython.NETJavaRuby。后端,顾名思义,不在前端开发课程的范围内,尽管您会在全栈开发人员课程中找到交叉内容。

    • 这里有一个例外是 Node.js;它在现代 Web 开发中有广泛的用途,因此一些基本的 Node.js 知识应该被认为是必不可少的。我们不明确涵盖基于 Node.js 的应用程序的开发,但您将在课程的多个地方遇到它,作为使用各种工具/功能的机制。例如,包括 扩展 6 测试扩展 9 其他工具类型
  • 传统的关系型数据库(例如,MySQLPostgres)和其他服务器端数据存储(例如,云数据库,如 MongoDBGoogle Cloud Datastore)。这些被认为是后端的一部分,因此不在课程范围之内。我们确实涵盖了客户端存储机制,如 CookiesWeb StorageIndexedDB,但它们具有不同且独特的用例。

  • 深入的 DevOps 主题,例如用于配置和自动化(例如,Amazon AWSGoogle Cloud PlatformMicrosoft Azure)的云平台以及容器化工具(例如,KubernetesDocker)。我们确实会轻微触及一些被认为是 DevOps 领域内的工具——例如 GitHub 和自动化测试工具——但这些与前端开发人员领域有明显的交叉。

  • 图形设计超越基础知识(在 为开发人员而设计 中概述)。

  • 与产品和项目管理等角色相关的技能(例如,组织、研究和规划)。

归因

任何人都可以免费使用此资源。如果您觉得本课程有用,我们希望您考虑做以下事情

  • 链接到它。例如,教育工作者可以在他们的公开课程信息中包含以下内容

    html
    <p>
      This course is based on the
      <a href="https://mdn.org.cn/en-US/curriculum/"
        >MDN front-end development curriculum</a
      >.
    </p>
    
  • 告诉其他人!我们希望尽可能多的学生和教育工作者开始使用本课程,并围绕它作为 Web 开发人员基本知识的标准。

注意:本课程应作为指导,但其使用并不意味着 Mozilla 的认可。

课程更新流程

Web 开发行业正在不断快速变化。为了使我们的建议保持最新,我们将定期审查我们的课程,发布更改日志,并每年进行一次公告,联系已知符合要求的课程的创建者,告知他们课程已更改,并鼓励他们根据需要审查/更新他们的课程。

我们计划在每年的第二季度进行此项工作,以便在第二季度/第三季度为教育工作者提供时间,在下一学年开始前实施更改。

反馈

我们很乐意听取您对我们课程的反馈。如果您对如何改进该资源有任何建议,或者您注意到任何不准确或错误,我们非常希望收到您的反馈。在 课程源代码仓库 上创建一个包含您反馈的问题。