菜鸟感觉很多人不太知道菜鸟写的博客是一个可以跟着学习、一起深入理解的过程，其中包括了菜鸟从刚开始学习到后面重新学习，再到后面进入学框架等一系列学习过程、知识和感悟，所以菜鸟把自己的博客整理成一个目录提取出来，好让读者跟着进度一起学习，这写文章早就写了，所以有不足的地方还望读者指出，菜鸟来更改！

这里菜鸟会把建议一起学习的进行标注，这种建议一起学习的是因为没有对应的学习资料，是菜鸟总结的，还有部分可能菜鸟有学习地址或者有视频可以参考学习的，那菜鸟会放上链接，读者可以边看别的边参考菜鸟写的，积极沟通更能促进进步，也能避免理解错误！

注意：
看本篇文章或者里面的文章的时候，如果有跳转链接，建议放一放，如果记得链接里面讲的内容最好，不记得就先看完，然后回过头跳转了看！

希望本学习路径可以帮助到各位，也希望可以有人反过来帮帮菜鸟

重学html 目录 - 建议一起学习

这个建议有html、css基础的同学跟随着一起学习！纯小白的话（连标签、html都不知道是什么的）可能有点看不懂。

1. 重学前端 h多大 / 网页内容（html，body，head）/ element.style（第一天）
2. 重学前端 p多大 / 浏览器最小文字 / 详解img / object-fit和object-posit / 详解map / 空白区域 / 文字与图片对齐 / vertical-align（第一天）
3. 重学前端 概括元素（行内元素,块元素,行内块元素）和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css] / 详解分割线hr标签(初见border / 详解auto)（第二天）
4. 重学前端 段落的空格解析/br和wbr/常见文本格式化标签/详解pre（white-space）/q（初见lang）/对比bdo和bdi/详解a（target cursor 链接- id）（第三天）
5. 重学前端 详解头部（title base link style meta script/noscript）（第三天）
6. 重学前端 样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列 ）（第四天）
7. 重学前端 详解列表（list-style-type list-style-position 自定义列表 dl list-style-image list-style li的源css）（第五天）
8. 重学前端 详解表单 / 详解input / 浏览器私有前缀的作用（第六天） - 这篇文章很长
9. 重学前端 重要且实用的HTML5新语义元素（mark标记文本/progress任务进度/meter度量衡/是否可编辑内容/details补充/已移除）（第七天）

到这里就有js相关内容，需要读者具备function等js知识！

11. 重学前端 浏览器支持（添加新元素）/ 拖放（第八天）
12. 重学前端 HTML5 Web 存储（缓存）其他已经废弃（第八天）
13. 重学前端 全局属性（第八天）
14. 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
15. html新增标签 2021/1/30
16. disabled和readonly 以及焦点问题

重学CSS 目录 - 建议一起学习

1. css实例 css中id/class 详解样式表（外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解）[第一天]
2. 详解background（background-color background-clip background-image 渐变函数）[第一天]
3. 详解文本格式（Text）[第二天]
4. CSS 字体[第三天]
5. 链接样式 列表样式 表格样式[第三天]
6. 盒子模型（一）：初识盒模型 、 边框 [第四天]
7. 盒子模型（二）：外边距和填充、详解轮廓（第五天）
8. css 单位 和 css 尺寸 [第六天]
9. CSS display(显示)详解 与 visibility（可见性）详解[第七天]
10. css Position(定位) [第八天] - 其中有个问题还望读者可以积极讨论
11. css overflow / float [第九天]
12. css 伪类 / 伪元素 选择器 [第十天]
13. 属性选择器 补充第一天 2021/2/2
14. 响应式布局 2021/2/2
15. css取%时以谁为基准 + 画0.5px线 + 画三角形

上述这两个部分，是当时菜鸟学习完了前端html+css+js（es6），但是感觉自己什么都不会，于是沉下心来重新照着 菜鸟教程 一个一个看然后学完了，才感觉自己会点东西了！

