Learning route for beginners to master the front-end

Front-end development engineer is a very new profession. It really started to receive attention domestically and even internationally in 2005. It refers to the abbreviation of Web front-end development engineer. Web front-end development evolved from art, and the name has obvious characteristics of the times. In the evolution of the Internet, in the Web 1.0 era, the main content of the website was static, and users' behavior when using the website was mainly browsing. With the further development of the Internet, front-end development engineers have become a very sought-after talent in the market. Many students, including those who used to do UI, Java, or have no basic knowledge of IT, want to learn front-end. The picture below is a front-end learning mind map that is widely circulated on the Internet. Many beginners said that they were dizzy after seeing these dense knowledge points. Indeed, front-end is a broad subject. But if you want to learn front-end, don’t panic. Although there is a lot of content, there are traces to follow. As long as you take it step by step, you don’t have to worry about not being able to learn front-end!

So what do you need to learn about front-end development? How should I learn? Next, the editor will teach you how to learn front-end from scratch.

1. Getting Started with Front-End Development

In the entry stage, you must first learn the most basic skills: creating HTML static pages based on the UI design draft. This requires you to master HTML, CSS page layout, style beautification and other skills.

At this stage you need to learn:

1. HTML+CSS basics
Master the use of HTML tags, typesetting skills, CSS layout positioning, style beautification, and browser compatibility.
2. JavaScript Basics
Master the basic syntax, conditions, statements, loops, etc. of JS, learn common algorithms, and enhance logic.
3. Commonly used front-end tools
such as Webstrom, Sublime, Dreamweaver, etc. Mastering its shortcut key settings and other skills can quickly improve development and debugging efficiency.
The learning difficulty at this stage is relatively low. After learning this, we can already complete the production of static pages. Of course, this is just an introduction. If you want to use these skills to find a job, it will still be difficult.

2. Junior front-end development

In the next stage, our goal is to meet the basic requirements of the front-end development industry and give ourselves the confidence to go out and find a job. A job with a monthly salary of more than 8,000!

At this stage we must focus on mastering these two aspects:
1. Use jQuery, Bootstrap and other frameworks to develop complex interactive functions and effects;
2. Use HTML5, CSS3, Canvas for mobile end development.
For the first aspect of ability, you need to learn:
1. Basic JavaScript special effects
Be able to realize common web page special effects such as image carousel, drag and drop, and magnifying glass.
2. jQuery Basics
Master how to use jQuery’s common APIs, and be familiar with jQuery’s plug-in development mechanism.
3. Bootstrap responsiveness
Master the native responsive implementation mechanism and be able to use the grid layout and responsive layout in Bootstrap to develop complex page layouts.
4. AJAX Basics
Fully understand the principles of AJAX and master the use of AJAX in JS native and jQuery methods.
5. Popular UI framework
Master the use of jQueryUI to quickly and efficiently achieve the effect of page presentation.
After learning these skills, you will be able to independently create e-commerce and enterprise websites, achieve common JS dynamic effects, and achieve cool effects and complex functions based on jQuery, Bootstrap and other frameworks!
For the second aspect of mobile terminal development, you need to learn:
1. New features of HTML5 and CSS3
Master the skills of using HTML5 and CSS3 on the mobile terminal.
2. Canvas Basics
Master the basic drawing API of Canvas, so that you can realize the application of Canvas in reports and advertising display effects, and achieve cool display effects.
3. Mobile Web Framework
can develop mobile JS functions based on jQuery Mobile/Zepto and other frameworks.
Master these two skills, and you will be able to meet the basic requirements for front-end engineers in the market. According to market feedback data, the salary is generally 8,000-13,000 yuan/month, so hurry up and study!

3. Advanced front-end development

You will know that you are a person with ideals and ambitions and will not be satisfied with being a junior front-end development engineer. In the next stage, we will embark on the path of advancement in front-end development and raise our capabilities to another level. Likewise, the salary will also go up a level!

However, if you are a front-end novice, there may be some knowledge points that you have not used or heard of in the following article. Don't worry, you can save the article first and understand it later.

Getting back to the subject, at this stage, we must focus on mastering the following two aspects:

1. While implementing functions, consider the elegance of the code and focus on the performance and reusability of the code. ;
2. Have an in-depth understanding of the implementation principles of front-end frameworks, and be able to develop and reconstruct common front-end components.

At this stage you need to learn the following knowledge:

1. Object-oriented development thinking
2. JavaScript object-oriented
3. JavaScript closures, scope chain, prototype chain and other advanced features
4. Commonly used design patterns
5. Use Principle of native JavaScript implementation framework encapsulation
6, jQuery framework encapsulation principle
7, jQuery plug-in implementation principle
Master the implementation principle of jQuery plug-in, and deeply understand the implementation mechanism of the two extension methods of plug-in.
8. Component-based and modular development: SeaJS, RequireJS
If you are proficient in the above skills, you will have the ability to solve complex problems and technical difficulties, and be able to independently design and develop complex functional modules. If you reach this level, congratulations, you can meet the intermediate needs of the front-end industry. According to market feedback data, the salary is generally 13,000-20,000 yuan/month!

4. Senior Front-end Development

Writing this, even the editor is excited, because in the next stage, our goal is: to become a full-stack development engineer ! Full-stack development engineers are the kind of experts who are proficient in both front-end and back-end, and can quickly locate and solve problems when encountering them! According to statistics from Zhiyouji, the monthly salary of full-stack development engineers in Beijing is as high as 60% between 20K-50K, and there is a very shortage of talents!

To be promoted to a full-stack development engineer, we have to do the following things at this stage:

1. Be able to understand the principles and implementation patterns of popular frameworks from a global front-end perspective;
2 , have a deep understanding of the development model and technology selection of mobile apps;
3. Be familiar with the full-stack solution of Node.js;
4. Understand the mainstream back-end technology and front-end and back-end collaboration methods, and be able to understand it from a global perspective The entire life cycle of the project.

Correspondingly, you need to learn the following content:

1. Web development workflow framework: Yeoman/Grunt/Gulp/Bower, etc.
Master the popular front-end workflow tools, you can Make front-end development more convenient and efficient!
2. MVC/MVVM framework: AngularJS, etc.
Master the front-end MVC/MVVM framework implementation mechanism, deeply understand the MVC development model through the practice of AngularJS, and understand two-way data binding and other related concepts.
3. HTML5 responsive framework
4. Popular UI frameworks: jQueryUI, EasyUI, ExtJS, etc.
Master the encapsulation principles of common UI frameworks, and through source code analysis, deeply understand the idea of ​​component development.
5. Ionic, Angular
Master the mobile hybrid development model, and understand the overall process and implementation mechanism of App development using HTML5, CSS3, and JS through the combination of Ionic and Angular.
6. React Native
Master the development model of ReactNative on the mobile terminal.
7, HTML5 Plus
8, Node.js full-stack development

It can be seen that if you want to make front-end development better and more professional, it is really not easy. This is the characteristic of front-end development, and it is also the reason why many people are confused. Such a complicated knowledge system makes it difficult for novices to start learning, and for veterans, they often don’t know what to learn next. So I hope the above front-end learning route can help everyone.

Related recommendations:

Requirements for self-study PHP from scratch

The growth path of PHP programmers

HTML5 learning route analysis

2017 Web developer learning roadmap detailed explanation

web front-end learning route: how to start from Learn DIV+CSS from scratch