Front end learning route (front end zero basis)


Hello! I’m a programmer, rice noodles. At present, I am engaged in full stack development in a listed company of the world’s top 500. I once served as the leader of the front-end group of more than 10 people. I like to share various front-end technologies and have been helped before, so I will also inherit this spirit of helping others.


Today, let’s talk about the growth of front-end programmers, what front-end technologies to learn, how to learn, how to be independent from a white house. The development of the front-end has started since I just graduated. As long as I can point to HTML, CSS, JavaScript and jQuery, there are many companies
Grab to, even the front-end development post, also need to be able to point to PS design. I used to design and develop my own pages, and I also developed them with PHP. But now it’s much better. You don’t need to design and use it yourself, but the front-end technology has developed rapidly
Soon, there are many knowledge points. With the development of the Internet, the front-end focuses more on development. At present, the mainstream is Vue family bucket, react family bucket, node technology stack, etc.

In the face of various technologies on the market, how should Xiaobai, a front-end programmer, learn the route? People are always afraid, confused and anxious about things they don’t know. You can rest assured here. Let’s talk about it with you today, in short, so as not to take more wrongs.

Phase I basic introduction

  1. Learn HTML5 and CSS3
    At this stage, it’s still relatively easy. Go online and have a look at a preliminary tutorial. Write all the relevant knowledge and examples of HTML5 and CSS3. What stage can you pass? That is, you can complete a PC page independently.
  • Complete the static cut of an enterprise website independently. For example: static cut of hao123 page. At this time, remember to practice more, practice makes perfect
  • Completing an e-commerce station independently can enable students to master the development process and layout standards of more complex web page effects, and achieve 100% reduction of the design draft.
  • Learn to deal with the compatibility problems of relevant browser page development. This is more annoying. Just spend more time.
  1. Web mobile terminal development (mobile H5)
    At this stage, we mainly study the static cut-off of the mobile terminal, complete it independently, restore the design draft as much as possible, and use font icons, plane conversion, animation, etc. to enrich the effect and presentation of the web page; Complete the mobile terminal and multi terminal adaptation effect.

Advanced technology in the second stage

After the first stage, we have mastered HTML5 and CSS3, which can independently complete the cut-off of all enterprise stations, complex e-commerce websites, multi terminal mobile pages, etc. and static pages on the market.

The advanced stage of this technology is to enable these static cut-off development to move. Realize web page data interaction and animation effect, and realize the connection with back-end data. Then you need to learn the core content javascript:

JavaScript zero basic learning

To be honest, this stage is a very hard stage when I haven’t been in contact with programming. As a little white, I have no programming experience, because our major is not computer. So at that time, it was a bit of a headache to study and self-study, but it doesn’t matter. Just stick to it.
At this time, you need to master the basic skills of JavaScript, such as the definition and use of variables, data types and mutual conversion, operators, process control statements, ternary operators, arrays, functions, constructors, built-in objects and objects.

JavaScript core API

At this time, you need to master the operations related to the browser technology, complete the development tasks according to the product requirements, such as visual effects (animation, interaction, etc.), data processing, security, performance, etc., master the DOM operation methods, be able to analyze the visual interaction requirements, design a reasonable DOM structure in combination with CSS rules, and complete the development tasks.

Ajax learning and back-end data interaction & asynchronous programming

You’ve almost started at this stage. At this stage, we need to master the principle of Ajax and learn how to interact with back-end data; Learn to deal with common technologies such as browser cross domain, jsonp, template engine, throttling and anti shake.
It’s fairly easy here. I’ll be able to master it soon.

The third stage Vue development

Congratulations. You have mastered the core knowledge of HTML5, CSS3 and JavaScript front-end. Become a complete entry-level front-end development. However, if you want to be able to do projects in the company, you need to learn more simply. Compared with the previous content, it is a little simpler.

Node. JS Foundation

Why do we talk about node here JS, because the basic node JS is the mainstream front-end framework at present, including react, Vue and angular pre knowledge. The focus is to pave the main knowledge points such as NPM, package, modularization, identity authentication and CORS cross domain, so as to lay a solid foundation for learning the following react, Vue and angular courses. At the same time, I learned MySQL database, API interface project development and other back-end contents by the way, which broadened my knowledge and built a complete knowledge system at the front and back ends for better development.


Here we need to learn about vue2 / vue3. One of the most popular frameworks in China is the technology stack owned by large, medium and small factories. As long as you learn this one, you can find a good job. Here we need to learn the grammar of Vue, which is relatively simple. Here you need to master Vue knowledge, including MVVM ideas, template syntax
Calculate attribute and listener, class and style binding, condition / list rendering, event processing, component development, vuex (state management), hooks, router, etc.

After learning this, you go out to work and have no problem at all. You can complete a core project.

Phase IV react

React technology stack is used by many large manufacturers, including bat, meituan, JD, pinduoduo, etc. Now that you have learned Vue and can be competent for any project, why learn this technology stack? In fact, I thought so at the beginning. After learning so much, I’m very tired, but the market is like this. You don’t learn from many people. After learning, you can expand your knowledge and improve your competitiveness. When you really learn it, you’ll find it delicious!

React development

Here, you need to master the technologies of react scaffold, JSX, function components, class components, controlled components, component communication, context, component life cycle, high-level components, hooks, Redux and so on. After learning so much, make a todolist (why choose it? Because this little thing includes adding, deleting, modifying and checking, and operations needed for daily work), or practice with a small project.

Typescript (this depends on your choice)

Typescript originated in large projects developed using JavaScript. Due to the limitations of JavaScript language itself, it is difficult to be competent and maintain large-scale project development. Therefore, Microsoft has developed typescript, which makes it competent to develop large-scale projects. There are many things we need to learn here,
It was painful at the beginning, but mastering it can really improve the development efficiency and reduce bugs. After mastering the basic knowledge and advanced knowledge points, it can be used in combination with vue3 and react.

Wechat applet

You’ve all learned about the development of small programs here. As long as you read the documents, you can master the introduction of a small program in a few days. Here you need to master the basic knowledge points, such as small program account registration, development environment construction, basic syntax, routing and navigation, data request, subcontracting, componentization and so on.
After learning, learn again. Uni app technology realizes the development of wechat applet, which can be developed at one time and deployed at multiple ends.

General details of phase V learning route

Well, you have mastered the common front-end knowledge points. The above is just a general situation. If you really want to be very detailed. Here is a diagram:

Front end learning route (front end zero basis)


So I hope this article will help you. If there are any mistakes in the article, please correct them in the comment area. If this article helps you,

You are welcome to praise and pay attention, and you will output better sharing in the future.