Xiaolu used the fragmented time of the past few days to organize a front-end self-learning development route suitable for most developers for all "girlfriends" present.
Whether you are a non-disciplinary class, a college student in school, or a developer in other fields, I hope this development route can better help you establish a front-end development knowledge system.
In this article, I will use my front-end self-learning experience from zero to learn what content should be learned at each learning stage of the front-end, and what is the minimum requirement to master at each stage, and how the entire knowledge system learns cyclically and progressively and breaks through the hierarchical Share with the big guys~
Entry stage
The main content of the introductory stage is HTML and CSS.
For a beginner, when you first come into contact with the front end, you should first establish a shallow understanding of the front end and know what the front end is used for. Of course it is a web page. The best way is to build your first page through HTML and CSS, also to better build your confidence and interest in front-end learning.
The learning of HTML is as follows:
There are many HTML editors on the market, such as VSCode, Hbuilder, SublimeText3, Atom, etc. Anyway, there are many, so you can choose one you like.
Then learn the most basic elements, attributes, headers, tables, lists, links, images, forms, paragraphs, headings, etc. of HTML. Energetic students can learn some basic knowledge in HTML5, such as semantic tags.
After having a general understanding of the above basic content, I began to learn CSS, starting with the syntax of CSS, as well as box models, selectors, floats, positioning, fonts, text, basic attributes, and various layouts.
Recommended websites : Cainiao Tutorial, Geek Academy, MOOC, etc.
The above is relative to the very basic content, the main purpose is to build up your enthusiasm and confidence in front-end learning and have a general knowledge and understanding of front-end web pages.
Capable students can learn the content of the CSS part of the mind map. This part is the most frequent knowledge points I have summarized in interviews large and small.
What level of learning HTML and CSS is considered qualified, such as giving you a website, you can quickly imitate exactly the same layout and typesetting.
Xiaolu prepared ten actual combat projects for everyone, and replied in the background of Xiaolu's official account: "Actual Combat One" ~ "Actual Combat Ten" .
If these ten actual combat projects can be completed completely, then congratulations, from Xiaobai to the front-end entry.
Recommended books : "CSS World", "CSS Revealed", "Head First HTML and CSS (2nd Edition)" "CSS Definitive Guide (3rd Edition)"
Advanced stage
In the advanced stage, start to attack JS. For beginners who are new to JS, it is indeed more difficult than learning HTML and CSS, but as long as you are willing to work hard, this part is not a big problem for you.
There are many knowledge points involved in JS content. Many people on the Internet suggest that you hold the "JavaScript Advanced Programming" from start to finish. Xiaolu does not recommend it. After all, whoever is new to JS can read it. I can't and I didn't do that.
The learning technique for this part is to increase the frequency and reduce the content of a single viewing. That is to say, for the first time to learn JS, take a look at it, take a look at it, go to the video and website to learn, it is not recommended to read the book directly. Because when you can't read it, it hurts your confidence in learning.
Then, through some small examples of the website, I started to type the code by hand. We must practice, practice, and practice. This time, it is to better familiarize with the JS syntax. Don't just look at the knowledge points back and forth. It's not a good habit to have good eyes and low hands. I have suffered here, you know.
1、
JavaScript and ES6
In this process, you will find that there are a lot of JS knowledge points and you cannot better understand why this design is designed and what are the benefits of such a design. This forces you to learn the ins and outs of this single knowledge point, where to learn it? First, books, I know you don't like to read them, so I have to prepare them for you.
I sorted out the ins and outs of every important basic knowledge point in JS, and wrote it into a booklet, which can be obtained for free by replying to the "front end" in the backstage of the Xiaolu official account. Secretly tell you, this is also the knowledge points that you will often interview in various factories in the future. This is also a summary of my participation in many interviews.
In fact, learning JS is far from enough. If you want to really learn JS, you still can't escape Ruby "JavaScript Advanced Programming". Every time you read it, I believe you will have different gains.
Recommended books: "JavaScript Advanced Programming", "JavaScript You Don't Know", "JavaScript DOM Programming Art (2nd Edition)", "High Performance JavaScript"
Let’s start working on ES6. ES6 recommends the tutorial written by teacher Ruan Yifeng, which is very detailed. For some common interview knowledge points of ES6, I have also sorted them out for everyone, and they are all in the "Front-end Interview Booklet" I wrote.
Book recommendation: "Introduction to ES6 Standards (3rd Edition)" "In-depth understanding of ES6"
2、
Data Structures and Algorithms
I heard many people say that the front-end does not need to learn algorithms, and it is useless to learn. You must not listen. You will suffer at the interview. Algorithms really sometimes determine whether you can enter a good company.
Learning data structures and algorithms is really painful, but this is also a stumbling block for future interviews. Whoever can experience this pain can enjoy treatment that others cannot enjoy.
As for how to learn data structure, the following article will share my learning method.
How do I learn data structures and algorithms?
For algorithmic problem solving, Xiaolu is a classified problem. First of all, the classic problem type on "Sword Finger Offer" is now, as if every one is a classic problem type, it must be clear and clear.
Then classify and brush the questions on the leetcode, for example, brush the content of the binary tree first, and then summarize the routines and ways of these question types by brushing the questions. And there are multiple solutions to a problem, and the time and space complexity of each solution. These are all trained through a lot of brushing questions. There is no particularly good technique, just brush! brush! brush! At that time, I brushed about 200, which is really not too many for many algorithm experts, but fortunately, interviews will encounter many original questions.
3、
Network principle
Network principles are not only frequently asked in interviews, but also used in daily development, such as performance optimization, proxies, caching, encryption algorithms, and so on.
If you want to master this part of the content systematically, it is really not easy. The above knowledge points are
far from enough. There is still a long way to go. For interviews, mastering the above is
not a big problem. Of course, the more you master, of course The better.
4、
Browser
As a front-end, you will often deal with the browser, even if you pretend not to know it, it will come to you every day, so I advise you to understand the implementation principle of the browser.
Speaking of browsers, let’s study the implementation principle of Google V8 engine. I believe you will have a great gain. This part of the mind map and learning route are being sorted out. After sorting out, they will be successively shared on the public account. come out.
There are also a lot of pits in the browser, which is enough for you to toss for a while. Recently, I have been dealing with the browser and I have deeply experienced the power of the browser.
5、
Front-end framework
There are too many front-end frameworks. I really can’t learn it. Don’t panic. In fact, for the three front-end carriages, Angular, React, and Vue, as long as you understand one of the frameworks and implement the underlying principles, you won’t learn the other two very well. It’s hard work. It also depends on which framework you’re working for in the future. Of course, the more you will, the better, but often everyone’s time is limited. For self-taught students or those who are about to interview for a job , Of course, we must choose a framework to dig deep.
Taking Vue as an example, I organized the following knowledge system.
Regarding the use of the framework, whether you watch the video or the official documentation, the most important thing is the implementation principle of the above Vue. You need to understand and explore the system systematically, which will give you a deeper understanding and understanding of the implementation of the entire framework. .
6、
Webpack
For packaging tools, I mainly organized the knowledge system of Webpack.
Our ultimate goal is to minimize the size of the project package and achieve the fastest construction speed. For packaging tools, there is not much to emphasize, the principle content has also been sorted out for everyone, and you can get it at the end of the article.
Advanced advanced
After you work, you find that most of the problems are code architecture and maintenance and scalability issues, and then you know the importance of design patterns.
The reason why I attribute it to advanced advanced is that it can really use design patterns flexibly, and it really requires a lot of project practice and thinking summaries.
Secondly, there are some things that are more low-level, such as compilation principles. I don't have too much contact, so I won't say more nonsense here. When it comes to it later, I will share with you.
At last
Okay, this is the front-end learning system from entry to abandonment. There are still a lot of things that have not been sorted out. Xiaolu can be considered to be sorting while learning, and it will be gradually improved in the future. I believe this will be enough for you to learn for a while, hahaha .
In the above knowledge system, many knowledge points have been updated in historical articles and can be viewed through the menu bar.
The mind map and "front-end brochure" designed in the article can all be replied to "PDF" and "Mind Map" in the backstage of Xiaolu's public account "Fawn Animation Programming" to get the pictures and booklets in the article.
See you next time!