0 Basics How to systematically learn front-end development?

Website development and development is roughly divided into front-end and back-end, the front-end is mainly responsible for the realization of visual and interactive effects, as well as communication with the server to complete the business logic. Its core value lies in the pursuit of user experience. can follow the following ideas to learn system learning:

　　Basic knowledge:

1, HTML + CSS This part of the proposal in the W3school online tutorials to learn, while learning to practice, after each chapter there are small tests. Then you can imitate some websites to do some pages. After accumulating some experience in the practice, can read one or two books systematically, recommend "head first HTML and CSS Chinese version", this book is too thin, I can not come up with patience to read. You can consider it according to the circumstances.

2, Javascript to learn a lot of content, if there is no other programming language basis, to learn may have to pay some strength, or suggest first in W3school study. Then suggest immediately see "JavaScript language pristine", JS is a very confusing language, this book can help you distinguish which is the essence of language, which is the dross, for the essence of language, should be in-depth study. The dross part can read other people's written code on the line, they do not have to try.

Advanced Step:

With the above basis, you can do a general static web design, but for the complex page still need further study.

1, CSS. Must see "Proficient CSS", read this book you should be: Box model, Flow, block,inline, cascade, style priority, and so on concepts very understanding. As an exercise you can see the book "The Carpenter of CSS", which has a detailed introduction to topics such as title, background, fillet, navigation bar, table, form, etc.

2, Javascript. The above mentioned content is not enough to make you competent JS programming. Following the basics, further learning includes:

A) framework.

Recommended jquery, simple and easy to use, in W3school simple learning JS, directly into the jquery can complete some simple projects. Learning method is also very simple, according to the product documentation to do a few pages on the line, do not have to cover everything, later encountered problems to check the document on the line. The framework can help you to screen out the differences in browsers so that you can focus more on the essence of web development learning. Add: You can use Codecademy to learn javascript,jquery, the user experience is really good (thank Tonyouyang).

b Javascript language paradigm. The name may not be appropriate, but I can't find a concept that describes the two concepts of "object-oriented" and "functional". JavaScript is not exactly an object-oriented language, many of its design concepts have the shadow of functional programming language, even if you do not use object-oriented, it can be understood as a functional programming language.

Many of the language features of JavaScript exist because of the features of functional languages. This part of the recommendation first to learn the basic object-oriented theory, encapsulation, inheritance, polymorphism and other concepts to understand, Wikipedia, Baidu Encyclopedia will be your helper, and also recommended "object oriented Javascript", should have Chinese version. To and functional programming I understand also not system, not much said, can own Baidu.

c) Javascript language internal mechanism. The following concepts must be clarified: the scope of variables in JS, the transfer of variables, the definition of the function environment and execution environment, closures, functions of four ways of invocation (general functions, Object Methods, Apply,call), and four ways to invoke, "this" point to WHO. You'll learn more about this in the JavaScript language highlights. In addition, you must understand JSON.

D DOM Programming, one of the core skills of this web front-end engineer. Must read the art of Dom programming, and the part about DOM programming in the book High performance Javascript is also very well spoken.

E Ajax programming, which is another core technology. Ajax suggest to look up some information on the Internet, understand the context of this concept, Baidu Encyclopedia, Wikipedia on the content is enough. Real programming is easy, and today almost all frameworks have a good encapsulation of Ajax, and programming is not complicated.

(f) Understanding of browser differences. This part includes the CSS and the JS two parts, the browser difference content is many, the suggestion in the practice accumulates a lot. In addition to the browser's rendering mode, DOCTYPE and other content should be system learning.

3, HTML5 and CSS3. HTML5 specification has been released on October 28, 2014, Mobile end HTML5 and CSS3 have been very widely used, must know.

　　One step further · Code level:

With the above knowledge, for most small Web sites, you should already be able to write code that works. But to become a more professional front-end, you need to continue to work hard. The higher requirements are probably four aspects: 1 easy Maintenance, 2 testable, 3 high performance, 4 low flow (mobile end).

1) easy to maintain. For the page you should understand the ' style ', ' data ', ' behavior ' of the three separate, corresponding of course is css,html,js. For JS code, you'd better understand design patterns, refactoring, MVC, and so on.

2) testability.

3) High performance. Must read high performance JavaScript

4) Low flow rate. More attention is paid to the mobile end.

　　One step further · Engineering Level:

The front-end project also faces every aspect of the software lifecycle, first in code management, and you must learn to use SVN and git. followed by the construction of code, now front-end code building is not a simple compression, need to rely on management, module merging, various compilations, than need to learn to use Grunt, gulp and other front-end building tools.

　　And then what?

The above content is simply said the front-end learning sequence. The knowledge structure that the front-end engineer should have please refer to here: jacksontian/fks GitHub

For the development of the previous paragraph, the basic content of these, can be based on their own interests and preferences to learn the following content.

1, interactive design. Large companies still have professionals to do this, but do not understand the front end of the interaction must not be good. Recommend "Simplicity first".

2, back end.

It should be said that the former engineer must understand at least one of the back-end language, but if the hobby can be in-depth study, the difficulty of the lower should be PHP. This section can be divided into two types based on the page, based on the framework. Large projects are based on framework development, it is recommended to understand at least an MVC framework, such as Php ci, Yii, YAF, and so on, and the design of the framework is similar. Now that Nodejs has been widely used in large companies, it is recommended that you use the Express Framework on node to do some back-end service development.

3, Android and iOS development.

Today, the front end of the field of work has been very extensive, native interface development is also the front-end development, a large companies are facing the native environment and Web environment page maintenance issues, if the technology can be unified, will have great value. For students with learning ability, we should understand the basic process of native development, at least understand the technology of interface construction.