Tmall experts are here to teach you! How to systematically learn front-end development from scratch?

Website development is roughly divided into the front-end and back-end. The front-end is mainly responsible for achieving 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 the system as follows:

Basics:

1. HTML + CSS For this part, it is recommended to learn on the W3school online tutorial, practice while learning, and there are small tests after each chapter. After that, you can imitate some websites to make some pages. After accumulating some experience in practice, you can read one or two books systematically. I recommend "Head First HTML and CSS Chinese Edition". This book is too detailed and I didn't have the patience to read it carefully. You can consider it according to the situation.

2. Javascript has a lot to learn. If you don’t have a foundation in other programming languages, it may take some effort to learn. It is recommended to learn it on W3school first. Then it is recommended to read "The Essence of Javascript Language" immediately. JS is a very confusing language. This book can help you distinguish what is the essence of the language and what is the dregs. For the essence of the language, you should study it in depth. For the dregs, you only need to understand the code written by others, and you don’t need to try it yourself.

Advanced:

With the above foundation, you can carry out general static web page design, but further learning is needed for complex pages.

1. CSS. You must read "Mastering CSS". After reading this book, you should have a good understanding of concepts such as box model, flow, block, inline, cascading, style priority, etc. As an exercise, you can read the book "CSS Artisan", which has detailed introductions to topics such as titles, backgrounds, rounded corners, navigation bars, tables, forms, etc.

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

a) Framework.

I recommend jQuery, which is 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 be comprehensive. When you encounter problems in the future, just check the documentation. The framework can help you shield the differences between browsers, allowing you to focus more on the essence of web development learning. Supplement: You can use Codecademy to learn Javascript and jQuery. The user experience is really good (thanks to Tony Ouyang).

b) Javascript language paradigm. This 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 completely an object-oriented language. Many of its design concepts have the shadow of functional programming languages. In fact, if you don't use object-oriented, you can completely understand it as a functional programming language.

Many language features of Javascript exist because it is a functional language. For this part, it is recommended to learn the basic theory of object-oriented programming first, and understand the concepts of encapsulation, inheritance, polymorphism, etc. Wikipedia and Baidu Encyclopedia will be your helpers. I also recommend "Object Oriented Javascript", which should have a Chinese version. I don't have a systematic understanding of functional programming, so I can't say much. You can search it on Baidu.

c) Javascript language internal mechanism. You must understand the following concepts: the scope of variables in JS, the way variables are passed, the definition environment and execution environment of functions, closures, the four ways of calling functions (general functions, object methods, apply, call), and who 'this' refers to in the four calling methods. You will learn more about this part in "Javascript Language Essentials". In addition, you must understand json.

d) DOM programming, one of the core skills of a web front-end engineer. You must read "The Art of Dom Programming". In addition, the part about DOM programming in the book "High Performance Javascript" is also very good.

e) Ajax programming, which is another core technology. It is recommended to look up some information on Ajax online to understand 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 browser differences. This part includes CSS and JS. There are many browser differences. It is recommended to accumulate more in practice. In addition, the browser rendering mode, DOCTYPE and other contents should be systematically studied.

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

One step further, code level:

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

1) Easy to maintain. For the page, you should understand the separation of "style", "data", and "behavior", which of course corresponds to 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 traffic. More attention is paid to mobile terminals.

One step further: Engineering level:

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

Then what?

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 front-end development, these are the basic contents. You can selectively learn the following content according to your interests.

1. Interaction design. There are still professionals in large companies who do this, but a front-end that doesn’t understand interaction is definitely not a good front-end. I recommend "Simplicity First".

Attached is a lot of interactive self-study materials: "Interaction Designer Training Guide! Teach you to become an excellent interaction designer from scratch"

2. Backend.

It should be said that front-end engineers must know at least one back-end language, but if you are interested, you can also study it in depth. PHP should be the easiest to start with. This part can be divided into two types: page-based and framework-based. Large projects are all developed based on frameworks. It is recommended to know at least one MVC framework, such as PHP's Ci, Yii, Yaf, etc. The design ideas of the frameworks are similar. Nowadays, 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 is very broad. Native interface development is essentially front-end development. All large companies are faced with the problem of maintaining pages in both native and web environments. If the technology can be unified, it will be of great value. For students who have spare time, they should understand the basic process of native development, or at least the technology of interface construction.