前端路线

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、框架后可以抄整个站