当然其实并不完善，后续还会补充！大家也可以看菜鸟教程，虽然老了，但是比MDN方便，后续学习可以看MDN！

js部分

js菜鸟当时是直接看的：廖雪峰es6官方网站，这个菜鸟学了好久才学完，因为要每个都会用，es6真的很重要！

js一些比较重要的知识的理解建议看下面的书，也可以结合菜鸟的专栏（菜鸟这里不想搞目录了，麻烦）：JavaScript

es6 - es13

学完这个 es6 之后，建议学习菜鸟在b站学习的 es6 - es13新特性，毕竟现在前端太卷而且真的寒冬了，只会 es6 不够看了，这个是菜鸟的笔记：
千锋教育最新版Web前端ES6-ES13教程，JavaScript高级进阶视频教

推荐书籍

学完上述部分，建议看几本书：

• JavaScript语言精粹
• 你不知道的JavaScript（三本）
• 红宝书 和 犀牛书

git 部分

这里菜鸟学习的是：廖雪峰的git教程

这里菜鸟还是把自己的博客目录放一下，感兴趣的读者其实可以结合一起看看

git 目录

1. git学习 git安装 / 创建git仓库 / 文件添加到版本库（第一天）
2. git学习 版本转换（第二天）
3. git学习 工作区和暂存区 / 管理修改（第三天）
4. git学习 撤销修改 / 删除文件（第四天）
5. git学习 GitHub远程仓库 / 使用GitHub（第五天）
6. git学习 分支管理(1)：创建、合并、删除分支 / 复习删除（第六天）
7. git学习 分支管理(2)：解决分支合并冲突（第六天）
8. git学习 分支管理(3)：分支管理策略——禁用Fast forward模式（分支图）（第七天）
9. git学习 自我研究：分支与分叉（第八天） - 建议看透
10. git学习 分支管理(4)：bug修复分支（其它分支类比）（第九天）
11. git学习 分支管理(5)：多人合作（第十天）
12. git学习 标签管理（第十天）
13. git学习 自定义git（第十一天 ） - 建议看完

注意：

菜鸟建议各位不能只学git，还要把 gitLab 和 svn 学会，最起码基本操作要会！工作中真的有用！

框架部分

菜鸟在学完上述部分后，最先学习的是微信小程序，直接看的腾讯官网学习的，学习完了之后学习 vue 发现事半功倍，所以菜鸟也建议大家，如果 vue 看不懂，可以先学习原生微信小程序！

这里直接看：微信小程序官方文档

这里菜鸟在学微信小程序的时候也写了部分博客，这里给个目录

微信小程序目录

1. 微信小程序：你必须知道的component自定义组件
2. 微信小程序：必须知道的变量作用域 - 这个建议都看看，变量作用域js里面一样的
3. 微信小程序项目遇见问题二：变量作用域（续）| 使用data中的数组赋值给变量b，改变b的值，数组改变的解决方法| js基本类型和引用类型的区别| 变量命名冲突 - 这个建议都看看，同上
4. 微信小程序：带component后的生命周期
5. 微信小程序自我总结2，图片上传和Promise（微信小程序获取地理位置 微信小程序上传图片 微信小程序云存储 微信小程序setData性能）
6. 最简单的自定义tabbar
7. 微信小程序最终总结
8. 微信小程序项目遇见问题一：图片调试器显示，真机不显示
9. 微信小程序项目遇见问题三：有时候undefined不一定就是undefined | 解决微信小程序每次request请求，Cookie不一样 | request 获取不到返回值
10. 微信小程序WxPrase中包含文件无法点击解决
11. 微信小程序 自定义导航栏
12. 微信小程序 app.js和首页请求先后问题解决

vue

当然看微信小程序之前，最好还是先学 vue，那样微信小程序就可以使用 uniapp 开发了，避免多学东西！

现在基本上没有好的vue3教程在市面上流通，所以找不到资源的话，还是可以学习vue2先。

