前端路线

0 Roadmap

1. 新手
2. 进阶

1 HTML & CSS

1. freecodecamp网站 里的 『响应式网页设计认证』
2. css学习：learnlayout网站
3. flex 布局：
   1. 学习：vgee.cn网站
   2. 练习：flexboxfroggy

2 JavaScript

1. 《JavaScript权威指南》第六版 （2012年出版）PDF
2. 《JavaScript 高级程序设计》（2019年出版）
3. JavaScript 教程：网址
4. 阮一峰的 ES6 教程

3 框架

1. React
2. Vue

4 构建工具

1. 《前端工程化》基于Vue3 教材：网址
2. Webpack
3. Vite

5 大而全的教程

1. 微软的前端教程：github网址
2. coderwhy 大前端系列教程
3. 各种教程的网站：质量挺高（英语） frontendmasters网址
4. MDN 网址：大而全的文档
5. ChatGPT：升级到 plus 版本，打开使用网络内容的设置

6 具体步骤

1. 基础知识（a、b可同步进行）
   1. HTML & CSS
   2. JavaScript
2. 学习框架
   1. React：更适合作为第一个框架学习
   2. Vue：使得用起来更方便，但不利于新人了解具体实现原理
3. 构建工具
   1. 在学习框架时也会用到构建工具
   2. 学完框架后再系统性学习
4. 抄一个网站
   1. 在学完 HTML & CSS 时可以抄静态页面
   2. 学完 JavaScript、框架后可以抄整个站