Learn those things at the front

Today, I’m going to talk to some friends about studying. For learning to code, I think basic knowledge and programming practice are the most important. When just beginning to learn the front end, it is to learn the basic knowledge, the teaching material can rely on the school to send the teaching material can. After basic study, the most important thing is practice, you can continue to do some imitation website, and finally design their own website, etc.

Collect information exchanged in daily life:

  • No matter how good the technology is, without development experience, and product experience, it is difficult to write good code. Because writing code itself has a purpose, solving problems.
  • If in school, the learning process is very confused, because I do not know why to learn this, I do not want to do something, so I am very confused, I do not know what to learn, why to learn.
  • To understand the depth of a product, the more robust the code.
  • Learning is a shortcut to avoid all do not understand the learning materials, look for to see understand, pick up a book of information or online to find information, fineness for a few minutes, do not understand to find other information directly
  • They may not be able to understand them, they may not be able to understand them, they may not be able to understand them, they may not be able to understand them, they may not be able to understand them
  • Prioritize functionality before optimization

Do you stick to it? When you want to study, pick up the mobile phone, you will not find that you have unknowingly deviated from the right track, from the entertainment news to the front page, WeChat 99+ unread news, you want to see for a while, just to see for a while. As a result, 10 minutes, half an hour and an hour have passed before you know it. Then you start to fret, regret, and blame yourself, but the next day, you fall into the same pit.

Would you also wonder, why my self-control is so bad, why some things make me can’t, because you are addicted to it, there’s a mice to meet current can escape, but strange phenomenon happens, the rats did not escape, but again and again to self electric shock, after found that turned out to be accidentally in a wrong location, It stimulates exactly where the pleasure center is. So, you might be hooked, just like this rat.

A truth is that technology giants in social software video platform, network game elaborate one addiction of hook, the purpose is to capture more customers, get more of their time and money, we are being stimulated by an algorithm and entertainment, but a lot of people didn’t know it, so how to get rid of addictive behavior?

Is to learn about the hooks that make people addicted to the Internet:

  • A tantalizing goal that is elusive
  • You can’t resist the unpredictability of positive feedback
  • A sense of incremental progress and improvement
  • More and more difficult tasks need to be solved, but unresolved tension such as, you post something, you will secretly watch, do I have a thumb up, write an article, do I have a thumb up, do I have a comment, etc. (I’m looking forward to it!!)

In fact, you can put these hooks into learning, learning as a hobby, level up fighting monsters, and constantly improve yourself.

Your choice

You can choose your own life. You can choose a simple road, you can choose to indulge in your mobile phone, watch videos, play games, play TV series, and reap a lot of happiness effortlessly, or you can choose a more difficult road, you can choose self-discipline, you can choose to delay walking slowly, and you can choose to grow up.

What do you do with your right hand, as you decide

Learning methods

As long as you master the right method, it is only a matter of time to learn the front end and learn the front end well. Anyone can say this, but what is the right method? Xiaobian in this summary of 3 points, for reference only.

1. Clear the framework of the knowledge system

Learning front-end, whether it is entry or advanced, we must have the idea of knowledge system construction. Even if you are just beginning to learn, you must have this awareness. As mentioned above, because the front-end knowledge points are many and scattered, so if you can’t build your own understanding of the front-end knowledge system framework, it is easy to be at a loss and lose direction.

There are many brain maps on the Internet about the front-end knowledge system, but they are often too complex for beginners. As a beginner, everyone should make a brain map of their own front-end knowledge system, first have a basic framework, and then gradually improve in the process of learning.

By comparing your brain map to others, you can easily see what else you need to add to your knowledge.

Here is a simple template. In fact, as a newcomer at the beginning, such a big framework is completely sufficient. You don’t need to pursue a big and comprehensive approach, and your fear of learning will be much smaller.



Doesn’t it look much fresher?

2. Preparation and basic learning

To start to do some basic work is necessary, such as choosing a favorite editor, such as science and the Internet, such as how to effectively use the search engine, such as git, than markdon syntax, these things can dramatically improve your learning efficiency or the happiness of programming, the so-called knife and cutting wood, You can also put these things in your brain map.

Then you can start learning the basics. HTML, CSS, and JavaScript are really, really, really important. You don’t have to worry about all the fancy frameworks at the beginning. You have to get the basics right. No matter how the framework is updated and iterated, the most basic things are still these three. As long as you can master the foundation well, you have got the key to open the front-end world.

No matter where you are in the front-end, you have to be curious about the basics. There are a lot of bits and pieces, and every spec is long and long, so even if you’ve been working there for two or three years, there’s still something in there that you don’t know. Well, by this point your brain map should look something like this:



In fact, there is a pit when a lot of people go here and dive in to see the specific content, such as to see the use of attributes of various labels, to see the selector, which is a typical blind approach caused by the construction of the framework of the knowledge system.

What’s the recommended practice? In fact, it is very simple, that is, to refine the level of these knowledge points, clarify the context of each knowledge point, and have a clear understanding of the system and framework of these knowledge from a macro perspective.

Take HTML as a simple example:



