The front end of the process of self-study, with video links, document links, and recommended books code editor!

The first time to write about the process of self-winding front of the bar

Life is not easy ah (crossed out) Today is also a day full of vitality!

Reading + b + mooc network station network class lesson official API + + knock code! !

1 First, of course HTML CSS

Just started writing css not quite understand, always ask why each time to write such a complex. . Now that I think is really naive. HTML is the description language web content , CSS is to determine its style such as: the size of the font color images and the like. This part of the case read like a lot of 21 days proficient in HTML + CSS. The book's examples are knocked understanding, mainly familiar feeling and thought. Like this can be.
Like this are
HTML code is probably a long way

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>你的第一个程序</title> 
</head>
<body>
 
<h1>bulabula</h1>
</body>
</html>

CSS code is probably a long way

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);
}

There Framework Bootstrap

2 JavaScript&jQuery

JavaScript is a language describing behavior. For example, you point a button on the page and it will give you feedback. jQuery it is a JS framework, which encapsulates the JavaScript code for commonly used functions, provide a simple JavaScript design patterns to optimize HTML document manipulation, event handling, animating and Ajax interactions design. The following is the famous Little Red Book is the basis of good use.
Here Insert Picture Description
js code is probably a long way

<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>

The following is a study of two books jQuery
Here Insert Picture DescriptionHere Insert Picture Description
jq code is probably a long way

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

3 ES6

ECMAScript 6 (referred to as ES6) is the standard JavaScript language in June 2015 officially released, officially called ECMAScript 2015 (ES2015). Its goal is to enable JavaScript language can be used to write large complex applications, enterprise-class development language.

Here Insert Picture Description
Ruan Yifeng teacher is very powerful, attach Link entry ES6 standard

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 is used to build a library user interface. React mainly used to build the UI, many people think React is in MVC V (view). React internal project originated in Facebook, and Instagram to set up a website and open in May 2013.
b station video link frame, there are many do not see them here.

Code is probably a long way

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

Of course, there are three frame Angular did not mention, because I never learned. (Behind his)

Here is some code editor

1. Sublime text is a lightweight look good editor, you can use this suggestion just started.
2. VSCode powerful plug-rich. You can directly open a terminal (learned node will know how important a)
3. Hbuilder also very good try
4. Postman test interface. After connecting to the rear end, the interface may first try to use this can not be used, the detection code is correct or not. Many will not write back, the result is wasted effort, looking back from the bug in more trouble.
The micro-channel developer tools written specifically small micro-channel program, API also very detailed, on the applet interested can see for yourself to write one.

The first written, and a lot of possible omissions (emmmm do not know after this publication can not be edited). Anyway, the most important thing is to write, practice makes perfect! ! ! We all have to refuel duck ~
Released two original articles · won praise 0 · Views 20

Guess you like

Origin blog.csdn.net/qq_45275712/article/details/104720237