Web 前端学习路径及资料 [2023年]

发表于 更新于 分类于

[20231013] V 0.1:

  • 增加 MDN
  • 增加 ChatGPT

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