Original address: github.com/ruizhengyun…

As a front-end newcomer, we often regard ourselves as rookies, mainly because the professional degree is not high, and is self-deprecating. In fact, as a rookie we also want to tear off this kind of label, we also try our best, but still bad front-end learning, is really not suitable for doing this line or wrong method, no one told us? If you feel like you’re still in the beginner’s zone, read this article and hopefully get what you want. If you have an opinion, please leave a comment in the comments section.

At the front end, we all encounter such a situation: the existing technology system is already huge, and new technologies are frequently emerging before we have learned all of them. We find that there are too many things to learn, and there is a slight tendency to be immobile. Imperceptibly lost on the road, found himself so small. Is the so-called top eye, know the big heaven and earth; Have vast, know inch body of micro.

My logic is: reality we can not change, we can master is to change their learning methods and thinking logic. We often say that all changes do not leave its root, for the front end, this root I understand is HTML + CSS + JS.

  • Build system. Existing knowledge to be a system architecture, and then the front end technology on the market points to fill in to the system architecture, regardless of how new knowledge, in this architecture, is nothing more than to supplement or complete architecture (new and modified), we have to do is constantly improve the system architecture, architecture can reference the 8 years front knowledge precipitation;
  • Deeply. Choose one of each category and plow deep.
  • Light out. With their own language will be deeply cultivated knowledge output, can be text, can sound (share);

Whether you are at the beginning, intermediate, advanced, senior, or big front end stage, the general approach to learning is basically the same, although I will point out the minor differences at each stage. The above is purely my personal opinion. If there is any supplement or correction, please feel free to comment in the comments section (i.e. after logging in on Github).

Learning methods

Code management

1. Create a repository on Github, such as HTML-note, which is only developed on the master branch

Git tag -a 0.1.0-mCopy the code

2. Use GitBook library to package small books, and then use Github built-in functions to generate online books, and then have a look at what you have learned when you have nothing to do, and then check the gaps and constantly improve; 3. Learn to write documents with Markdown syntax and develop a good habit of writing documents. I will explain why to write documents and what documents need to be written in the front end of project development in subsequent articles, which will not be expanded here; 4. The coding tool can be used in Vscode, and the whole directory can be referenced

.├ ─ package.json # Rely on ├─ Summary.md # Document Outline ├─ book.json # Little Book Configuration Information ├─ assets/Copy the code

The front-end based

HTML 5 + this

You are advised to learn this part in w3School online tutorial or MDN and practice while learning. During the learning process, please open the Chrome browser debugging tool to assist learning and debugging.

ECMAScript

This section will cover a lot of content, if you do not have the basic programming language, will be a bit of effort. It is recommended to study at W3School or MDN first.

Read one of the rhino book “javascript Language Essentials” or the Little Red Book “javascript Advanced Programming”. This time you can build the repository ecMAScript-Note.

Data structures and algorithms

In practical development, it is often inseparable from the knowledge of data structure and algorithm to interact with the interface provided by the back end and the logic processing of the front end itself, and then render the data to the page.

Front end of the primary

CSS

With the basic knowledge of CSS, you need to continue to understand

  • CSS 3 specification;
  • Precompiled languages: less or sass;

Only through this process can you discover the beauty of less. By the end of this section, you are familiar with the concepts of selectors, box models, elastic layouts, media queries, etc.

ECMAScript

  • Zepto. Js or jQuery. Js. Complete some simple projects, familiar with API;
  • Recommend small porn “JS you don’t know” on the next three volumes;
  • ES5 knowledge points, can distinguish ES5 and ES3 common knowledge points;
  • Some common ES6 knowledge points, temporarily do not recommend Ruan Yifeng teacher ES6 tutorial, too much, afraid you will be confused and into the boring zone, find some summary books (some common ES6 grammar summary) look, always want to write, no time;
  • Common concepts (also encountered in interviews). Such as variable scope, pass-through, execution context, closures, apply/call/bind, this pointing, and so on;
  • Network programming. Ajax, FETCH, WebSocket, CORS, JSONP, formData and other knowledge.

The browser

  • Commonly used cross-domain;
  • Storage mechanism;

performance

  • Common performance optimization;

security

  • Understand XSS and CSRF attacks;

Regular expression

  • Basic knowledge, videos or some documentation, official documentation is not recommended at this point;
  • Common regular expressions are written;

engineering

  • NPM common commands and simple applications;
  • Git common commands and simple applications;
  • Webpack can build an application;

React.js

For the front front three framework, we are not unfamiliar. Pick one and get the basics. I am react. js, personal preference, nothing more. Mainly learn the introduction knowledge of Chinese and English official website. Combine create-React-app scaffolding.

Node.js

  • Basic knowledge;
  • Express or KOA2 simple applications;

Note: the above learning content does not finish learning all remember, can master 70%-80% can, mainly have a preconceived concept, later encounter this kind of problem, know how to describe the problem, develop the ability to solve the problem independently.

Finally, good luck. If you have anything to add, please give your opinion according to the way the article looks. Front-end intermediate, I’ll finish it as soon as possible, don’t leave.

At the end of the article

My blog