Summarize the front-end learning steps

The first stage:

HTML+CSS:
HTML advanced, CSS advanced, div+css layout, HTML+css whole site development,

JavaScript basics:
Js basic tutorial, common methods of built-in js objects, a complete list of common DOM tree operations, ECMAscript, DOM, BOM, timer and focus map.

JS basic special effects:
Common special effects, such as: tab, navigation, full page scrolling, carousel chart, JS slide production, pop-up layer, accordion menu, waterfall flow layout, scrolling event, rolling difference view.

JS advanced features:
Regular expressions, sorting algorithm, recursive algorithm, closure, function throttling, scope chain, distance-based motion framework, object-oriented foundation,

JQuery : Basic use
Basic use of hangers, DOM operations, special effects and animations, method chains, drag and drop, transformation, and JQueryUI components.

Second Phase: HTML5 and Mobile Web Development

HTML5:
HTML5 new semantic tags, HTML5 forms, audio and video, offline and local storage, SVG, Web Socket, Canvas.

CSS3:
CSS3 new selector, pseudo-elements, color representation, borders, shadows, background series property changes, Transition, animation, depth of field and depth transparency, 3D effect production, Velocity.js framework, elements Entry and exit strategies, cool CSS3 web page production.

Bootstrap:
Responsive concepts, media queries, responsive website production, deletion system, deletion system principles, common Bootstrap templates, LESS and SASS.

Mobile Web Development:
Introduction to cross-terminal WEB and mainstream devices, viewport, fluid layout, flexible box, rem, mobile terminal JavaScript events, common JS effect production in mobile phones, Zepto.js, mobile phones Juhuasuan page, mobile phone scrolling.

The third stage: HTTP service and AJAX programming

WEB server basics:
Basic knowledge of servers, introduction to Apache server and other WEB servers, Apache server construction, and introduction to HTTP.

PHP basics:
PHP basic syntax, using PHP to process simple GET or POST requests,

AJAX Part 1:
Ajax introduction and the concept of asynchronous, and the encapsulation of the Ajax framework , XMLHttpRequest object detailed introduction method, compatibility processing method, Ajax framework encapsulation, caching issues in Ajax, XML introduction and use.

AJAX Part 2:
JSON and JSON parsing, data binding and template technology, JSONP, cross-domain technology, image pre-reading and lazy-load technology, AjaxAPI in the JQuery framework, implementation using Ajax The number of rumors exploded.

The fourth stage: advanced object-oriented

Ultimate object-oriented article:
From the memory perspective to understanding JS object-oriented, basic types, complex types, prototype chains, and ES6-oriented Object, property read and write permissions, setter, accessor.

Three major characteristics of object-oriented:
Inheritance, polymorphism, encapsulation, and interface.

Design patterns:
Object-oriented programming thinking, singleton mode, factory mode, strategy mode, observer mode, template method mode, proxy mode, decorator mode, adapter mode, aspect-oriented programming.

The fifth stage: Encapsulate a framework of your own

Basics of framework encapsulation:
Event flow, bubbling, capture, event object, event frame, selection frame.

Intermediate level of frame encapsulation:
Principles of motion, single object motion frame, multi-object motion frame, object-oriented encapsulation of motion frame.

Advanced framework encapsulation and supplements:
The prototype, scalability, modularity, and encapsulation of the JQuery framework belong to Chuanzhi’s own framework.

The sixth stage: modular component development

Component-oriented programming:
The method of component-oriented programming, the implementation principle of component-oriented programming, the actual combat of component-oriented programming, and development based on component-oriented thinking Website application.

Module-oriented programming:
AMD design specifications, CMD design specifications, RequireJS, LoadJS, Taobao's SeaJS.

Stage 7: Mainstream popular frameworks

Web development workflow:
GIT/SVN, Yeoman scaffolding, NPM/Bower dependency management tools, Grunt/Gulp/Webpack.

MVC/MVVM/MVW framework:
Angular.js, Backbone.js, Knockout/Ember.

Commonly used libraries:
React.js, Vue.js, Zepto.js.

The eighth stage: HTML5 native mobile application development

Cordova:
Introduction to WebApp/NativeApp/HybirdApp, introduction to Cordova, relationship with PhoneGap, development environment construction, and actual combat of Cordova ( Create project, configure, compile, debug, deploy and release).

Ionic:
Ionic introduction and comparison of similar categories, template project analysis, common components and usage, building APP with Angular, common effects (pull down to refresh, pull up to load, side sliding navigation, tab).

React Native:
Introduction to React Native, React Native environment configuration, project creation, configuration, compilation, debugging, deployment and release, native modules and UI components, native common APIs.

HTML5+:
HTML5+ China Industry Alliance, HTML5 Plus Runtime environment, HBuilder development tools, MUI framework, H5+ development and deployment.

The ninth stage: Node.js full-stack development:

Quick start:
Node.js development, ecosystem, Io.js, Linux/Windows/OS X environment configuration, REPL environment and console programs, asynchronous programming, non-blocking I/O, module concepts, module management tools, development process, debugging, and testing.

Core modules and objects:
Global objects global, process, console, util, event-driven, event emitter, encryption and decryption, path operation, serialization and deserialization, file stream operation, HTTP server and client Terminal, Socket.IO.

Basics of Web development:
HTTP protocol, request response processing, relational database operations and data access, non-relational database operations and data access, native Node.js development of Web applications, Web development Workflow, Node.js development blog case.

Rapid development framework:
Express introduction + MVC introduction, Express common APIs, Express routing module, Jade/Ejs template engine, using Express to reconstruct Blog cases, Koa and other common MVC frameworks.

Node.js development of e-commerce practice:
Requirements and design, account module registration and login, member center module, front desk display module, shopping cart, order settlement, online customer service instant messaging module.

(Reprinted from No More Mistakes - Blog)

The above is the detailed content of Summarize the front-end learning steps. For more information, please follow other related articles on the PHP Chinese website!