第一次就写写自学前端的曲折过程吧
生活不易啊（划掉） 今天也是元气满满的一天！
看书+b站网课+mooc网课+官方API+敲代码！！
1 首先当然是HTML CSS
刚开始写css还不太理解，总是问为啥每次要写这么复杂的。。现在想想真是幼稚 。HTML 也就是描述网页内容的语言， CSS 是决定其样式的比如：字体颜色 图片大小之类的。这一部分的话看书就好了，很多 21天精通HTML+CSS。把书上的例子都敲了理解了，主要是熟悉，练练手感。像这样的都可以。
HTML代码大概长这样
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>你的第一个程序</title>
</head>
<body>
<h1>bulabula</h1>
</body>
</html>
CSS代码大概长这样
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
还有框架 Bootstrap
2 JavaScript&jQuery
JavaScript是描述行为的语言。比如你点了网页上的某个按钮 它会给你反馈。jQuery呢是JS的框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。下面的是大名鼎鼎的红宝书 很基础很好用。
js代码大概长这样
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
下面是学习jQuery的两本书
jq代码大概长这样
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
3 ES6
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言.
阮一峰老师也是非常厉害，附上电子书链接 ES6标准入门
es6代码大概长这样
for (var i = 0; i < 10; i++) {
setTimeout(function(){
console.log(i);
})
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
setTimeout(function(){
console.log(j);
})
}
4 Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
b站Node.js视频链接 这个老师讲得挺好，而且人也很有意思。
中间还有讲一些MongoDB，学完基础的MongoDB的增删改查也就会了。
node代码大概长这样
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello World\n');
}).listen(1717);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:1717/');
5 Vue.js
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
b站Vue.js视频链接 以及 Vue.js API
下面是一些基于Vue.js的框架
1.element-ui 官方网址
2.iview 官方网址
3.cube-ui 官方网址
4.at-ui 官方网址
还有很多…
vue代码大概长这样
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>第一个vue代码</h1>'
}
})
</script>
6 React.js
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
b站视频链接 框架也有很多不一一赘述了。
代码大概长这样
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
当然，三大框架还有Angular没提到，因为我没学过。（捂脸）
下面是一些代码编辑器
1.sublime text 是一个轻量级的很好看的编辑器，建议刚开始可以用这个。
2.vscode 功能强大 插件丰富。可以直接打开终端（学到node就知道有多重要了）
3. Hbuilder 也很好 可以试试
4. postman 测试接口的。连接上后端以后，可以用这个先试试接口能不能用，检测代码正不正确。不至于后面写很多，结果是无用功，后面找起bug来更麻烦。
5. 微信开发者工具 专门写微信小程序的，API也很详细，对小程序感兴趣的可以看看自己写一个。
第一次写，可能中间有很多遗漏（emmmm也不知道这个发表了以后能不能编辑）。总之，最重要的就是多写，熟能生巧！！！大家都要加油鸭~
