第一境、昨夜西风凋碧树，独上高楼，望尽天涯路

学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上=

学习HTML基础，了解如何编写语义HTML
行级元素
块级元素
文档流
HTML5新特性Web语义化
新增的标签属性
本地存储的方式

一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个网站，比如看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上

    1.  日常鸡汤，脑部CodeLift[阿里CodeLife](https://suckosn-blog.oss-cn-hangzhou.aliyuncs.com/codelife/codelife.pdf)
    2. [HTML5语言工程师](https://pan.baidu.com/s/1Gci-q2_ZlkO9Jwic7SSZkg) 提取码：`ix3o` 
    3. [一个不错的学习网站适合初学者](https://developer.mozilla.org/zh-CN/docs/Web/HTML)

学点CSS 现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。

首先要做的是学习语法，熟悉常见的CSS属性
乱七八糟选择器
权重important
盒子模型
居中的方法
flex布局
文本溢出隐藏
动画效果
媒体查询
伪类，滚动条，基本样式的优化策略

任务一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了 HTML页面的话，现在是时候应用CSS来让它的样子看起来像实际的Github资料页面一样了。前面的那5个页面都要拿来试一下。

   1. [css在线调试](http://www.cssdesk.com/) 需要学会安全上网
   2. [css在线调试2](http://dabblet.com/ )
   3. [css在线课程](https://www.bilibili.com/video/av54123185/?p=36) 哔哩哔哩~~
   4. [349套网站模板](https://pan.baidu.com/s/1zzYfQWldwQNJblD1tIt6HQ) 提取码：`9h66`

学习JavaScript基础 JavaScript能让你的HTML页面互动性更强。比方说你在网站上看过的所有那些幻灯片、弹出窗口以及广播通知，以及在没有重载页面的情况下重载页面的特定部分，这些都是用JavaScript做的。在这一步中，你将会学习JavaScript的基础来为后面的旅程做好准备

学习这门语言的语法和基本结构
1. 基本类型
2. 变量声明
3. 操作符
DOMAPI 学习如何用JavaScript来操纵DOM，比方说如何从页面移除一些元素，如何增加一些元素，增加和移除类，通过JavaScript应用CSS样式，一些基本的事件。
1. 获取节点
2. 更改值
3. 更改css样式的方法
4. 基本的事件，点击，鼠标移入移出
完成之后再学习和理解诸如范围、闭包、变量提升以及事件冒泡，这些东西理解可能有点困难可以先记着，在某一个下午茶时光你可能会豁然开朗。
1. 什么是闭包，优略，尝试封装自己的闭包
2. 对象全局对象，this的指向
3. 变量提升
4. 事件冒泡
学习如何用XHR或者Ajax生成HTTP调用。Ajax可以让你在不需要重载网页的情况下执行特定动作。
1. 原生HHR发送请求，XMLRequeest原生。
2. 试着用之前学过的知识封装自己的请求方法。
学完之后接下来就要了解ES6+的所有新特性,他与ES5有什么区别。
1. 了解即可，暂不做深入探究，只需记住这是一个语言标准。

恭喜你现在你应该已经感觉到东西像是那么一回事了。如果你按照上面的步骤做下来的话应该鼓励一下。这些是你刚刚学到的一些最重要的东西。

记住不练习的话你学不到任何东西。你可能随时都会感觉自己已经理解了但是如果不练习的话很快就会忘掉。在按照这份路线图去学习的时候，要确保尽可能多地去上手实践。

附加一些自己做过的的的js案例

音乐播放器demo 提取码：e1i2
2048游戏

第二境、带渐宽终不悔，为伊消得人憔悴

<div class="alert alert-danger" role="alert" id="changemusiclyc" style="margin:25px auto;"> <h4 style="color:#d93838;">戒骄戒躁</h4> <p>恭喜你已经掌握了前端开发的基本知识，但是这距离一个职业者还是有很大差别的，你需要更加强大的工具和利刃来助你，但时时刻刻请记者，返璞归真，一切都是基于之前知识加以封装和演化。</p> </div>

学习框架正常的开发流程中，人们很少从用原生的js来处理业务——为了快速的实现需求，往往都是在几门框架中选取符合自己现实环境的 a. CSS框架
- 学习bootstarp熟悉栅格、组件、移动优先、响应式类等概念。能利用这些东西快速的编写页面。
- 知道框架底层的原理,CSS框架底层并不神秘 b. 学习JS相关
- jquery 曾经每个人都对jQuery疯狂，也有充分的理由；这是一个强大的库，在JavaScript基础上提供了一个封装，让你可以用兼容浏览器的方式执行任何东西。
- jquery插件的使用，常用的jquery插件封装以及使用。推荐一个插件网站
- 尝试使用闭包原理自己封装简单的插件诸如计算器，轮播图等

!> 练习时间:我已经说过很多次但是还是要再说一次，不练习的话你学不到任何东西。你可能随时都会感觉自己已经理解了但是如果不练习的话很快就会忘掉。在按照这份路线图去学习的时候，要确保尽可能多地去上手实践。继续做些响应式网站，用JavaScript增加交互性。你可以添加任何感兴趣的现有的网页上去，但记住要利用上目前学到的一切。

附加一些自己看过的实战教程 >

EasyUI视频教程提取码：ezi3
jquery视频教程提取码：7aud
jquery源码视频-逐行分析
jquery常用插件整理提取码：nzp0
上手vue*(这里建议初学者学习vue是因为vue的API做的十分强大，学习成本最低，熟悉了vue之后再去学习其他的框架也会触类旁通的)*

a. 单页应用的概念

b. render函数

c. 指令、 生命周期、 组件模板等概念

任务： vue的每个内容都需要实战来巩固，即使你认为你已经掌握了它们。

上手vue工程*(vue-cli)*

a. 尝试用官方的脚手架搭建vue工程

b. 了解node,webpack,相关概念

c. 尝试自己搭建一个vue工程，这个过程虽然很痛苦，但是能学到工作中不少实用的知识。

!> 练习时间:vue是一个上手容易精通不易的框架，任何时候都要抱着一个空杯的心态，好好去钻研。在附加资料部分，有很多vue的实战，可以参考里面的案例，自己多练练。

附加一些自己看过的实战教程 >

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲提取码：w99y
vuejs基础入门提取码：9n6x
Vue.js源码全方位深入解析提取码：ura7

<div class="alert alert-danger" role="alert" id="changemusiclyc" style="margin:25px auto;"> <h4 style="color:#d93838;">柳暗花明又一村</h4> <p>恭喜你已经掌握了前端开发的基本素养，现在可以去看一些面试题目，或者尝试投出一份简历了。</p> </div>

第三境、众里寻他千百度，蓦然回首，那人却在，灯火阑珊处

<div class="alert alert-danger" role="alert" id="changemusiclyc" style="margin:25px auto;"> <h4 style="color:#ea612c;">欲穷千里目，更上一层楼！</h4> <p>js是现在最流行的开发语言，然而学了这么久，你真正的足够的了解他们吗？请尝试阅读下内容：</p> </div>

包管理器 包管理器可以帮助你把外部库和插件放到你的项目里面，这样你就不用关心手工复制库或者费事地在它们发布新版时更新文件的事情了。现在有yarn和npm了。这两个几乎是一样的，都只是实现，你可以任选一个，一旦学会了使用其中一个，另一个自然也不成问题
CSS预处理器 css预处理器提供了很强大的编写和构建的功能。选项有很多，包括Sass、Less、Stylus等等。要我选的话，我会选择Sass。然而，PostCSS最近的发展势头也不错，这属于一个锦上添花的东西，有点类似于CSS的“Babel”。你可以拿来独立使用或者在Sass的基础上叠加。目前我建议你先学Sass，等后面有时间了再看看PostCSS
构建工具工具可以帮助你进行JavaScript应用的构建/打包以及开发。这一类包括了linter（代码检查）、task runner（自动构建）以及bundler（打包工具）。对于自动构建，这个本来是是很多选项的，包括npm脚本、gulp、grun等等。不过这一次，既然webpack能够处理gulp能做的大部分东西，所以只有自动构建中的npm脚本可以用来对webpack能做的任务进行自动化。你不需要学习Gulp，然而到后面如果你有点时间的话，可以去看看它能否对你的应用有所帮助。
http原理 一个开发者不能不懂http、tcp··· HTTP协议实战提取码 tcfv
算法 一个好开发不能不懂算法算法讲解提取码 38c3 编程就是算法和思想的结合。
RN开发实战 你是否尝试过使用js构建原生APP，react-nactive可以帮你实现。 RN开发实战提取码 38c3 编程就是算法和思想的结合。
服务器渲染 服务端渲染是一个web开发者优化的必经之路,选定的任何框架内再学学服务器端渲染的知识。有不同的选项可选，这要取决于你用什么样的框架。比方说如果你决定用React，最值得关注的选项是Next.js 和 After.js。如果是Angular，你可以选Universal。对于Vue.js，我们有 Nuxt.js

这份路线图可能还会有遗漏的地方，但是足以应付任何“前端工程”角色之所需。还要记住的是，关键是尽可能多地练习。一开始你可能会觉得很吓人，总感觉自己没有掌握，但这是正常的，慢慢你就会觉得自己变得越来越好。还有，陷入困境时别忘了寻求帮助，你会惊喜地发现有多少人愿意帮助你的，或者至少我愿意</h5>

文章有不当之处欢迎批评指正，也请大家关注我的其他文章，会不定期的更新。多多交流，共同进步。