最新Web前端入门的自学路线
> 新手入门前端，需要学习的基础内容有很多，如下。
一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。
二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。
三、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。
四、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面试时，有的公司不一定会问canvas，靠运气。如果时间不够，这部分的内容可以先不学。但如果你会，绝对属于加分项。
七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
八、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。
九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。
十、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。
十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
## 推荐的前端图文教程
我这里有前端进阶架构vip学习资料，包含内容有：HTML、css3、JavaScript、Vue，移动端web开发，Ajax、jQuery、canvas、等多个知识点。需要获取这些内容的朋友可以点击 [“前端”](/doc/DYm9VT2h3ZUp0V29l) 两个字领取
编辑切换为居中
添加图片注释，不超过 140 字（可选）
非常详细和贴心，你值得star。这个前端教程主要有三个作用：
1. 网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位入门者的同理心。
1. 帮助前端同学提供一个精品学习路线和资源，提高学习效率，少走很多弯路。
1. 可以当做前端字典，随时翻阅，查漏补缺。
## 推荐的书籍
- 《你不知道的JavaScript》
上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。
- 《网络是怎样连接的》
程序员面试的时候，经常会被问的一个问题是：“在浏览器的地址栏输入url，按下回车后，发生了什么？”
为了弄清楚这个问题，看上面这本书，足够了。如果你想入门计算机网络，这本书也是必读的。评价非常高。
关于这个问题，也可以看下面这篇文章：浏览器输入 URL 后发生了什么？
- 《CSS世界》
关于 CSS 的书籍，首先推荐这本书，我身边的大佬们都说这本书好。虽然我不是大牛，但我也觉得这本书很好。
如果 js 熟练，说明你是有技术深度的前端；如果 css 熟练，说明你是有经验的前端。
框架对入门越来越不友好了，功能越来越多了，各种东西层出不穷，如果你要学框架的话，咱就从vue开始吧，为什么用vue？中文社区完善呀，而且学习曲线不是很陡峭，而且公司里常用呀
学习vue之前，你得了解下前端的一个大杀器：node.js
先安装好node.js然后搞懂这几个事情
1. node和npm是什么，他们可以用来做什么
1. npm init命令有什么作用
1. node_modules和package.json有什么作用？
- 推荐读物：不推荐读书=0=，多看文档，前端框架变化太快了
- 这里就没有大纲了，把官方文档的基础部分看完就好了，其他的不用看，vuex和vue-router相关看到就跳过吧，暂时对你来说不需要
- 带着这几个问题去学习
1. 使用vue-cli生成的项目，目录结构是怎么样的？其中的每个文件夹和每个文件的作用是什么？（vue-cli是有官方教程的，按照官方教程来生成项目！！！）
1. 什么是双向绑定？
1. mvvm框架是什么意思？
1. 实现一个todolist，网上demo很多，找一个一步步来就好了，关键是要理解mvvm框架的意义，为什么要使用mvvm框架
1. 关于框架这一块我写的不太详细，有空再补充吧，我感觉这里一开始主要卡着的点应该就是关于项目的复杂结构（对新手而言），不清楚那么多文件是干什么的
## vuex和vue-router
- 做好了todolist之后，你需要了解两个东西，也是工程化非常重要的两个东西
- vuex&&vue-router
-
- 同样，这两个教程只看基础部分，然后解答下面这些问题
1. vuex和vue-router分别是什么？
1. vuex和vue-router分别能做什么？
1. vuex和vue-router的诞生是为了解决什么问题？
1. 什么情况下需要使用vuex，什么情况下需要使用vue-router？
- 解决了这些问题之后，你需要实战，这里推荐一个github上对vuex，vue-router入门比较友善的项目：/bailicangdu/vue2-happyfri
- 实战要点：
1. 先看懂项目中vuex和vue-router的用法（第一步不是看懂项目，而是看vuex和vue-router怎么用）
1. 自己新搭建一个项目，配置好vuex和vue-router到能使用的地步
1. 看懂项目
1. 自己实现，实现的时候就不要看源码了，想不明白的地方可以回来看
好了如果进行到这里，你大概也就入门了吧23333，这个时候你也就能利用前端的知识解决问题了，但是离一个前端还是有很长的路要走的~~比如上面说的基础打牢和能力进阶
## 项目推荐
1.vue完成的饿了吗前后台webapp
/?target=https%3A///bailicangdu/node-elm/blob/master/API.md
2.一个vue完成的QQ音乐
/?target=https%3A///timelessover/vue-QQmusic
基本上上面项目都能自己做出来之后，前端也就彻底入门了，补充基础知识之后，找找工作实习也没啥大问题（但是很多人卡死在vue门口=。=），加油吧朋友们
========干货结束分割线======
关键其实还是驱动力，如果项目驱动能给你足够的动力的话，那就不停的找项目做吧，走完上面的流程，再看看书的话，找个学校的工作室帮老师做项目就好了（应该到工作室的门槛了）~
如果驱动力不够的话，那就关注我呗~ 我之后会发些之前从入门前端到现在遇到的一些事情，希望对你们有些帮助~
如果有不懂的可以来问我~说不定你骨骼清奇，一下子就打通任督二脉，直接入门了呢
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
1. 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
1. 私信后台回复【前端】有惊喜！
1. 同时可以期待后续文章ing
如果觉得《Web 前端怎样入门？最新Web前端入门的学习路线》对你有帮助，请点赞、收藏，并留下你的观点哦！
