1. Front-end learning path planning
The following is a learning circuit diagram. In fact, there are still many technical maps that are not involved. For beginners, it is already very good to be able to master the above knowledge points.
Zero foundation from the front-end entry to the front-end development engineer route
2. Three questions before entering the pit
If you want to enter the front-end pit, you must first be mentally prepared. These are the three questions I often ask my students when I teach them. First, are you sure you will be the front-end within the next three years? Second, are you really interested in the front-end or did you study the front-end just to find a job after graduation? Third, no matter what difficulties you encounter, can you really stick to it?
These three questions are very necessary. With these three questions, you will definitely be able to determine your direction. If the first two questions are implemented, the last question sometimes encounters problems that cannot be solved for people who will give up halfway. I think this front-end is really true. It's difficult, let's learn python. In fact, you will still have this kind of psychology when you arrive at python. Therefore, it is reasonable to say that the goal must be firm, the boat must be firm, and the boat will go the right way.
3. Start with the simplest HTML and CSS
Before talking about HTML and CSS, let me talk about a misunderstanding that many people think. When someone asks you what programming language you are familiar with, someone replied that I am familiar with HTML + CSS. At this time, someone smiled and said that HTML and CSS are not programming languages, but markup languages, not the same as programming languages like Java and JavaScript. How to understand? Marking is the use of tags to represent the elements of the page. It does not involve abstract things such as object-oriented. It is a simple and easy-to-understand way of understanding.
One of the most common words we hear from others is that the front end is too simple, and fools will see it. Yes, the front end entry is to draw a gourd. How to say,
This tag represents an element of a page. Well, you remember, you can use it directly next time. It's that simple. There are still many tags that are learned in this way, and you will remember them as you use them.
For CSS, it is equivalent to style. What style? For example, if we send a courier to a friend, for example, if we want to send a glass gift, it may be broken during transportation when it is directly placed in the courier box. Therefore, the inner wall of the box is stuffed with a soft cushion to prevent it from being broken by contact with the inner wall. If HTML is a box and glass gift, then CSS is a soft cushion that handles the glass and the inner wall of the box. If I want to wrap the gift more beautifully and add a bow, this is all handled by CSS, so I can call CSS a "dresser". Call HTML "Builder".
So to what extent is our HTML and CSS appropriate? Just give you a website on the Internet, if you can build a static page through DIV + CSS, then your HTML + CSS is considered qualified. If you let me give you a detailed study method,
I am an old web front-end programmer who has been engaged in development for many years. Some time ago, I spent a month sorting out a web front-end learning dry product that is most suitable for learning. Various frameworks are organized and sent to every front-end small Partners, if you want to get it, you can add the following QQ group to get it for free.
Fourth, how to learn by yourself to thoroughly understand JavaScript
Speaking of JavaScript, everyone is no stranger to it. This language is very powerful, and it can accomplish anything you can't think of. Doing PC page interaction, WeChat applet, mobile terminal, background Node.js, web crawler, official account development, you may be surprised, I don’t know that js can do so many things, because beginners learned what they learned at the beginning So we don't know the power of JS. Since it is so powerful, then we will analyze how to grasp its lifeblood in a short period of time, and then integrate it all in one go.
No matter you learn programming, you can't get away with learning object-oriented programming. After so many years of programming, to be honest, you have just grasped the essence of programming.
Let me talk about object-oriented first, only need to understand three concepts (object, class, instance). I want to open the article friends, maybe you have already worked, or maybe you are a student, object-oriented may not be simpler for you. But do you understand the mystery. Object-oriented, first know what an object is, girlfriend? No, you are crazy about being single. They all say "everything is an object". At first, it seemed that this sentence was understood at such a shallow level, but after thinking about it, everything, the so-called things that exist in the world, can be used as objects. What you see and what you hear , You smell everything. Do you understand everything this way?
So what is a class? This is easy to understand. It is actually an abstraction, but I still don't understand it very well. It is clear to classify items, so understand it like this. The so-called "instances" are individuals in the classification, such as apples, bananas, and oranges in the fruit category are all "instances." You will find that after you have studied programming for a few years, object-oriented is as simple as that. Yes, it is so simple in nature. It just adds some new features, such as encapsulation, polymorphism, and inheritance. This is also easy to understand, the so-called Inheritance is like a son inheriting his father's property. If the father has something, the son will inherit it and spend his father's money. Object-oriented thinking is also like this. Don't think about it too complicated. It's just an abstraction of things that exist in reality, which also makes it difficult for beginners to understand.
Then JS is over, are you kidding me? I'm not teasing you, I understand object-oriented, and I'm finished learning JS. That's right, follow Xiaolu to continue to say that JS is a weakly typed language. It doesn't want to be like a strong type like Java. There are many pits buried in it. For example:
4.1 Create an empty object
JS has two basic types, object type and primitive type. Primitive types are string types, boolean types, and the like. The rest are object types. Even functions are called objects, so study JS well. The heavy object is the first step in learning JS.
4.2 Expand the empty object
Expand the object and see what properties the object has. Unexpectedly, a proto property is found. This property points to the "prototype object". It doesn't matter if you don't understand the prototype, this is its "daddy".
4.3 Its "dad" and
his "dad" are also an object, and there are many "properties" (attributes) in it, so "sons and grandchildren" can share these properties. Since its "dad" is the object, there must be "grandfather" and "ancestor". You can follow the proto and so on to connect its entire family. This chain is the "type chain".
Understand this relationship, so learning JS is really no longer a problem. Many of the so-called methods of JS are actually the property (attributes) of "dad", "grandfather", and "ancestor". Yes, that's right, all the commonly used JS methods such as toString, valueOf, etc. are on this family prototype chain. If you know the DOM node object, the relationship is the same, the child inherits the parent, and then calls the parent's method, wow, this is not difficult for you. Speaking in such detail, do you still think JS is difficult? Give you two weeks, you will have mastered the skills of learning JS.
Book recommendation, go and honestly finish "JavaScript Advanced Programming" This is the most basic book of introductory JS. (Be sure to finish the study honestly) You will benefit a lot from studying multiple times.
There is also a more comprehensive book. This book is mainly used for learning as a dictionary. The knowledge points involved in it are particularly comprehensive, and that is the "Authoritative Guide", which can be said to be a great artifact of the front end.
5. What the hell is ES6?
If there are JS, HTML, and CSS on the front end, how come out ES6? Nani! I'm too hard, don't torture me anymore, I have learned enough.
Well, ES5 (ECMAScript5) is a standard of Javascript, which can be understood as a standard of JavaScript. What JS does must comply with the ES5 standard, so ES6 is undoubtedly an upgraded version of the ES5 standard with many additions. Specification of JavaScript usage.
5.1 How to learn ES6?
A lot of ES6 is "evolved" from ES5. Effectively learning ES6 is not just watching videos and using it, but learning about it. How to understand it?
First of all, the knowledge points of ES6 basically solve some shortcomings in ES5. 1. What is the reason for the so-called ES6 knowledge points? 2. Why should it be replaced? 3. In which direction do you want to develop in the future? Then you have basically no problem learning ES6.
5.2 Give an example
Asynchronous programming in JS was initially solved with the callback function in ES5, but the callback function has great disadvantages, such as the dependency between multiple AJAX requests, and the callback hell problem with the callback function, then how does ES6 solve this problem What? Promise and Genertor are out, you may not know what these two are, but the problem he wants to solve is to solve the callback hell problem of the callback function. How to solve it involves how to use Promise and the principle of Promise. No, a point of knowledge runs through, it's that simple.
The third question, what direction is JS asynchronous programming heading? In fact, to put it bluntly, I want to write asynchronous code that is difficult to write. It is as simple as synchronous code. For example: ES7 comes out with async and awite. In fact, if you understand the principle, it is a syntactic sugar form of promise and generator in ES6. I can’t use it, but if you understand the principle, it’s not a problem to learn now and use it now. It’s not as easy as I said, and it’s easier to learn than I said. These are all four months I spent from learning the front-end from zero to getting it. I am satisfied with the summary experience of the offer and the deep pits I have entered, without adding oil and vinegar, all of which are authentic.
There are a lot of front-end things involved. These three are the most frequently tested in the exam and the deepest tested, so these three technologies are emphasized. Then you will find that I have learned and understood, but the interview is incorrect and the answer is not up. I clearly know it in my heart, which leads to diminishing self-confidence in every interview. The following is the deer's nirvana, how to prepare for the interview based on the knowledge points?
6. How to prepare for the interview?
The front-end knowledge point system is huge, most of which are fragmentary knowledge points. It took me a month to organize it a few days ago. However, if I want to master these huge front-end knowledge systems this month, then I will follow the "nirvana" I summarized. —— Front-end knowledge tree.
First of all, we have to imagine the front end as a tree. All the front-end knowledge points we have learned are the leaves and branches of the tree. The process of continuously learning the front-end is the process of continuously mounting leaves on our tree. We can use the tree Roots connect the huge front-end knowledge system. Whatever the interviewer asks you, you can talk from the root to the branches to the leaves, from the leaves to the roots, lying and asking, standing, and squatting, whatever you want How do you ask me about my knowledge, I will expand it for you, and may also lead the interviewer to run on our knowledge tree. On this tree, it is your world.
As always, as an example, every piece of knowledge will be gathered into a branch, and each branch is of a different classification. For example, in the figure below, all the JS prototypes and fragmentary knowledge points of the prototype chain are summarized as a branch.
We categorize trivial knowledge points into branches, and when there are more branches, we gather together into a main branch.
For example: How many key content is divided into JS? We think of prototypes, closures, this context... Then the interviewer asks you what a closure is, and then your mind jumps to the branch with the closure to answer the summary closure questions.
One thing to note is that the current branches and branches are connected by the main branch. We need to create the necessary connections between the branches. In this way, you will bring the interviewer to this huge front-end knowledge tree. I don’t believe it doesn’t give you an offer if you go to travel, can you go to someone else’s house if you don’t get your offer? I don't believe it, hahaha!
Every interview is a process of mounting and perfecting the branches. Although you may not get you in one or two interviews, but your knowledge system is improved, it means that the chance of getting an offer next time is higher. Don’t think that BAT is difficult. If you have enough time to specialize in one subject, BAT is a small K to you. I’m not kidding. I talked to a Huawei lecturer before. That’s what he said, and This learning method has been recognized by him, so follow this method to follow the dream of BAT. Sooner or later, you will realize your dream.