知识体系
- 写作背景
- 回顾我的前端学习之路
-
- 随便玩玩
- 摸爬滚打
- 自主学习
- 我的学习经验总结
- 你处于哪个阶段呢
-
- 迷茫期
- 广度扩展
- 深度沉淀
- 写在本章结尾
- 献给新人们的学习路线
-
- IDE篇
-
- sublime
- webstorm
- hbuilder
- vscode
- 总结
- 前端三大件
-
- HTML – 构建web
- CSS – 设计web
- JS – web的逻辑
-
- js三大组成部分
- js进阶
- js超集 – typescripte
- 现代流行框架
-
- vue
- react&angular（暂时略过）
- 框架对比
- 通用能力
-
- Git
- 正则
- Linux
- 浏览器
-
- 调试
- 垃圾回收
- 浏览器渲染原理
- v8
- webworker
- 网络
-
- ISO-OSI七层网络模型
- 状态码
- api规范
-
- restful
- graphql
- 各种网络协议
- 前端工程化
-
- Node.js
- npm&yarn
- 预处理
-
- babel
- 现代css
- 打包工具
- 脚手架
- CI/CD
- 设计模式
- 代码规范
- 测试体系
- js服务端开发
-
- 框架
-
- express
- koa
- nestjs
- 数据库
- 进程管理&生产环境部署
- 计算机基础??
-
- 数据结构
- 算法
- 编译原理
- 计算机组成原理
-
- 计算机的硬件设备组成
- 冯·诺依曼体系结构
- 处理器设计
- 其他大块知识
- 操作系统
- 整洁编码??
-
- 《代码整洁之道》
- 《重构：改善既有代码的设计》第二版
- 《代码大全2》
- 更多内容
-
- 可视化
- 插件开发
- 各种端
- 前端前沿
- 本章小结
- 寒草的前端图谱 — 思维导图
- 寒草的书籍推荐
- 工程师，不仅有编码
- 结束语&展望
大家好，我是寒草??，一只草系码猿??。间歇性热血??，持续性沙雕??
如果喜欢我的文章，可以关注? 点赞，与我一同成长吧～
写作背景
最近一两个月寒草?? 所在的公司来个几个前端实习生，我也有很多接触（毕竟我在公司也比较活跃），然而最近迎来开学季，他们也要回到校园，分别?? 总是这么突然，而我作为一个工作一年的小前辈，也没什么可以送他们的，思来想去，我决定写一篇前端学习路线送给他们，希望对他们的未来成长道路有所帮助，去清除他们一些迷茫。当然前端学习路线我肯定不能瞎写，也不能凭空想象，凭空捏造…需要去保证这个学习路线的普世价值和准确性，「当然也一定会融入我的想法」，以免误导他人。所以我会去咨询一些公司里比较厉害的前辈和一些作者朋友，在这里提前感谢为这篇文章提供帮助的伙伴。
特别鸣谢：温吞，于周五晚上与我讨论了近三个小时，在整个讨论的过程中，发现我原来如此无知哈哈哈哈。
阅读本篇文章你会得到：
这篇文章内容很多，大家忍一下，我也不多废话，直接开始！
一家之言，如有错误，也请多多指正，如果懒得看，那直接去最后面去看思维导图，记得点赞?关注。
回顾我的前端学习之路
我经常和大家说，我是一个有趣的前端，因为我这个人真的还是比较喜欢搞点稀奇古怪的东西，爱好广泛，所以最开始接触前端也就是一个随便玩玩的时期，也并没有打算把前端当做我未来的职业。那时候在大学白嫖蹭了一个课，了解到了前端这个领域，16年大概也是前端在野蛮生长的阶段，我也是在这个时间点成为了一个了解一丢丢前端知识的萌新。但是那个课程无非也就是了解到了一点点的与知识，大家想前端基础三件套：
- html
- css
-
javascript
我这白嫖了解了三分之二也算是牛逼哄哄了吧（其实啥也不是，而且那时候我压根不知道js这东西），于是我在当时用纯html，css写了一个游戏官网的静态主页，毕竟谁不喜欢游戏呢～我现在依然记得我当时边查询css的各种资料之后往页面上加炫酷的特效，但是因为时间久远已经无法找到当时的代码了，反正我现在依旧记得页面很好看，很炫酷。
我曾经也在文章中说过，我现在从事于前端工作也是因为前端技术可以创造一些美好的东西，那段啥也不懂，百度查各种css写法去填充我的游戏官网的时间也就被我称为学习前端过程中随便玩玩的蛮荒时期。
那么，为什么我最后没有从事游戏行业呢，因为我确实想做的是3A游戏，可是我们国产单机还不是很景气，我前一阵发文「用前端重返童年??」为黑神话悟空定制红白机版游戏开始动画，也是表达了我对游戏的喜爱，我相信国产3A只需要一个领路人，接下来就可以蓬勃发展，也相信同学们在未来会有更多的从业选择。
摸爬滚打
经过了一顿摸爬滚打，我其实已经可以完整的去搭建一个项目了，可能还不熟练，可能还需要频繁的去查阅文档，但是这不重要，此时的我已经对前端的知识有了一个自己粗略的感悟了，也已经大概知道如何去学习前端了。
到了这个阶段之后，我其实经历了一段前端废弃期，去学别的东西去了，也觉得自己可以搭建一个小项目就ok了，但是后来经过了一堆洗礼吧（其中主要洗礼来自校招面试），期间我知道了我还是一只小菜狗，经验和知识储备都不够全面不够扎实。但是也通过不断的面试知道我要去学什么。
是不是也可以说，我自主学习是以面试为起步的。所以，就像大圣说的，当你迷茫了，面试是个好办法（当然肯定不是唯一的办法）。
再到后来，入职工作，写文，一年以来都是：
我需要对项目进行重构，我需要进行整洁的编码，那么：
- 《代码大全2》
- 《重构2:改善既有代码设计》
- 《代码整洁之道》
- 《架构整洁之道》
好奇代码如何变成页面上的像素：
- Life of Pixel 「这是国外的一个ppt，而且也可以去搜一下演讲视频，真的很有收获」
- 《webkit技术内幕》
我想优化（自定义）我的编码体验：
- vscode extensions学习
计算机基础
- 编译原理学习
…
我发现我现在已经走在了自主学习的道路上，我可以不断的告诉自己要去学习什么，之后去研究实践，当然这是离不开我当年的懵懂的实践尝试以及摸爬滚打的四处碰壁，自行摸索的。
所以，给自己打个广告，未来的寒草??一定会为大家带来更多精彩内容的，与大家一同成长～
我的学习经验总结
通过我的经历来看我把学习前端或者说学习一门技术的过程分为三个阶段：
- 迷茫期
- 广度扩展期
- 深度沉淀期
只是我暂时看法而已，如果大佬有不同见解欢迎留言讨论
迷茫期
顾名思义，迷茫期就是你不知道学什么，怎么学，缺少一个引路人或者导师，现在的前端领域也是越来越多，可能现在去上手前端变得更加困难了，不知道从哪里上手，从哪里作为切入点，学完一个东西之后要去学什么或者做什么。
广度扩展
经过了摸爬滚打，你已经建立了前端大致的知识体系，这个时候可以去做一些广度方面的探索，去寻找自己合适的或者热爱的方向，去掌握更多的技能，让自己有能力去解决更多的问题。
深度沉淀
感觉可能很多人已经到不了这个阶段了，我也没开始在某个方向进行深耕（还是在看到啥好玩就去试一试的阶段），我有朋友已经开始深耕可视化，或者深耕ide，将来可能会成为某一个领域的专家，在此表示祝福，也很羡慕，小寒草在此膜拜啦，我也会努力成为更好的前端工程师的～
tip：我也一定能找到我热爱的方向?? 葱鸭??
写在本章结尾
我先说三句话：
- 兴趣是最好的老师
- 纸上得来终觉浅，绝知此事要躬行
- 保持好奇探索的心
愿你们可以不忘初心，成为优秀的工程师。以及更多的内容也可以根据我在本文后面补充的 XMind 进行自行学习～
IDE篇
大家选择完了神器，下一步肯定是迫不及待的开始正式的前端学习之旅了。我想其实现在学习前端的途径已经很多很多了，各种文档，各种文章，各种视频教程，还有各种辅导机构。我这最近也加入了不少群，发现很多朋友都是通过辅导机构接触的前端，我不去评判各种学习方式的优劣，但是最重要的是花费了时间花费了金钱之后有所收获，有所回报，都是成年人了，相信大家都理得清。
啧，寒草又是习惯性的叨叨起来了，我打住，直接进入前端三大件的正题。
HTML – 构建web
学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
学习前端最开始的一步肯定是学习 html，我也不记得我当时怎么一点点摸索的了，反正看看文档嘛，MDN 总不会错的，而且 html 本身也不是很难。
html，全称超文本标记语言，是一种描述语言，用来定义网页的结构。
HTML 文档是包含多个 HTML 元素的文本文档。每个元素都用一对开始和结束标签包裹。每个标签以尖括号（）开始和结束。也有一部分标签中不需要包含文本，这些标签称为空标签，如 。
下面我们创建一个以 html 为后缀的文件，并写一段 html 代码：
之后用（谷歌）浏览器运行。
效果就变成这样了
我自定义了 class 为 hancao 的 p 标签字体颜色，大小和粗细。这样看，大家应该就理解了，css是用来干嘛的，解决了什么问题：
答： 让页面变的更好康～
ok，你现在已经不只是一个会自我驱动的前端了，还是一个有审美，有品位的前端了。
这个时候大家其实可以去做更多的练习了，比如尝试实现各种花里胡哨的静态页面，给它搞各种好看的特效～大家记住，编程这东西在于练习，练的多了自然就变强了。
注意的点：
- BFC
- 浮动
- 定位
- 网格布局
- 弹性布局
- …
需要练习：
-
来源：hancao97
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！