2021 年前端学习路线总结

清疚 2022-10-26 03:48 234阅读 0赞

下面是我翻译的一个文字版，可以先看图再看文字。

✅ 表示个人推荐学习

✳️ 表示可选择学习

❇️ 表示不需要严格按照路线的先后顺序，可在任何时间补充这一块的知识

❎ 表示个人不再推荐  
计算机网络

掌握计算机网络的基础是一名前端工程师的基本素养，建议先学习以下的知识：

✅ Internet 如何工作

✅ HTTP 协议

✅ 浏览器工作机制

✅ DNS 及其运行机制

✅ 了解域名、网站托管

HTML

✅ 学习 HTML 基础，标签、元素、表单验证等等

✳️ 语义化标签

✳️ 了解 Web 无障碍（Accessibility）

✳️ 学习 SEO 优化

CSS

✅ 学习 CSS 基础

✅ 制作布局：浮动、定位、显示、盒模型、网格布局、弹性布局

✅ 响应式设计和媒体查询（@media）

✅ 结合 HTML 制作一个简单的网页作为最佳实践

JavaScript

✅ 学习语法和基本结构

✅ 学习操作 DOM

✅ 学习 Fetch API / Ajax（XHR）

✅ ES6+ 和模块化 JavaScript

✅ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念

版本控制

✅ Git 的基本操作

✅ 创建账号并且学习使用 GitHub

✳️ 创建账号并且学习使用 GitLab

Web 安全知识

❇️ HTTPS

❇️ 内容安全策略（CSP）

❇️ 跨域资源共享

❇️ OWASP 安全风险

上面的内容是前端最基础的部分，建议多花时间，掌握好每一个知识点。

从这开始，将进入前端工程化的部分，你可能会接触到很多种不同的框架，并学习使用多种的工具为自己的开发提效。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

包管理工具

npm 和 yarn 都很好，选择一个学习即可，他们两是相似的

✅ npm

✳️ yarn

CSS 构架

通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式，不用再担心 CSS 的构架问题，但熟悉 BEM 规范是一个不错的选择。

❇️ BEM，一种书写规范

❎ OOCSS

❎ SMACSS

CSS 预处理器

以下三个可选择一个进行学习。

❇️ SCSS