html5 front-end overview of knowledge and learning direction

knowledge and learning html5 front of the direction
of: knock Ding Wolf Education (Jie)
link: https: //www.zhihu.com/question/52055152/answer/695000093
Source: know almost
copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.

The first phase of HTML5 + CSS3 website
development the main content:
1, PhotoShop familiar with PhotoShop, dimensional measurements can be completed independently, cutting diagram, layer operations, Cutterman cut plan and other artifacts
2, HTML5 master client and server interaction principle, browser core, and the syntax used, the label used, semantic, form elements, HTML5 new label coding standards.
3, CSS3 CSS master common properties, various selectors, and priority inheritance, value and units, literal text styles, CSS box model, background techniques CSS (rounded corners, shading, and the like transition), the positioning and floating, and pseudo-classes advanced techniques ,, CSS pseudo-elements (sprite, sliding doors, CSS triangle, etc.), layout style, CSS compatibility issues, Google browser developer tools to debug techniques.

The second phase of JavaScript web programming
main elements:
1. Pre-programmed
2, JavaScript JS basis mastered the basic syntax, data types, operators, branching statements, looping statements, operators, functions, arrays, built-in objects, events, DOM operations, JS corporate coding standards, such as the breakpoint debugging
3, Web APIs and Web effects BOM familiar with programming, DOM level programming, advanced event processing, browser compatibility, timer, common libraries, higher-order functions package thinking, three-dimensional view of the carousel, animation effects, navigation menus, waterfall, 3D carousel, World war II aircraft and other web effects such as

the third phase of the animation design and responsive website
The main content:
1, JavaScrip senior master object-oriented, Object-depth analysis, this in-depth analysis, Function analysis, with and eval function, JSON application, and the application of the principle of closure, inheritance concepts and applications, prototype and prototype chain analysis, scope and the scope chain in-depth analysis, regular expressions, advanced functions advanced, modular design patterns and ideas, a variety of JS debugging techniques, ES6 and so on.
2, jQuery framework grasp jQuery selector, jQuery event handling, jQuery document processing, jQuery common method, jQuery animations, jQuery business case, jQuery plugin, jQuery source code analysis.
3, responsive website development project BootStrap familiar framework, project code specification, the grid system layout, responsive layout, fonts, icons, scene components, mobile terminal compatible navigation bar layout, ceiling effect, responsive carousel map, media queries , block mode, Swiper plug-ins.
4, animation effects Web site project Less familiar language, Zepot library, FlexBox layout, Gulp automated build, MouseWhee plug-ins, 3D effects, CSS3 animation effects, Animate Animation Library, WOW effects library, ScrollReveal libraries.

The fourth stage H5 whole stack development and interactive AJAX
main content:
1, Web server developers familiar with the network infrastructure, server and dynamic web pages, HTTP protocol, GET and POST requests, request and response principle
2, AJAX Programming familiar synchronous and asynchronous requests, native AJAX, jQuery-ajax, JSON and other knowledge point
3, familiar interface development for front and rear end of the separation architecture, RESTful API design, Mock.js, Postman tool, check the weather and other cases.
4, Node.js REPL familiar operating environment, Node debugging, NPM commonly used commands, module loading mechanism, modules and packages, the global object, scope and callbacks, asynchronous and synchronous mechanisms, event-driven, file module, network module, routing module , RequireJS, Express frame, frame Koa, Egg frame, database operation.
5, MongoDB familiar with MySQL, NoSQL, BSON, MongoDB Installation and common commands, MongoDB basic operation, Node operation MongoDB, MongoDB high-level commands such as
6, Git / GitHub

fifth stage mobile Web and Vue electricity suppliers
to understand the use of native CSS and JS completed M station project; mobile terminal adapted to grasp and compatibility issues; JS extraction and the familiar packaging thoughts; Vue master framework technology stack technology (instructions, assembly, routing, etc.); Vue skilled use of technology stack project development is completed; familiar with the source code management tool; familiar with the ability to respond to business programming; familiar with webpack tools; grasp deploy and publish Web projects; development of analytical problem, independent problem-solving skills; must master code debugging skills;

sixth stage React mobile App and
master React framework technology stack technology ( instructions, assembly, routing, etc.); React skilled use of technology stack to complete the project development; development framework is understood hybrid App App rapid development of mobile; mobile terminal adapted to grasp and compatibility issues; Native React master stack technology techniques; Native skilled use of technology stack React develop a native App; master the ability to respond to business programming; familiar The entire project of decomposition and development process;

the seventh phase micro-channel small programs and large data visualization
to master the technology stack applets; skilled and independent development of small program projects; grasp deploy and publish applets; mastered the ability to respond to business programming; develop logical and business layers separated framework for thinking; the ability to cultivate high degree of packaging components; development of analytical problem, independent problem-solving skills; understanding Canvas graphics; understand the use of HTML5 development of web games; understand the use of third-party AI platform.