前端现在比较杂，有两条路，最终两条路会合并到一起，具体走那条看你自己的选择。
第一条，从原生基础入手
这条路走起来会比较枯燥，不能有快速的正反馈，可能学了一个月也不能写出像样的作品。但是你的基础知识会比较扎实。如果从原生入手，可以看一些讲 JavaScript 的书籍，比如 JavaScript 语言精粹[1]，这本书比较轻便，对自学比较友好。JavaScript 权威指南[2]我个人视为工具书，不作为教程使用。HTML 部分可以参考 HTML5 秘籍[3]。CSS 部分可以参考 CSS 权威指南[4]。DOM 部分可以参考 JavaScript DOM 编程艺术[5]。
以上推荐的图书并不代表是最好的，可以自行选择其它内容差不多的，也可以在网上找教程自学，比如 w3schools。但是网上的内容通常不是很完善。
原生基础打好后可以入手一些简单的前端框架，比如 Vue 1.0。Vue 2.0 相对就比较复杂了，不适合新手入坑。jQuery 可以选择性学，通常前端框架不和 jQuery 同时使用，因为它们同时操作 DOM 可能会造成不可预估的问题。
第二条，从前端框架入手
这条路走起来开始会比较舒服，一周就能搞出看上去不错的作品，但往往不知其所以然，而且对于初学者来说，一些框架的语法糖会被误认为是前端的原生方法或标准，对深入研究会造成一定的麻烦。目前比较流行的前端框架有 Vue、Angular 和 React 等等，可以自行选择任意一个学习。相关的书籍太多，我就不推荐了。
前端框架虽然用起来比较舒服，但其实还是绕不过原生基础的坑。举例子，Angular 的数据双向绑定底层涉及到脏检测和原型链，在实际应用中新手常常踩到 JS 和 DOM 数据不同步的坑，那么这时就不得不深入了解这两个底层的原生原理。这时对于新手来说往往是非常沮丧的，也非常容易造成弃坑。
---
长远角度我推荐第一条，先苦后甜，同时也能给你带来坚实的基础。第二条也有它的好处，在熟悉了一些框架后，再深入研究其底层原理，能给你带来豁然开朗的体验，但是前提是你遇到困难时能静下心来去研究，不会过早弃坑。
[1] JavaScript 语言精粹：
https://book.douban.com/subject/3590768/[2] JavaScript 权威指南：
https://book.douban.com/subject/2228378/[3] HTML5 秘籍：
https://book.douban.com/subject/11610880/[4] CSS 权威指南：
https://book.douban.com/subject/2308234/[5] JavaScript DOM 编程艺术：
https://book.douban.com/subject/6038371/