题主既然想『系统的自学』，作为一个和你年纪差不多从今年三月到九月学习半年也拿到了满意的校招 offer 的非科班前端妹子，来分享一下踩过的坑。之前的经历可以看我的这个回答 Murphy：女生学前端适合么？ 最近也有人来问我进度如何，可否分享一下书单之类的，在这里写一下吧~
我的学习路线是按照
@颜什么都不记得适 的这个答案颜什么都不记得适：Web 前端怎样入门？来的，最初没想完全按照这个，毕竟是复旦大佬的路子可能不太适合我，最后却发现读的书还是和他推荐的基本一致， 写得真的很棒，非常感谢。接下来写一下踩过的坑~ 然后题主可以参考一下这个坑到底值不值得入。虽说是“系统的学习”，其实还是会“面向招聘学习”（捂脸），所以不止是阅读书籍和编码积累，了解前端现状紧跟社区也很重要。我把学习积累方向大致分为四个方面：
- 计算机基础
- 前端基础
- 工程化相关及框架工具
- 影响力、社区贡献
其实最后一点有点夸张啦，还是新人小白，哪里来的影响力啊。。但是这也是努力的一个方向，毕竟如果是 github 的活跃分子，技术博客有干货，甚至知乎写得好也能很加分。（我不是，正在努力中）。没有科班的学习环境或者学长/导师引导就要自己创造，而且这种输出式的学习对自己也是一种提升。学习顺序不一定要依次来，毕竟没有那么多时间，而且知识都是相互联系的，科学上网学会搜索也能把一些知识关联起来。
1. 计算机基础
- 算法和数据结构
我真的开始入门其实是用 Problems - LeetCode 的算法题。按类别（数组、链表、树、二分查找等）刷上十几二十道，你应该就对数据结构想解决的问题有了大致了解。配合 算法（第四版） 和 Coursea 上对应的课程 algorithms-part1 、algorithms-part2，公开课的大作业还是会有难度的，但很值得做，每个大作业都有丰富的说明和完善的测试用例。但是书后的习题都做的话就会比较漫长，自行取舍。然后试着刷一些 LeetCode medium 和 hard 的题目。
我也只是入门的水平，进阶的话大牛都看算法导论，我没看过就不推荐了。
- 计算机网络
- 《图解 HTTP》
-《计算机网络自顶向下方法》 现在还在看。
- 操作系统、体系结构
-《Operating Systems: Three Easy Pieces》 有免费的电子书：Operating Systems: Three Easy Pieces
-《CSAPP》 （深入理解计算机系统）及对应的 cmu 的课程：15-213/18-218/15-513: Introduction to Computer Systems及 Lab: CS:APP3e, Bryant and O'Hallaron
十分适合看着 PPT 做做 Lab 自学，但是当然，对非科班的来说有难度。其实朋友不太推荐我读这本，我基础太差了，但是它的 PPT 很不错担心过了这学期 CMU 的课不知道下次什么时间开放了，所以硬着头皮在学。
- 编程语言
在学习 JavaScript 之后我有在学 C++，其一是因为在读 CSAPP 的时候，需要了解一门能更接近底层的语言（这本书用的 C ），于是在看 《C++ Primer》，然后也是因为 C++ 包含了很多编程范式并且前端在接触 V8 源码， node.js 源码时不可避免的还是要遇到它。
目前仍在补基础知识，很重要，但也要记得不要陷入还原论的坑出不来了。。
2. 前端基础
- 推荐百度前端技术学院 很适合入门，前一段时间练了几道 2017 的任务，也很不错。自己以前也是刷的 baidu-ife/ife。怎么刷可以参考上面说的那位答主的回答。
- 书（按照我的阅读顺序）
-《JavaScript 高级程序设计》
- 《CSS 权威指南》（自己 CSS 还是用到再查比较多）
- 《JavaScript 语言精粹》
- 《CSS 揭秘》
- 《你不知道的JavaSscipt》getify/You-Dont-Know-JS
- 《JavaScript 设计模式与开发实践》搭配 图说设计模式 - Graphic Design Patterns
认真的每本看下来敲一遍发博客上做总结，面试上的基础问题基本上不会难倒你了。
然后还要紧跟新的标准规范，了解规范制定的流程（在面试中也被问过），比如张秋怡：如何评价 ECMAScript 2016（ES7）只新增2个特性？
后端也是需要了解的，没有基础的从 PHP 或者 Node.js 入门比较容易一点，Node.js 的话，推荐：
- Node.js 实战
- 深入浅出 Node.js
3. 工程化相关及框架工具
了解现代前端的一些新技术，每种技术的出现是为了解决什么问题。比如：
- JavaScript 模块化规范及实现（ES6 module、CommonJS、Node.js 的实现等）
- 包管理(npm)
- 模块化打包工具（webpack）
- 前端自动化工具（Gulp、Grunt）
- 前端框架（React、Vue、Angular等）
- 对 CSS 的拓展、编译（Less、Sass、PostCSS 等）
- 对 JavaScript 的拓展、编译（TypeScript、CoffeeScript、Babel 等）
...
要想知道为什么有这么多工具就要了解现代前端大致的发展史，前几天看了一篇文写得很通俗易懂，翻译了一下，在这里：萌新也能懂的现代 JavaScript 开发 。框架可能在面试中被问得多一点，个人认为三大框架选一个或两个，在项目中有实际使用过，能说清楚框架和相关全家桶的出现是为了解决什么问题，一些核心技术和基本原理是什么，（面试也被问过类似这个问题 网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？），有针对性的看过源码，了解不同的框架解决的痛点和差异就
OK。
4. 社区贡献，比如：
- 持续跟进一个流行的组件库，比如像 Vue 的组件库 element，iview 等，提 issue 修 bug 发 pr。
- 参与某个流行项目的英文翻译，比如框架或者工具的官网，或者像掘金翻译计划之类的。
- 写一个组件/工具/插件发布到 npm
- 写 hexo 主题（这个我还没写过）
- 妥善经营自己的博客，在一些平台有持续性输出等等
- 当然也有很多其他的贡献方式啦，比如 为 Node.js 贡献你的力量 （自己目前太菜了，还做不到这个）
输出式的学习不但对自己是一种提升，也能有机会遇到更多的大佬一起交流甚至帮你内推什么的。
说明：以上这些知识我也并没有学完，但差不多学到一半就应该足够找到一份实习/工作了。水平有限，目前仍在努力的学习中，希望不止步于前端。有什么错误欢迎来指正呀~（PS： 知乎编辑器真的会把人逼疯的 & 收藏也要点赞喵）
