How to systematically learn front-end development with zero foundation?

How to systematically learn front-end development with zero foundation?

Original source: @张帅在地上

Website development and development are roughly divided into front-end and back-end. The front-end is mainly responsible for realizing visual and interactive effects, communicating with the server, and completing business logic. Its core value lies in the pursuit of user experience. You can learn systematically as follows:

Basic knowledge :

1. HTML + CSS This part is recommended to learn from the W3school online tutorial , learning while practicing, and there are quizzes after each chapter. After that, you can imitate some websites to make some pages. After accumulating some experience in practice, I can read a book or two systematically. I recommend "Head First HTML and CSS Chinese Version". This book is too detailed and I can't read it patiently. You can consider it according to the situation.

2. There are a lot of things to learn about Javascript. If you don't have the foundation of other programming languages, it may take a little effort to learn it. It is recommended to learn it at W3school first. After that, I suggest you read "The Essence of Javascript Language" immediately. JS is a very confusing language. This book can help you distinguish between the essence of the language and the dregs. The essence of the language should be studied in depth. The dregs part can understand the code written by others, so you don't have to try it yourself.

Advanced :

With the above foundation, you can carry out general static web page design, but you need to learn more about complex pages.

1. CSS. You must read "Mastering CSS". After reading this book, you should have a good understanding of the concepts of box model, flow, Block, inline, cascade, style priority, etc. As an exercise, you can read the book "CSS Craftsman", which has detailed introductions 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 in JS programming. After having the foundation, further learning content includes:

a) Frame.

Recommend jQuery, simple and easy to use. After learning js in W3school, you can directly use jQuery to complete some simple projects. The learning method is also very simple. Just make a few pages according to the product documentation. You don’t need to cover everything, just check the documentation when you encounter problems later. The framework can help you shield the differences of browsers, allowing you to focus more on the essence of web development and learning. Supplement: You can use Codecademy to learn Javascript, jQuery, the user experience is really good (thanks TonyOuyang).

b) Javascript language paradigm. The name may not be appropriate, but I can't find a concept that can describe the two concepts of "object-oriented" and "functional". Javascript is not entirely an object-oriented language. Many of its design concepts have the shadow of a functional programming language. Even if you don't use object-oriented, you can completely understand it as a functional programming language.

Many language features of Javascript exist because of its features of a functional language. This part recommends to learn the basic theory of object-oriented first, to understand the concepts of encapsulation, inheritance, polymorphism, etc., Wikipedia, Baidu Baike will be your helper, and "Object Oriented Javascript" is recommended, which should have a Chinese version. I don’t know anything about functional programming systematically, so I don’t know much about it.

c) The internal mechanism of Javascript language. The following concepts must be clarified: the scope of variables in JS, the method of variable transmission, the definition and execution environment of functions, closures, four calling methods of functions (general functions, object methods, apply, call), and four In the calling mode, who is'this' pointing to. You will learn more about this part in "Javascript Essentials". In addition, you must understand json.

d) dom programming, one of the core skills of this web front-end engineer. Must read "Dom Programming Art", and the part about dom programming in the book "High Performance Javascript" is also very good.

e) Ajax programming, which is another core technology. Ajax recommends checking some information on the Internet to understand the ins and outs of this concept. The content on Baidu Baike and Wikipedia is sufficient. Real programming is very easy. Nowadays, almost all frameworks have a good encapsulation of Ajax, and programming is not complicated.

f) Understand the differences of browsers. This part includes two parts: CSS and js. There are many differences between browsers. It is recommended to accumulate in practice. In addition, the browser's rendering mode, DOCTYPE and other content should be studied systematically.

3. HTML5 and CSS3. The HTML5 specification was released on October 28, 2014. The mobile terminal HTML5 and CSS3 have been widely used, so you must know.

One step further · Code level :

With the above knowledge, for most small websites, you should be able to write code that can work. But if you want to become a more professional front-end, you need to continue to work hard. There are about four higher requirements: 1) easy to maintain, 2) testable, 3) high performance, 4) low traffic (mobile terminal).

1) Easy to maintain. For the page, you should understand the separation of "style", "data", and "behavior". Of course, the corresponding ones are CSS, HTML, and js. For js code, you'd better understand design patterns, refactoring, MVC, etc.

2) Measurability.

3) High performance. Must-read "High-Performance Javascript"

4) Low flow rate. The mobile terminal pays more attention.

One more step · Engineering level :

Front-end projects also face all aspects of the software life cycle. The first is code management. You must learn to use Svn and Git. The second is the construction of the code. Nowadays, the construction of front-end code is no longer a simple compression. It requires dependency management, module merging, and various compilations. It is more necessary to learn to use front-end construction tools such as Grunt and Gulp.

and then?

The above content is just a brief description of the order of front-end learning. For the knowledge structure that front-end engineers should have, please refer to here: JacksonTian/fks · GitHub

For the previous development, that's all for the basic content. You can selectively study the following content according to your hobbies.

1. Interaction design. Large companies still have professionals who do this, but the front end that doesn't understand interaction is definitely not a good front end. Recommend "Simplicity First".

2. Back end.

It should be said that the front-end engineer must know at least one back-end language, but if you like to learn more, PHP should be the less difficult to get started. This part can be divided into page-based and frame-based. Large-scale projects are developed based on the framework. It is recommended to understand at least one MVC framework, such as PHP's Ci, Yii, Yaf, etc. The design ideas of the Haohuan framework are similar. Now that NodeJs has been widely used in large companies, it is recommended that you use the Express framework on Node to develop some back-end services.

3. Android and IOS development.

Today, the front-end work field has been very extensive. Native interface development is essentially front-end development. All large companies are facing the problem of maintaining the Native environment and web environment pages at the same time. If they can be technically unified, there will be Great value. For those who are able to learn more, they should understand the basic process of Native development and at least understand the technology of interface construction.

Reference: https://cloud.tencent.com/developer/article/1054765 How to systematically learn front-end development with zero foundation? -Cloud + Community-Tencent Cloud