How to systematically learn front-end development with Zero Foundation ?, Basic front-end development

How to systematically learn front-end development with Zero Foundation ?, Basic front-end development

Website development is roughly divided into front-end and back-end. The front-end is mainly responsible for implementing visual and interactive effects, as well as communicating with servers to complete business logic. Its core value lies in its pursuit of user experience. If you are a basic student, you can learn the system as follows:

 

Basic

 

1. HTML + CSS Learning, You can imitate some websites to make some pages. After accumulating some experience in practice, I can systematically read one or two books and recommend "Head First HTML and CSS Chinese edition". This book is too detailed, so I could not read it carefully. You can consider it as needed.

 

2. JavascriptThere are a lot of content,Without the foundation of other programming languages, it may take some effort to learn. We recommend that you read the Javascript language essence immediately. JS is a very messy language, this book helps you identify the essence of language and the dregs. You should study the essence of language in depth. The dregs can understand the code written by others, so you don't have to try it.

 

 

Advanced

With the above foundations, you can design general static Web pages, but you need to learn more about complex pages.

 

1. CSS.I must read "proficient in CSS". After reading this book, you should have a good understanding of the concepts of box model, flow, Block, inline, cascade, style priority, and so on. As an exercise, you can read the book CSS artist, which provides a detailed introduction to topics such as titles, backgrounds, rounded corners, navigation bars, tables, and forms.

 

2. Javascript.The content mentioned above is not enough to make you competent for JS programming. After the foundation, we will further learn the following content:

 

A) framework.

We recommend jQuery, which is easy to use and easy to learn. just do a few pages according to the product documentation. You don't have to cover all aspects. You can check the document in the future. The framework can help you shield the differences between browsers, so that you can focus more on the essence of Web Development Learning. Supplement: Codecademy can be used to learn Javascript and jQuery. the user experience is really good (thanks TonyOuyang ).

 

B) Javascript Language Paradigm.This name may not be appropriate, but I cannot find the two concepts that can describe "Object-Oriented" and "functional. Javascript is not a fully object-oriented language. Many of its design concepts have the shadows of functional programming languages. If you do not need object-oriented programming, it can be understood as a functional programming language.

 

Many of the language features of Javascript exist because of its functional language features. We recommend that you first learn basic object-oriented theories and understand encapsulation, inheritance, polymorphism, and other concepts. Wikipedia and Baidu will be your helper, in addition, we recommend "Object Oriented Javascript", which should have a Chinese version. I don't know much about functional programming. If you don't know much about it, You can Baidu.

 

C) Internal Mechanism of Javascript Language. The following concepts must be clarified: the scope of variables in JS, The way variables are transmitted, the environment for defining functions, the execution environment, the closure, and the four call methods of functions (general functions, object methods, apply, call), and the four call methods, who the 'eas' points. You will learn more about this part in the essence of Javascript language. In addition, you must understand json.

 

D) dom CodingCheng, one of the core skills of this Web Front-end engineer.Must read Dom programming art. In addition, dom programming is well described in the high-performance Javascript book.

 

E) Ajax programming, another core technology. Ajax recommends that you check some information on the Internet to find out the ins and outs of this concept. The content on Baidu encyclopedia and Wikipedia is enough. Real programming is very easy. Nowadays, almost all frameworks have good encapsulation of Ajax, and programming is not complicated.

 

F) understand the differences in browsers.This part includes CSS and js. There are many differences in browser content. We recommend that you accumulate more content in practice. In addition, DOCTYPE and other content should be systematically learned for the browser rendering mode.

 

3. HTML5 and CSS3. HTML5 specifications were released in October 28, 2014. Mobile HTML5 and CSS3 have been widely used.

 

Upgrade part

 

With the above knowledge, you should be able to write code that can work for most small websites. But to become a more professional front-end, you still need to work hard. Higher requirements include four aspects: 1) easy to maintain, 2) testable, 3) high performance, and 4) low traffic (Mobile End ).

 

• Easy to maintain. For pages, you should understand the separation of 'style', 'data', and 'hangzhou', which correspond to CSS, HTML, and js. For JavaScript code, you 'd better understand the design pattern, refactoring, MVC, and other content.

• Testability.

• High performance. Must read high-performance Javascript

• Low traffic. Mobile Terminals focus a lot.

 

 

Additional supplements

 

Front-end projects also face various stages of the software life cycle. The first is code management. You must learn to use Svn and Git. The second is code construction. Currently, front-end code construction is not simply compressed, and dependency management, module merging, and various compilation are required, learn to use front-end building tools such as Grunt and Gulp.

 

The above content is just a simple description of the order of front-end learning. This is the basic content for previous development. You can choose to learn the following content based on your interests and interests.

 

1. interaction design.Large companies still have professionals doing this, but front-ends that do not understand interaction must not be good ones. We recommend "Simplicity first".

 

2. backend.

It should be said that some engineers have to understand at least one backend language. However, if you are interested in it, you can also learn it in depth. PHP is the most difficult to start. This part can be divided into two types: page-based and framework-based. Large projects are developed based on frameworks. We recommend that you understand at least one MVC framework, such as PHP Ci, Yii, and Yaf. The design concepts of the framework are similar. NodeJs is now widely used in large companies. We recommend that you use the Express framework on Node for backend service development.

 

3. Android and IOS development.

Today, the front-end work field has been very extensive, and native Interface development is essentially a front-end development. Big companies are faced with the problem of simultaneous maintenance of Native and web environment pages, if it can be technically unified, it will be of great value. For those who have knowledge about Native development, they should understand the basic process of Native Development and at least the interface construction technology.

[I have a QQ Group for front-end learning and communication: 328058344 if you encounter any problems during the process of learning the front-end, please come to my QQ Group to ask questions. The group will update some learning resources every day. Chat is prohibited .]