毕竟喜欢上vue2的风格，vue3也是兼容vue2的，你还是按照vue2的习惯开发vue3都没问题，就是少了一些本来vue2里面就不常用的东西，而且其实感觉vue2的代码整合性更好，vue3灵活，但是如果把相关的东西放一起，那就是vue2了。

现在千峰、黑马的视频都不错，虽然说是vue3其实还是vue2写法，读者可以自行选择，菜鸟当时看的是：王红元的vue2教学，这个就只有vue2写法！

对应的目录，菜鸟已经搞了，可以直接访问：vue学习路径 - 最全最新Vue、Vuejs教程，从入门到精通，这个目录里有vue3视频推荐，这里就不写了！

提升部分

上述学完了，基本上和 vue 相关的前端都学完了，然后平时学习一下必要的插件、组件什么的，基本上就是初级前端了！

如果还想继续发展，自然要会算法、设计模式、http、数据库、网络安全、性能优化、react、手机端适配等，但是菜鸟只找到了算法、设计模式的好的白嫖视频

js算法 目录

这里是js的算法，菜鸟之前写了博客，学了一点，但是现在好久没更新了，目录先放着，后面有时间更新，视频地址：coderwhy的JavaScript数据结构与算法，建议配合视频一起看

1. js 数组（总结）
2. js 栈
3. js 队列
4. js 优先级队列
5. js 链表 01
6. js 链表 02
7. js 双向链表 01
8. js 双向链表 02
9. js 集合
10. js 哈希表 01
11. js 哈希表 02

js 设计模式

这里菜鸟推荐前锋教育的课程，菜鸟的笔记链接：
千锋教育web前端进阶JS内功修炼之JavaScript设计模式

手机端适配

1. 使用px2rem不生效
2. 常用代码：vue监听路由变化、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper等
3. vue适配思路
   
   px转化rem工具可以使用postcss-px2rem，参考：vue-cli3中PC端大屏自适应
4. 百分比开发 / 响应式布局

注意：

这些花里胡哨的都是次要的，其实真实的适配只需要对同一类型的进行适配，也就是电脑端就适配各种大小的电脑，手机也是一样，而不会一套代码适配多个平台，只是小厂喜欢缩减成本，而且现在很多插件/ui库确实可以做到，但是最好还是分两套样式，大厂是分两套！

webpack学习

这里菜鸟感觉遇到问题看看官网就行了，深入学习的话也是看官网，这个菜鸟也没学通透，只能告诉读者到这里了！

three.js

学完上面的就需要学习一下three.js和webGL，菜鸟只是初步的学习了three.js，会画点简单的图和加载个简单的3d模型，webGL说要看，但是菜鸟感觉没必要，就搁置了！

http

菜鸟之前看的一本书挺好的，《图解http》，建议大家看完！

数据库

感觉后端才学的，菜鸟感觉不想学习！

网络安全

感觉几乎碰不见！

性能优化

感觉几乎碰不见，碰见了感觉也有人解决了！

react

菜鸟感觉会 vue 就不想学 react 了，所以一直没学！

最后，项目总结

做项目一定要像菜鸟一样，遇见问题写博客，不仅加深印象也可以帮助他人，开源才是最叼的！虽然知道付费才能赚钱，但是你的层次达不到，就别想赚钱了，不被淘汰就不错了！

菜鸟这里不想搞目录了，麻烦，直接把我专栏放这里了：

1. 项目总结专栏
2. vue3专栏

希望读者告诉菜鸟接下来的路

基本上菜鸟的技术到这里就到此为止了，uniapp、微信小程序、three.js菜鸟只能说略懂且会改，深层的基本上没仔细研究过，当然也确实没那方面的需求！

菜鸟上班之后就感觉，前端会用就行，感觉自己仿佛学到头了，没有学习的动力，感觉用不到的都不想学，用得到的已经学完了，反正能应付工作就行了！所以菜鸟也在迷茫和彷徨！