写在最前面

1. 抓住主干、学会看文档，前端更新太快了，看文档学习是必备的一个技能。

2. 基础语法推荐看文档学习，直接上来就看，直到看懵，懵了就可以开始找视频了；如果是一帆风顺到了end，emmm看样子基础还不错，如果把握不住主干还是找个视频看一看，过一遍主干。视频可以是简短精髓，这么短的视频还讲到的知识点：主干。

   新手学习文档的最大一个问题：抓不住主干

3. 本文在不断地鼓励你行动，思考，跳出舒适圈

学习路线

1. 初入门

前端三剑客：HTML、CSS、JavaScript

• 文档教程：w3school

• 书籍：《JavaScript高级程序设计》、《你不知道的JavaScript》（建议这两个当工具书，不要直接生啃）

• 视频：

  https://www.bilibili.com/video/BV14J4114768?from=search&seid=4675165827148059792

  https://www.bilibili.com/video/BV1ux411d75J?from=search&seid=16934986572584343839

建议：

基础语法部分：

文档＋简短视频

• 这个简短视频，我推荐一个：中国大学mooc上的《web前端开发》，后面有案例
• 慕课网的互动式教程，可以在上面跟着敲代码（多实践）
  • https://www.imooc.com/learn/9
  • https://www.imooc.com/learn/36
  • https://www.imooc.com/learn/10
• js高级部分，了解 可以不需要掌握，概念留个印象就可以了，后面慢慢实践出真知

实战部分：

视频：需要学习老师在开发中如何建文件夹、写html结构、命名规范等等，这些细节从文档上很难学到

1. 静态，仿一个主页：跟着视频抄一遍 + 自己写一遍（html css不用每条都背下来。。。写完这个案例也大概悟到了什么是常用的，忘了去查文档去搜就行了）
2. js部分：dom&bom，跟着抄一个实战（不会写也行）

2. 进入大门了

这一部分是重点

1. 选择一门喜欢的框架：vue3 / React

   • 官方文档

2. es6

   • 阮一峰：https://es6.ruanyifeng.com/

   • 慕课网的一门付费课程：《再学JavaScript ES(6-11)全版本语法大全》

     笔记：http://es.xiecheng.live/

3. git

   • 廖雪峰git教程
   • https://learngitbranching.js.org/?locale=zh_CN

建议：

1. 关于bootstrap，angular或jQuery，不学，了解一下是什么
2. 先熟练掌握一门框架，vue中文资源多；react的话，造轮子方便，以后进了大厂方便（学好vue也能进）
3. 学框架之前学一下es6，学完变量，函数，类，模块化之后，框架&es6一起学习

4. 这里需要大量实战，跟着视频实战后，到github上找优秀的项目模仿，模仿代码、文件结构、命名等

   • 这里的实战，你会接触到很多新的东西：ui库、mock、webpack、css预处理器等等，按需学习，即学即用

   • 在这一环节里，你可能需要往前去捡之前没学懂的东西

     比如，你之前学了promise异步操作，也许课程里/教程里给你讲了什么时候用，用法是什么，但你要把这个真正用到项目里，可能你要经历：

     1. 项目中发现同步达不到想要的效果
     2. 搜索解决的办法，好像又不太知道什么技术可以解决
     3. 兜了一圈，发现原来是因为没有使用异步
     4. 赶紧去搜了异步的写法
     5. 用了几次之后，明白了这个写法，想要探索这背后的原理
     6. 发现原来之前自己是学过的，知识回顾，串起来
        这就是为什么前面说js高级了解但不用掌握的原因了，实际上js高级非常重要，但是你需要一定的实践碰壁后才有感悟，曲线救国之后你一定会感谢这个特性让你更加方便编程

1. 实战1-2个项目之后，可以开始读源码，配合课程一起啃

3. 工程化

之后还有小程序、node、TypeScript、可视化……

建议：

到了这部分，知识面越来越广，这些按需学习，根据项目、自己的兴趣进行学习，学习资源也不推荐了，你肯定已经学会自己找资源了。

4. 基础

1. 数据结构和算法
   • 书籍：《学习JavaScript数据结构与算法（第3版）》
   • 课程：
     • 慕课网上的《JavaScript版数据结构与算法》
   • 刷题：LeetCode
2. 计网、操作系统、数据库、计组
   • 计算机科学速成课：https://www.bilibili.com/video/av21376839

建议：

1. 开始学框架的同时一起学数据结构和算法，多刷题
2. 学完一个框架实战之后，同时一起学计算机网络、浏览器工作原理
3. node学习前需要学习操作系统、数据库

5. 关于笔记

• typora+picgo+gitee
• 语雀 / 印象笔记等
• 掘金、CSDN、博客园
• 自己搭建博客：hexo+github

建议：

1. 好记性不如烂笔头，记笔记可以暂缓你的学习速度，让你慢下来思考
2. 方便以后查阅，记录成长的点点滴滴，看着笔记越来越多成就感满满 nice√
3. 学完三剑客之后，自己搭一个博客，然后把之前做的笔记整理一下放上去
4. 博客以后面试可以做加分项（具体有什么buff自己去查查）

一些干货吧

• 编译器： vscode / submit text

  vscode一些好用的插件安装：https://blog.csdn.net/qq_38698753/article/details/93190356

• 浏览器： Chrome、火狐、Microsoft Edge（后面两个几乎不用）

  • 使用谷歌搜索，不要百度搜索（谷歌访问助手）
  • 浏览器插件：沙拉查词，allow copy，谷歌访问助手，GitHub加速，JSON-handle
  • 浏览器打开github项目，在地址github.com/xxxxxx中加入1s，github1s.com/xxxxxx进入一个在线编辑器的页面

• 到哪里找学习资源：

  • 一个资源库：https://www.code-nav.cn/

  

  • 学习视频：

    

    • b站尚硅谷：https://www.bilibili.com/read/cv5650633

    • b站黑马：https://www.bilibili.com/read/cv10431130

      这两家b站上的视频平均质量比较高

• 优秀书籍目录： https://github.com/yayxs/bilibili-video-tutorial/tree/books-share

• ui设计：

  • Illustrations | svg图下载
  • Logopond - Logo, Brand & Identity Inspiration
  • Dribbble ui作品（写项目不知道该怎么设计页面，来这找找灵感，以及谷歌图片搜索）
  • iconfont图标库

• CSS：

  • UI Colors 🎨
  • css渐变
  • 动画 LottieFiles
  • Animate.css

最后

学习路线只是建议，具体怎么实行，看自己，多去看看大佬们的推荐吧

建议进度：

1. 11月前找找自己的感兴趣方向，如果对前端开发感兴趣，可以按照上文写的建议进行学习
2. 1月前：学会写静态网站，js基础语法
3. 寒假：掌握es6 + 框架基础语法
4. 4月前：框架全家桶
5. 后面的。。。自己根据自己的情况来制定计划叭，后面怎么学跟自己的选择有很大的关系，但是总体的节奏还是：学基础语法→做项目，在项目中掉坑→爬出来

多关注校招，大概在学框架基础语法之后就可以开始查找一些校招的东西，看看怎么准备