What is better to learn at the front end?

Here, I have compiled a systematic and comprehensive web front-end learning route. Need to learn the following contents, hoping to help friends avoid detours.

The first stage: professional core foundation

Stage objectives:

1. Proficient in HTML5, CSS3, Less, Sass, response book typesetting and mobile terminal development.

2. skillfully use HTML+CSS features to complete the page layout.

4. Skillfully apply CSS3 technology, animation and elastic box model design.

5. Skillfully complete the design of mobile phone pages.

6. Proficiently use what you have learned to imitate any website.

7. Be able to comprehensively apply the knowledge learned to complete the actual combat of web design.

Knowledge points:

1, Web front-end development environment, HTML common tags, form elements, table layout, CSS style sheet, DIV+CSS layout. Skillfully use HTML and CSS style attributes to complete page layout and beautification, which can imitate the front-end page implementation of any website.

2.CSS3 selector, pseudo-class, transition, transformation, animation, font icon, elastic box model, responsive layout and mobile terminal. Skillfully use CSS3 to develop web pages, skillfully develop mobile terminals, and organize web page development skills.

3. Precompiled css technology: the basic knowledge of less and sass, the application of plug-ins and BootStrap source code analysis. Able to skillfully use less and sass to complete project development, and have a deep understanding of BootStrap.

4. Use HTML, CSS, LESS, SASS and other technologies to complete the actual combat of web projects. Master the content of html and css in the first stage through the project, and complete the page design of PC and mobile.

The second stage: Web background technology

Stage objectives:

1. Understand the development history of JavaScript and master the construction of node environment and the use of npm.

2. Master the basic data types of JavaScript and the concepts of variables.

3. Master the use of operators in JavaScript.

4. Have a deep understanding of structural statements and circular statements.

5. Skillfully use arrays to complete various exercises.

6. Be familiar with the syntax of es6 and master JavaScript object-oriented programming.

7.DOM and BOM practice and H5 new features and protocol learning.

Knowledge points:

1, software development process, algorithm, variable, data type, division statement, loop statement, array, function. Skillfully use JavaScript knowledge to complete various exercises.

2.JavaScript object-oriented foundation, exception handling mechanism, general object api, js compatibility and new features of ES6. Proficient in JavaScript object-oriented development, master the important content in es6.

3.BOM operation and DOM operation. Proficient in using BOM objects and DOM objects.

4.h5 related api, canvas, ajax, data simulation, touch event, mockjs. Skillfully use the knowledge learned to complete the website project development.

The third stage: actual combat of database and framework

Stage objectives:

1. Comprehensive use of Web front-end technology for page layout and beautification.

2. Comprehensive use of Web front-end development framework for Web system development.

3. Master the development of Mysql and Mongodb databases.

4. Familiar with front-end box technologies such as vue.js, webpack and elementui.

5. Using Node.js skillfully to develop background applications.

6. Have a deep understanding of Restful, Ajax, JSON and development process, and master the basic skills of git.

Knowledge points:

1, database knowledge, paradigm, MySQL configuration, command, database and table building, data addition and deletion query, mongodb database. In-depth understanding of the general knowledge of database management system and the use and management of MySQL database will lay a solid foundation for the background development of Node.js

2. Module system, function, routing, global object, file system, request processing, Web module, Express framework, MySQL database processing, RestfulAPI, file uploading, etc. Skillfully use the Node.js running environment and background development framework to complete the background development of the Web system.

3.vue's components, life cycle, routing, components, front-end engineering, webpack and elementui framework. Have a clear understanding of the basic use of Vue.js framework, be able to use Vue.js to complete basic front-end development, skillfully use the advanced functions of Vue.js framework to complete Web front-end development and component development, and have a deep understanding of MVVM mode.

4. Requirements analysis, database design and background development, using vue and node to complete the whole station development of pc and mobile. In node.js+vue.js+web pack+MySQL+MongoDB+git, the complete functions of the whole station project are realized and published online.

The fourth stage: Mobile and WeChat actual combat

Stage objectives:

1. Master the framework of React.js and use React.js to complete the development.

2. Master the development principle of mobile terminals, and understand the original development and mixed development.

3. Skillfully use react-native and Flutter framework to complete mobile development.

4. Master the WeChat applet and understand the development of Alipay applet.

5. Complete large-scale e-commerce project development.

Knowledge points:

1, React, basic concepts of component-oriented programming, form data, component communication, monitoring, declaration loop, routing and Redux. Practice using react to complete project development, and master the asynchronous solution Saga in Redux.

2.react-native, development tools, view and rendering, api operation, Flutter environment construction, routing, ListView component, network request and packaging. Master the framework of react-native and Flutter, and use react-native and Flutter to develop mobile projects respectively.

3. Basic introduction of WeChat applet, development tools, views and rendering, api operation, introduction of Alipay applet and api learning. Master the development of WeChat applet and understand Alipay applet.

4. The actual operation of large-scale shopping websites, and the whole project is developed separately; The whole project is divided into four parts: PC-side webpage, mobile APP, applet and background management. Team collaborative development, using git for version control. Three.js and TypeScript can be extended during the target period.