In this way, the hierarchical relationship of knowledge points is abstract and clear, and each small knowledge point is reasonably classified, so that the complex knowledge points in the front-end knowledge can form a system.

Now you can go ahead and add some more details, and you can color your brain map with different priorities to prioritize and review.

3. Put what you’ve learned to work

Learned a little knowledge, every time want to find a way to put them to use, want to know the knowledge of what the scenario used, wait to learn basic knowledge to a certain extent can, in turn, think good scene in advance and to realize the function of the first, and then to think in which knowledge to use under these scenarios, if know never had problems and had not learned knowledge, Go to your brain map and figure out where it is. Write it down. Include in your subsequent study plan.

You must not keep watching and learning, but not to use in the specific situation, you should get into the habit of using what you have learned to do something to solve some problems. Keep making things, solving problems, giving yourself positive motivation, constantly improving your knowledge system, and making sure you have a sense of accomplishment.

Learning notes

A, HTML

  • H5 new features
  • Browser rendering principle analysis
  • What are the disadvantages of iframes?
  • What does Label do? How does it work?
  • How does HTML5 Form turn off autocomplete?
  • How to realize the communication between multiple tabs in the browser? (ali)
  • What uses can the Page Visibility API use?
  • It does not use the border to draw a 1px high line, in different browsers in standard mode and weird mode can be consistent.
  • Title versus H1, B versus strong, I versus em?
  • Which browsers have your pages been tested on? What are the cores of these browsers?
  • Every HTML file has a very important thing at the beginning, Doctype. Do you know what that does?
  • What are the advantages of a DIV + CSS layout over a table layout?
  • What are the similarities and differences between Alt and title of img? What are the similarities and differences between strong and em?
  • Describe the difference between SRC and href
  • Do you know which picture formats are used in web page production?

Second, the CSS

  • box-sizing
  • Horizontal and vertical centring method
  • Realize the left fixed width right adaptive effect
  • Three-column layout (center fixed with adaptive width on both sides)
  • BFC (Block Formatting Contexts
  • The methods for clearing floating elements and the pros and cons of each
  • CSS implements adaptive squares
  • The position of the value
  • How do I implement a circular clickable area on a page?
  • What about the standard CSS box model? What’s different about the box model in the lower version of IE?
  • What are the CSS selectors? Which attributes can be inherited?
  • How is the CSS priority algorithm calculated?
  • CSS3 new pseudo – class have those?
  • What are the values of display? Explain their role.
  • What are the new features of CSS3?

Three, JavaScript,

  • Js based
  • DOM related
  • BOM related
  • JS senior
  • closure
  • Prototypes and Prototype Chain
  • Scope and scope chains
  • What is the difference between apply, call and bind?
  • Talk about the understanding of this
  • Which operations cause memory leaks?
  • Implement the closure idea deeply, and fully understand the formation process of JS closure
  • Here’s ul, how do I alert its index when I click on each column? (closures)
  • Js inheritance mode and its advantages and disadvantages
  • Context object

Four, front-end framework

1.jQuery

  • What object does the init method return from jQuery.fn refer to? Why return this?
  • How to convert an array to a JSON string in jQuery and back again?
  • How does jQuery implement extend and how does it implement deep copy?
  • How does jquery.extend differ from jquery.fn. Extend?
  • Optimization for jQuery?
  • JQuery An object can bind multiple events at the same time. How does this work?
  • Bind (), live(), delegate()
  • What are the common arguments to $.ajax() in the jQuery framework? Write a POST request with examples of sending and returning data
  • JQuery An object can bind multiple events at the same time. How does this work?
  • How to convert an array to a JSON string in jQuery and back again?
  • What is the difference between jQuery and jQuery UI?
  • What’s the difference between jQuery and Zepto? What are their usage scenarios?
  • How to solve Zepto’s point penetration problem? 2.angular 3.react 4.vue

5. Extensibility

  • Career Planning & Future Expectations
  • How does page refactoring work?
  • What are the features that make IE different from other browsers?
  • What is graceful degradation and progressive enhancement?
  • Knowledge of public and private key encryption.
  • What are the ways in which WEB applications can actively push Data from the server to the client?
  • What front-end performance optimizations have you used?
  • What happens between the time a page enters the URL and the time the page is loaded and displayed? (The more detailed the process, the better)
  • How do you understand the position of front-end engineer? What are its prospects?
  • How do you manage your projects?
  • Front-end learning site recommendation

  • What are the most commonly used libraries? Common front-end development tools? What applications or components have you developed?



    The space is limited because the interview questions only list part of the interview, you need a full version of the front end of the interview learning notes of the partnersPlease click here to get it directly

Conclusion: How to keep learning?

  • If you play games, give it up or quit for a while until you find a good job.
  • Find your pain points.
  • Study in chunks and make a plan that fits the cycle. Don’t push yourself, or the stress will break you down.
  • Get some chicken soup, or find something you don’t have but crave.
  • In terms of business, read more books, summarize and accumulate more ways of thinking.

At last the Soul asked:

  • Is it your dream to enter Dachang? You know, it’s a small price to pay.
  • Are you the genius of a million? If not, then it’s normal to fail a few times, everyone is normal, maybe just don’t match.