---
title: Front-end web developer
slug: learn/Front-end_web_developer
tags:
  - CSS
  - HTML
  - Web 标准
  - 初学者
  - 前端
  - 工具
  - 教程
translation_of: Learn/Front-end_web_developer
---
<p>{{learnsidebar}}</p>

<p>欢迎来到我们的 Web 前端开发者学习路线图！</p>

<p>在这里我们会提供一个结构化的课程，教会你成为一名 Web 前端开发所需要了解的一切。通过学习每个章节，学到新技能（或者提升原有技能），就是这么简单。在每个章节，你将需要做练习并通过评估以确保你掌握了之后才能继续往后学习。</p>

<h2 id="涵盖的主题">涵盖的主题</h2>

<p>大致范围如下:</p>

<ul>
 <li>基础准备以及如何学习</li>
 <li>Web 标准和最佳实践 (例如辅助功能和跨浏览器兼容)</li>
 <li>HTML, 一门赋予网站内容结构和意义的语言</li>
 <li>CSS, 一门美化网站页面的语言</li>
 <li>JavaScript, 用来为网站创建动态功能的脚本语言</li>
 <li>一些有助于现代化客户端 Web 开发的工具</li>
</ul>

<p>这些章节是按照学习顺序而进行设计的，但是每个又相对独立。比如，如果你已经对 HTML 非常熟悉了，你大可放心地跳过这个章节直接学习 CSS。</p>

<h2 id="预备知识">预备知识</h2>

<p>开始学习这个课程你并不需要任何预备知识，你仅仅需要一台可以运行现代浏览器并且联网的电脑，以及一颗好学之心。</p>

<p>如果你不清楚 Web 前端开发和自己的关系，或者在开始前需要有一个更通识的介绍，建议你开始之前先阅读一下 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web 入门</a>。</p>

<h2 id="获得帮助">获得帮助</h2>

<p>我们尽量让 Web 前端开发学习尽可能的轻松一点，但是你仍然可能因为一些难以理解的点而被迫止步不前，或者某段代码就是不能像理解中的那样工作。</p>

<p>无论是新手还是富有经验的开发者，我们常常会被卡住，但是不要慌。“<a href="/zh-CN/docs/Learn/Learning_and_getting_help">如何学习</a>”这个章节会给你一些关于如何查找信息和自行解决问题的有用的提示，如果仍然不行，大胆的在 <a href="https://discourse.mozilla.org/c/mdn/learn/">讨论区</a> 提出你的问题。</p>

<p>让我们开始吧，祝你好运！</p>

<h2 id="学习路线图">学习路线图</h2>

<h3 id="启动">启动</h3>

<p>学习用时: 1–2 小时</p>

<h4 id="预备知识_2">预备知识</h4>

<p>仅仅需要基础的电脑操作能力。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了">我怎么知道自己是否可以继续往下学习了?</h4>

<p>这一课没有评估测试，但是请你不要跳过 — 这对于帮你准备好应对后面的练习和学习非常重要。</p>

<h4 id="核心提示">核心提示</h4>

<ul>
 <li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>  (15 分钟)</li>
 <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Web 和 Web 标准的背景介绍</a> (45 分钟)</li>
 <li><a href="/en-US/docs/Learn/Learning_and_getting_help">学习和获得帮助</a> (45 分钟)</li>
</ul>

<h3 id="HTML_语义和结构">HTML 语义和结构</h3>

<p>学习用时: 35–50 小时</p>

<h4 id="预备知识_3">预备知识</h4>

<p>基础的电脑操作能力和基本的 Web 开发环境。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了_2">我怎么知道自己是否可以继续往下学习了?</h4>

<p>每个模块对于的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。</p>

