本篇帖子里分了两个part，一个是对“入门”的碎碎念，包含了一些计算机方面入门的建议（不只是前端）
另一个part是写了一个多月的Roadmap（老鸽子了），同时也是自己学习的路径，希望能给大家做个参考
前端/Web这块实在太广泛太庞大了，难免有疏漏的地方，还请大家多多交流和留言回复
还有自己的博客:Ascent
2020-03-21 Update
先自我介绍一下，赵晟宇（亦敬），焦糖2018级，现在北京字节做前端开发工作，对于前端高新技术确实没什么发言权（等我再摸爬滚打几年），但是“入门”的话题上，自认为还是可以讲两句的（笑
在谈这个话题之前，我想先说说大一刚进来时候的自己。
众所周知，前后端的概念是计算机行业的新人最早、最容易接触的，无论是听周围人的言谈，还是在网络上铺天盖地的培训班，前后端是最热门的主题。
当我刚刚进入大学，还是个弱鸡🐔，没有入门的时候，我看到这些新鲜的名词感到十分头大：
CMS、Severless、Nodejs、NoSQL、Docker、Vue、MySQL、nginx、虚拟化、Python、React、Java、Spring、Golang、高并发、JavaScript、HTTP、云计算、PHP····
以上的这些（还有无数没有列出来的词汇）都与web相关，而我当时遇到这样的环境，感到了深深的迷茫，甚至开始怀疑人生：这么多技术，要学到哪年哪月去？我要怎么开始学？
最开始的时候，我采用了一种非常笨的方法：挨个查找，每一个没看过的都丢到百度百科/维基百科里，去了解它是什么，它有什么用。但是看着看着，就看不下去了，因为一个概念的定义和使用里总会衍生出新的名词，而去搜索新的名词又有新的概念出现，如此反反复复，脑子还是一团糟，完全梳理不出来知识的脉络。
于是我想，一不做二不休，从一个名词的百科描述开始，把它当作一个副本，打穿了它再去学下一个（后来我知道了上面的方法叫广度优先搜索，这个叫深度优先搜索）这个方法还是有问题，就是看的很多东西印象不深，像是高中的文科知识点一样，很容易忘记，概念与概念之间也有混淆。
两条路都走不通，该怎么做呢？焦糖的学长学姐给我的建议是： Learning by doing
计算机学科是一门对实践动手能力很强的学科，而且前后端技术本身是你“看得见摸得着”的，一个页面的展示，一次请求的返回结果，都是学习中很强烈的正反馈，这是保证了“做中学”方法学习效率高的重要因素。
所以， tips第一条：“做中学”，一定要动手写代码，不能偷懒
掌握了正确的学习方法，那下一步是什么呢？我猜你现在的状态是：已经拿起了锤子，在寻找着哪里可以钉钉子吧。
不要着急，我接下来要先摆明一个事实： 没有适用于所有人的Roadmap，只有永远的探索
如果大家到了就业的岗位上，和你的同事闲聊时谈到是怎么入门学习的，他们的回答一定是千奇百怪的。
有的同学是从初高中就接触了信息学竞赛，早早的接触到了计算机，从C语言、数据结构开始学起，之后才接触到了开发；有的同学是从小玩游戏，总寻思着搞个“盗取QQ密码”或是“破解游戏”的金手指给同学们显摆一手才学习了网络攻防知识；也有之前完全没接触过代码，甚至大学非计算机相关专业的同学因为“一个东西不怎么顺手，干脆自己搞一个”而成为了百万级下载量的开源库的作者。
一千个互联网从业者有一千个入行的路径，其实并不是前人的脚印不可以复刻，而是因为他们在路上走的太多太杂，导致所有路都被踩得平平整整。对于一个新人而言，最难的事情不是没有路可以选，而是有太多路可以选，人就懵掉了。
看技术书籍学习吗？可以
看MOOC/Bilibili上的视频学习吗？可以
看廖雪峰的博客/菜鸟教程的文档和例子学习吗？可以
你可以从千奇百怪各式各样的网站、平台上学到前后端、Web开发的知识，这就是计算机行业的魅力，它是开放共享给所有人的，而学习这些知识，没有固定的路径，没有RPG游戏里的线性打怪升级，只有开放世界的无限探索。
而在探索的过程里，你会学到很多东西，不仅仅是技术，还有计算机学科十分突出的思维。即使你踩了坑，发现了很多资源其实并不优质（比如谭浩强的C语言），但你也记住了信息筛选的重要性。当我现在站在一个从业者的位置上，回顾大学时期入门时东看看西瞧瞧的时光，我并不认为有哪些知识，哪些技术“白学了”，因为它们是一直陪伴着你的，总会在你不经意间发现它的用处。
所以， tips第二条:不留余力地探索吧，每个人都有属于自己的路，路上的所有都是收获
前面讲了一些“鸡汤”，接下来就是站在一个前端工程师的视角上给出的学习Roadmap
提前声明：书籍（包括电子书）、网站等仅供参考，是我自己的入门路径，大家不必“完美复刻”，不要忘记自己探索的重要性哦
是的，你没有看错，一个前端工程师的最开始要学习的是爬虫。
理由（新人可能看不懂，可以学会一些东西之后回头看）：
爬虫的教学有很多，个人的入门是通过这本书：
（里面的代码，我之前曾一行一行敲了两三遍，现在回想起来也是很有意义的事）
如果你还不会Python，可以考虑用这本书入门：
如果只是入门Python，你可以只看第一部分，你感兴趣可以顺便学习后面的Django（一个后端框架）和小游戏。
网络上的课程方面，阿里云的Python感觉节奏不错，如果有其他py入门课程可以回复，让大家都看到
另外，廖雪峰的Python课程可以作为进阶课程
当你用BeautifulSoap库获取数据的时候，你有没有发现网页的构成是什么样的？它是一个一个结构化的标签组成的，我们看到的所有网页都不例外，“盒子模型”贯穿始终。那么它们都是什么呢？接下来就是学习HTML了
而我们在筛选标签的过程中，用到了很多标签的特性，比如颜色，它是和标签放在一起的还是分离的？相同的的标签，比如div是靠什么让我们在视觉上区分开？这些都是CSS的作用，那么，CSS也要安排一下咯
网络资源推荐（CSS也是同样的平台去学）：
书籍推荐：
HTML5与CSS3基础教程（进阶书籍，先看HTML再看HTML5哦）
恭喜你，凭借以上的知识，你已经可以完成一个网站的搭建了，不信？快回去看看Python的Web教程（阿里云和廖雪峰都有），开始学习（或者重新学习）里面的课程吧，如果你之前学习了一些却没太理解，现在的你一定会茅塞顿开
给个传送门：
如果你喜欢书本上的课程，我推荐这一本：
Flask Web开发：基于Python的Web应用开发实战（第2版）
这个时候，你已经是一个合格的前端/Web入门者了，你已经有了知识体系的初步构建和动手能力
无论是爬虫还是Web App，少不了的一个部分就是数据存储。你可能会想，存储有什么呢？只要保存和读取就够了。那么如何做好保存和读取，它的形式是和我们在电脑里的文件一样吗？如果不一样，它的优势在哪里呢？
抱着这些问题，你可以开始入门数据库和SQL了，如果这个时候你已经是大二下学期，那么我很推荐你去抱着课程的书本学习，如果你还是一个小白，这本书应该可以帮助你入门
当然，这个时候也少不了廖雪峰
如果你已经有了数据库基础，也很对数据库技术很感兴趣，论坛里的另一篇关于数据库的帖子可能会帮到你哦（有种RPG游戏里从基础角色转职的感觉呢）
这个阶段，你已经对整个知识体系有了初步的认识。但是我们之前做的大多数工作都是在自己的计算机上进行的，有想过把自己写的Web应用给其他人使用吗？该怎么做呢？还有一个新的问题是为什么我们，为什么很多事情只有连接上网络（WiFi或是宽带、流量）才能进行？“互联网”的本质是什么？
能回答以上问题的是计算机网络的知识，而作为初入门，你可以先看这本书：
（有很多图片，读起来相对简单）
如果你学有余力，还想了解更深层的计算机网络的知识，就去看这本书吧（同时它也是大二下计网课程的教材）
JS，现代Web无法离开的语言，它随着web的浪潮起势，在它成长的过程中有了Ajax异步技术，正式宣告了前后端分离时代的诞生，09年Nodejs的诞生让JS的能量爆发，到了今天，GitHub上JS依然是最活跃的语言（甚至没有之一）
JS是极其重要的，强大的JS功底也是一个优秀的前端工程师必备的条件，那么让我们开始吧！
JS从es6（js的标准）开始突变，因此有教程是专讲es5及之前的语法，有些教程不区分es6和es5，在下面的资源推荐中会标明白
JS基础教程：
网道-JavaScript（es5）
现代JavaScript教程（包含es6和es5）
阮一峰ES6 入门教程 （只讲es6）
JS书籍
JavaScript高级程序设计（第4版）（经典红宝书，第四版应该有es6内容，存疑，非常推荐读）
你不知道的JavaScript（主讲es6，很喜欢的一套书，共分为上中下三卷，像一本武林秘籍）
JavaScript DOM编程艺术（第二版）（可以读读）
但是以上这些还只是入门的标准，（其实我现在都不敢说自己会JS）所以，持续学习吧！
这个小标题是什么意思呢？是说你可以不用同步地去学习了，接下来的知识可以并发学习（那么问题来了，什么是并行什么是并发呢？）
如果让我推荐初学者学习哪种前端框架，我一定会说是Vue，因为它足够新手友好
网络资源推荐：
Vue中文官网，内部有教程和规范等等，生态很好，中文文档很优秀
被删的Vue学习教程 来自勇聪、原寒的推荐，质量很有保证
而进阶知识，有本书推荐：
以上的这些都是Vue2的教程，Vue3即将来到，那么该如何获取知识呢？
从这个时候开始，你会发现你来到了瞬息万变的现代Web时代，你会发现在本部分之后，书籍的推荐减少了，更多是在网络上的知识。因为很多有趣有用的教程、课程是你自己搜索到的，包括但不限于B站的课程、各种在线编程培训班视频资源、CSDN、知乎、掘金等社区的优秀文章等等
很多事情是自己搜索到的，是其他人推荐的，这就是探索能力的体现
除了Vue，我更想向大家介绍Vue的作者尤雨溪，可以看看这个：尤雨溪的访谈视频
PS：之前听同事和大牛推荐过国外的前端课程Frontend Master，如果你足够有💰和精力，可以选购
因为你有过用Python开发Web应用的经验，所以入门Node对你来说并不难，如果你想了解更多Node的优势，可以看看进阶知识里推荐的那本书
教程推荐：
廖雪峰-Nodejs（为什么总是你）
进阶知识：
如果你没有在学校上Unix操作系统基础这门课，我比较推荐你看这本书：
前端两大框架里，另一个就是React，它在国外被使用的更多，而在国内没有Vue火（有多方面的原因导致，可以再开一篇帖子分析了）但这并不影响React也是一个优秀的前端“框架”，React和Vue在相互 抄袭 借鉴中都获得了成长
入门推荐；
进阶知识？快去自己探索（其实是自己也并没有太多好的教程啦）推荐阅读国外的论坛或博客，讲解React的会很多
PS：如果大家有好的React教程、资料，可以在下面回复！
如果你是网络安全方向，这块可以跳过。
Web安全是网络安全的一个重要部分，虽然现在的各大公司工种里已经将安全工程师和前后端开发区分开来，但是一本的安全知识素养还是要有，如XSS、CSRF等攻击的原理
书籍推荐：
你已经学习到很多了，那么有这样一个问题：
从浏览器里的地址栏里输入一串域名并回车，到一个页面展现在你面前都发生了什么事情？
如果你能回答出50字，说明你已经入门了
如果你能回答出400字，说明你已经有了Web的整体脉络
如果你能用这个题目写一篇长长的文章，事无巨细滔滔不绝，那么我要给你竖起大拇指👍
每学习一段时间，就更新一下这个问题的回答吧！这个问题可以贯穿你的学习始终
你知道什么是LAMP/LNMP嘛？
它是Linux + Apache/Nginx + MySQL + PHP的缩写，是非常经典的一套动态网站的开源技术选型，你可以尝试用这一套东西搭建起自己的网站
（非常抱歉，这个部分没有推荐的教程，因为我自己也是零散着学习的😭 ，读者朋友们有推荐的可以在下面回复）
而Docker的出现，给前端朋友们一个快乐的方式部署自己的Web App，只需要一台云服务器即可，那么，尝试把自己写的Web App（无论是Vue项目还是React项目）部署起来，并在网络上访问它吧！
如今，各家互联网公司都推出了自己的小程序应用，从微信小程序到支付宝小程序、头条小程序甚至快手小程序等等，在这样一个繁杂的“小程序”世界里，和前端是脱不开关系的，如何开发小程序，小程序的实现是什么样的，小程序的未来如何？
书籍推荐
微信小程序开发入门和实践（缺点是这本书比较老了，是2017年的版本，但是可以看看）
Serverless在近年是一个很热门的话题，将“服务端”细化简化，为前端服务，Serverless在各大公司都有技术落地，且在国外也有创业公司专门做Serverless服务，代表的有Netlify，而微信小程序的开发也和腾讯云Serverless有很深的融合，可以多多了解
·······
对于这个Roadmap，我深知上文罗列的资源教程并不会是全网最好的，但确确实实是我自己学习的历程，大家主要可以采取和而不同的策略，拿这个做个路径参考。
而学习的时候也不要心急，因为这些看似“课外”的知识会最终与你学习的课内知识结合起来，你的知识体系是不断扩充和完善的，相信我，大二结束的时候才是你的质变。
如果大家有什么想补充的，可以在下面留言，
谢谢前辈的经验分享，给迷茫的我指点迷津！！！
呜呜 赵大哥！！我滴超人 焦糖之魂捏 编不下去了回帖必须要二十个字符