What do you need to learn about the front end?

#What to learn about front-end?

The first stage: HTML CSS JS basics

(1) HTML CSS:

HTML advanced, CSS advanced Level, DIV CSS layout, HTML CSS whole site development,

(2) JavaScript basics:

Js basic tutorial, common methods of js built-in objects, common DOM tree operations, ECMAscript, DOM, BOM, timer and focus map.

(3) JS basic special effects:

Common special effects, such as: tab, navigation, full page scrolling, carousel, JS slide production, pop-up layer, accordion menu, waterfall flow layout , scrolling events, scrolling views.

(4) JS advanced features:

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

(5) JQuery: Basic use

Hanger, DOM operation, special effects and animation, method chain, drag and drop, transformation, basic use of JQueryUI components.

Second Phase: HTML5 and Mobile Web Development

(1) HTML5:

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

(2) CSS3:

CSS3 new selector, pseudo-element, color notation, border, shadow, flex layout, background series Attribute changes, Transition, animation, depth of field and depth penetration, 3D effect production, Velocity.js framework, element entry, exit strategy, and cool CSS3 web page production.

(3)Bootstrap:

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

(4) 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 , mobile phone Juhuasuan page, mobile phone scrolling.

The third stage: HTTP service and AJAX programming

(1) WEB server basics:

Server basics, Apache server and other WEB servers Introduction, Apache server setup, HTTP introduction.

(2) AJAX Part 1:

Introduction to Ajax and the concept of asynchronous, Ajax framework encapsulation, XMLHttpRequest object detailed introduction method, compatibility processing method, Ajax framework encapsulation, Ajax cache Questions, introduction and use of XML, handling simple GET or POST requests,

(3) 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, and the use of Ajax to implement explosive streaming cases.

The fourth stage: advanced object-oriented

(4) The ultimate object-oriented article:

From the memory perspective to understanding JS object-oriented and basic Types, complex types, prototype chains, object-oriented in ES6, scope of variables in ES6 (let, const (declaring variables read-only), block-level scope), new features of functions in ES6.

(5) Three major characteristics of object-oriented:

Inheritance, polymorphism, and encapsulation.

(6) Five methods to create objects in object-oriented:

Custom objects, factory mode created objects, constructors, mixed mode created objects, JSO format created objects.

The fifth stage: Encapsulate a framework of your own

(1) Basics of framework encapsulation:

Event flow, bubbling, capture, events Objects, event frames, selection frames.

(2) Intermediate level of frame encapsulation:

Motion principles, single object motion frame, multi-object motion frame, motion frame object-oriented encapsulation.

(3) 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

(4) Component-oriented programming:

The method of component-oriented programming and the implementation of component-oriented programming Principles, practical component-oriented programming, and development of website applications based on component-based ideas.

(5) Module-oriented programming:

AMD design specifications, CMD design specifications, RequireJS, LoadJS, Taobao’s SeaJS.

The seventh stage: Mainstream popular frameworks

(1) Web development workflow:

GIT/SVN, Vue-cli scaffolding, NPM /Bower dependency management tool, Grunt/Gulp/Webpack.

(2) Front-end mainstream frameworks:

Vue.js, Angular.js, React.JS, Bootstrap.

(3) Commonly used libraries:

React.js, Vue.js, JQuery.js.

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

(1) Quick start:

Node.js development, ecosystem, Io.js, Linux/Windows/OS X environment configuration, REPL environment and console program, asynchronous programming, non-blocking I/O, module concept, module management tools, development process, Debugging, testing.

(2) Core modules and objects:

Global objects global, process, console, util, event-driven, event emitter, encryption and decryption, path operation, serialization and deserialization, File stream operations, HTTP server and client, Socket.IO.

(3) Web development basics:

HTTP protocol, request response processing, relational database operations and data access, non-relational database operations and data access, native Node.js development Web applications, Web development workflow, Node.js development Blog cases.

(4) Rapid development framework:

Express introduction MVC introduction, Express common API, Express routing module, Jade/Ejs template engine, using Express to reconstruct Blog cases, Koa and other common MVC frame.

(5) Node.js development of e-commerce practice:

Requirements and design, account module registration and login, member center module, front-end display module, shopping cart, order settlement, online customer service instant messaging module.

For more related knowledge, please visit PHP Chinese website! !

The above is the detailed content of What do you need to learn about the front end?. For more information, please follow other related articles on the PHP Chinese website!