2022 front end detailed learning route

Time:2022-4-15

Recently, in the front-end of self-study, I asked my friends and the information I saw online. I summarized it for reference only

Phase I

HTML5 + CSS3
Video peppa pig, everyone directly looks at pink teacher (black horse programmer) of B station, unexpected winner of pink teacher yyds, who can refuse to learn the teacher of piggy page? After each knowledge point in the video is finished, there is a small case. Follow the practice with vs code. Finally, all the knowledge points are finished. There is a large project of pinyougou static web page. After completing this project, I think the first stage is OK. It doesn’t matter if you can’t remember too many CSS tags. You can remember them if you often use them later.
In addition to video learning, MDN (recommended), W3C, rookie tutorials and other tool websites are also essential in our programmers’ learning and development.

Phase II

Basic Javascript + Advanced + ES6
The foundation of JavaScript still depends on Mr. pink, which includes the operation of JavaScript foundation + Dom and BOM + Ajax (jQuery + bootstrap can not be seen). It is not recommended to learn jQuery, because this technology is too old for new projects, and the things made after learning can not adapt to the current Web development. If you really want to learn, take a day or two to have a look and don’t spend too much time.
Advanced course is the advanced course of JavaScript in shangsilicon valley of station B.
For ES6, Ruan Yifeng’s ECMAScript 6 tutorial (ES6 is a subset of JS) is recommended. The ES6 syntax used by Vue framework, such as arrow function and this pointing to the problem, can’t understand the code without reading these. Then take a look at node and know how to build the environment and NPM I
In addition to videos, JavaScript related learning websites, such as mdnjs, JavaScript 30, etc

Phase III

Vue + react framework
Vue (3.0): if you have information, I recommend you to watch the full set of vue2 + vue3 videos of shangsilicon valley. In addition to videos, Vue’s official documents also need to be read repeatedly. After learning the basic knowledge of Vue, you can follow the Vue project video of Shang Silicon Valley to knock out a project. It is recommended for beginners to learn Vue first, because it is written by Chinese and is a progressive framework, which is relatively simple to use. Video + official document Vue js

React: this year’s No. 1 framework is used by many companies, but it is more difficult than Vue. Be more patient and master at least one framework. You can learn the framework while doing the project, and get familiar with it faster.

Phase IV

Do project
GitHub looks for a high-quality front-end project and learns to develop it by itself. Complete the foundation, and check and fill the gaps according to their own learning needs, such as network planning, data structure algorithm, database, webpack and nodejs. I skipped the mobile terminal above, because they are connected and have enough time to see. Finally, leetcode brush questions, brush more questions and recite eight strands!