<h4 id="核心模块">核心模块</h4>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a> (15–20 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a> (15–20 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/HTML/Tables">HTML 表格</a> (5–10 小时阅读/练习)</li>
</ul>

<h3 id="使用_CSS_布局和美化">使用 CSS 布局和美化</h3>

<p>学习用时: 90–120 小时</p>

<h4 id="预备知识_4">预备知识</h4>

<p>学习 CSS 前需要有基础的 HTML 知识，请至少学习完 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a> 再开始。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了_3">我怎么知道自己是否可以继续往下学习了?</h4>

<p>每个模块对于的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。</p>

<h4 id="核心模块_2">核心模块</h4>

<ul>
 <li><a href="/zh-CN/docs/Learn/CSS/First_steps">学习 CSS 的第一步</a> (10–15 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks">编写 CSS</a> (35–45 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F">添加文本样式</a> (15–20 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a> (30–40 小时阅读/练习)</li>
</ul>

<h4 id="额外资源">额外资源</h4>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS 布局 cookbook</a></li>
</ul>

<h3 id="使用_JavaScript_开发交互">使用 JavaScript 开发交互</h3>

<p>学习用时: 135–185 小时</p>

<h4 id="预备知识_5">预备知识</h4>

<p>学习 JavaScript 前需要有基础的 HTML 知识，请至少学习完 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a> 再开始。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了_4">我怎么知道自己是否可以继续往下学习了?</h4>

<p>每个模块对于的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。</p>

<h4 id="核心模块_3">核心模块</h4>

<ul>
 <li><a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a> (30–40 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/learn/JavaScript/Building_blocks">编写 JavaScript</a> (25–35 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs">客户端 Web API </a>(30–40 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/Learn/JavaScript/Objects">JavaScript 对象入门</a> (25–35 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5">异步 JavaScript </a>(25–35 小时阅读/练习)</li>
</ul>

<h3 id="Web_表单_—_处理用户数据">Web 表单 — 处理用户数据</h3>

<p>学习用时: 40–50 小时</p>

<h4 id="预备知识_6">预备知识</h4>

<p>高效使用表单需要 HTML、CSS 和 JavaScript 知识，它们都很复杂因此已经在前面分章节学习了。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了_5">我怎么知道自己是否可以继续往下学习了?</h4>

<p>每个模块对于的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。</p>

<h4 id="核心模块_4">核心模块</h4>

<ul>
 <li><a href="/zh-CN/docs/Learn/HTML/Forms">Web 表单</a> (40–50 小时)</li>
</ul>

<h3 id="让所有人都能使用_Web">让所有人都能使用 Web</h3>

<p>学习用时: 60–75 小时</p>

<h4 id="预备知识_7">预备知识</h4>

<p>学习本章前最好了解 HTML、CSS 和 JavaScript — 本章很多技术和最佳实践都需要用到它们。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了_6">我怎么知道自己是否可以继续往下学习了?</h4>

<p>每个模块对于的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。</p>

<h4 id="核心模块_5">核心模块</h4>

<ul>
 <li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a> (25–30 小时阅读/练习)</li>
 <li><a href="/zh-CN/docs/learn/Accessibility">可访问性（or 辅助功能）</a> (20–25 小时阅读/练习)</li>
</ul>

<h3 id="现代工具">现代工具</h3>

<p>学习用时: 55–90 小时</p>

<h4 id="预备知识_8">预备知识</h4>

<p>学习本章前最好了解 HTML、CSS 和 JavaScript — 本章很多技术和最佳实践都需要用到它们。</p>

<h4 id="我怎么知道自己是否可以继续往下学习了_7">我怎么知道自己是否可以继续往下学习了?</h4>

<p>本章节各模块没有评估测试, 但是第 2 章和第 3 章的学习教程应该能够让你很好的掌握现代工具的要义。</p>

<h4 id="核心模块_6">核心模块</h4>

<ul>
 <li><a href="/zh-CN/docs/Learn/Tools_and_testing/GitHub">Git 和 GitHub</a> (5 hour read)</li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">客户端 Web 开发工具入门 </a>(20–25 hour read)</li>
 <li>
  <p><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">客户端 JavaScript 开发框架入门</a> (30-60 hour read/exercises)</p>
 </li>
</ul>