0. Roadmap [新手](https://roadmap.sh/frontend?r=frontend-beginner) [进阶](https://roadmap.sh/frontend) 1. HTML & CSS [freecodecamp 网站](https://www.freecodecamp.org/chinese/learn/) 里的 『响应式网页设计认证』 css 学习：[learnlayout 网站](https://zh.learnlayout.com/) flex 布局： 学习：[vgee.cn 网站](https://static.vgee.cn/static/index.html) 练习：flexboxfroggy 2. JavaScript 《 JavaScript 权威指南》第六版 （ 2012 年出版）[PDF](https://kingyinliang.github.io/PDF/JavaScript%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97%EF%BC%88%E7%AC%AC6%E7%89%88%EF%BC%89.pdf) 《 JavaScript 高级程序设计》（ 2019 年出版） JavaScript 教程：[网址](https://zh.javascript.info/) 阮一峰的 ES6 教程 3. 框架 React Vue 4. 构建工具 《前端工程化》基于 Vue3 教材：[网址](https://vue3.chengpeiquan.com/) Webpack Vite 5. 大而全的教程 微软的前端教程：[github 网址](https://github.com/microsoft/Web-Dev-For-Beginners) coderwhy 大前端系列教程 各种教程的网站：质量挺高（英语） [frontendmasters 网址](https://frontendmasters.com/courses/) 6. 具体步骤 基础知识（ a 、b 可同步进行） HTML & CSS JavaScript 学习框架 React：更适合作为第一个框架学习 Vue：使得用起来更方便，但不利于新人了解具体实现原理 构建工具 在学习框架时也会用到构建工具 学完框架后再系统性学习 抄一个网站 在学完 HTML & CSS 时可以抄静态页面 学完 JavaScript 、框架后可以抄整个站
新手
进阶
freecodecamp 网站 里的 『响应式网页设计认证』
css 学习：learnlayout 网站
flex 布局：
学习：vgee.cn 网站
练习：flexboxfroggy
《 JavaScript 权威指南》第六版 （ 2012 年出版）PDF
《 JavaScript 高级程序设计》（ 2019 年出版）
JavaScript 教程：网址
阮一峰的 ES6 教程
React
Vue
《前端工程化》基于 Vue3 教材：网址
Webpack
Vite
微软的前端教程：github 网址
coderwhy 大前端系列教程
各种教程的网站：质量挺高（英语） frontendmasters 网址
基础知识（ a 、b 可同步进行）
HTML & CSS
JavaScript
学习框架
React：更适合作为第一个框架学习
Vue：使得用起来更方便，但不利于新人了解具体实现原理
构建工具
在学习框架时也会用到构建工具
学完框架后再系统性学习
抄一个网站
在学完 HTML & CSS 时可以抄静态页面
学完 JavaScript 、框架后可以抄整个站