2022 年前端工程师学习路线图（完整版）

前端发展越来越快，每天都有数不胜数的技术发布。

想要入门前端却没有一条较为理想的路径？

在这个世界里兜兜转转了很久还是感觉在外围搬砖？

那么你可能需要这份技术学习路线图！

我们把学习前端分为三重境界：

• 单机写基础网页

• 联机高效写网页

• 让网页能够被更多人使用

接下来我们就通过介绍这三重境界来为你呈现详细的学习路线图。

单机写基础网页

何为单机呢？其实就是一个人 🌚

你一个人使用 Web 基础技术开发网站，没有将代码分享给别人（你可能不知道程序世界的代码分享规则），同时只是在本地环境运行你的网站，你甚至对网站如何能把其他人访问到毫无头绪。

这个阶段也是成为一名前端工程师最最基础的一环，大部分初学者还停留在这个阶段，那么我们来看一下这个阶段需要什么样的技能。

HTML + CSS + JavaScript

没错，其实就是我们耳熟能详的前端三剑客，虽然看起来是最最入门的内容，但是需要了解的内容也不少，就类似我们需要先学 26 个字母，学各种汉字基础，才能写作或者创作诗歌一样。了解这三门技术大致需要了解那些内容以及有哪些学习资源推荐呢？

HTML

HTML 代表超文本标记语言。 它用于前端，为网页提供结构，您可以使用 CSS 设置样式并使用 JavaScript 进行交互。

HTML 的学习大致需要 6 个阶段：

• 学习基础知识：https://www.w3schools.com/html/html_intro.asp

• 编写语义化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp

• 了解表单与校验：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

• 遵守一些约定与最佳实践：https://github.com/hail2u/html-best-practices

• 了解可访问性：https://www.w3schools.com/accessibility/index.php

• 了解 SEO 基础：https://developers.google.com/search/docs

CSS

CSS 或级联样式表是用于设置任何网站前端样式的语言。 CSS 是万维网的基础技术，与 HTML 和 JavaScript 并列。

学习基础的 CSS 大致需要 3 个阶段：

• 学习基础知识：https://www.w3schools.com/css/

• 学会如何布局，其中布局又包括以下知识：

  • Floats 浮动：https://css-tricks.com/all-about-floats/
  • Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  • Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
  • 盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
  • CSS 网格：https://cssgridgarden.com/
  • Flex 弹性盒布局：https://flexboxfroggy.com/

• 学习媒体查询知识与 Web 响应式设计：https://www.freecodecamp.org/learn/responsive-web-design/

JavaScript

JavaScript 允许您向页面添加交互性。 您可能在网站上看到的常见示例是滑块、点击交互、弹出窗口等。

学习基础的 JavaScript 大致需要 5 个阶段：

• 基础的语法：https://javascript.info/

• 学习 DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

• 学习 Fecth API 与 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

• 学习 ES6 与模块化 JavaScript：https://www.javascripttutorial.net/es6/

• 理解进阶知识

  • Hositing：