Web front-end engineers in recent years, emerging profession, is currently popular and well-paid career. Different companies have different names, such as: Web interface development, website design, web front-end development to learn what methods and techniques to master?
A, Div and Table
This is the simplest and most basic. To master the div, form table, ul li, p, span, font these labels, these are the most commonly used, especially div and table, div for layout, table layout can also be used, but not flexible, basic table and the data is used to dealing with.
Two, CSS
Here that does not include the css css3, generally we see that there requires a web front-end development engineers, there is a will to use css + html or css + div to interface layout, html css is used to assist layout and presentation, we called "css styles."
Why say css + div it?
Because what I have to say something html div is mainly used for layout, so the div is to master the core of things! So css definitely have to go with the div to use. css to master the float, position, width, height, and the maximum for the minimum, use a hundred percent
Three, JS
The first two may also feel that we had to go and see it js egg pain.
In fact, js entry is very simple, do not need to be a lot of things, as long as one can get according to id, or the name or style pages dom, or value, and then will assign an id or element tag name, or append data , chasing html, code is not difficult at all, these will be the basis js, other direct Baidu just fine. Then to see more, use more, then nothing is a problem. , Overflow, margin, padding, and so on. Why say css + div it?
Four, jQuery
jquery is equivalent to a js js encapsulates a set of plug-ins, the purpose of the operation is more convenient, less code written, jquery entry is also very simple, that is the entry js and need to learn the same, but replaced the jq code. Like other Baidu is enough.
Five points will be the best language background
For example, java, php, why? Because we are the front-end interface of data from the background to, and if it will point the code behind, you know how to interact with back-end data is the best, so to save time, but also allows more front-end code specification . Otherwise, probably because your writing and back-end data can not be combined to come on, then they have to re-write front-end code, it is more egg pain.
Sixth, learn CSS3 + HTML5
With the rapid development of this era of mobile Internet, especially the 4G era, HTML5 + CSS3 has become a new generation of web front-end technology. With the development and popularity of HTML5, HTML5 will become compulsory understand Web developers. When it comes to the look of the page, you need to learn CSS, and it can help you to make even more beautiful web.
The first stage:
HTML+CSS:
Advanced HTML, CSS advanced, div + css layout, HTML + css development of the entire station,
JavaScript Basics:
Js based tutorial, js built-in objects commonly used method, common operating Encyclopedia DOM tree, ECMAscript, DOM, BOM, timers and focus FIG.
JS basic effects:
Common effects, such as: tab, navigation, full page scroll, carousel map, JS to make a slide, pop-up layer, accordion menu, waterfalls flow layout, scroll event, rolling poor view.
JS advanced features:
Regular expression, sorting algorithm, recursive algorithm, closures, throttling function, the scope chain, moving frame based on the distance, the object-oriented basis,
JQuery: Basics
Hanging device, DOM operations, special effects and animation process chain, drag, deform, JQueryUI basic components used.
The second stage: HTML5 and Mobile Web Development
HTML5:
The new HTML5 semantic tags, HTML5 forms, audio and video, offline and local storage, SVG, Web Socket, Canvas.
CSS3:
The new CSS3 selector, pseudo-elements, face representation, border, shadow, background series attributes change, Transition, animation, depth of field and deep penetration, 3D effects production, Velocity.js framework elements to enter and exit strategies, cool CSS3 web production .
Bootstrap:
Responsive concept, media query, responsive website design, Raster system, delete the grid system principles, Bootstrap common template, LESS and SASS.
Mobile Web Development:
Cross-WEB terminal and mainstream device profiles, viewport, flow layout, flexible box, rem, the mobile terminal JavaScript events, phone common JS effects production, Zepto.js, together cost-effective mobile phone page, scroll phone.
The third stage: HTTP and AJAX programming service
WEB server basis:
Basics server, Apache server and other server on the WEB, Apache server build, HTTP introduction.
PHP basics:
PHP basic syntax, using PHP to process simple GET or POST request,
AJAX Part I:
Introduction and asynchronous concept Ajax, Ajax framework package, the XMLHttpRequest object details described packaging method, compatibility processing method, Ajax framework, Ajax cache issues, XML presentation and use.
AJAX Part II:
JSON and JSON parsing, data binding, and template technology, JSONP, cross-domain technology, Pictures read and lazy-load technology, JQuery framework AjaxAPI, the explosion of Ajax cloth case flow amount.
Phase IV: Advanced Object-Oriented
The ultimate object-oriented articles:
From the perspective of memory to be understood that the object oriented JS, base type, complex type, prototype chain, object-oriented ES6, attributes read and write permissions, setter accessor.
Object-oriented three characteristics:
Inheritance, polymorphism, encapsulation, interfaces.
Design Patterns:
Object-oriented programming thinking, singleton, factory pattern, strategy pattern, observer pattern, the template method pattern, proxy mode, decorator mode, the adapter mode, aspect-oriented programming.
Fifth stage: a package of their own framework
Package base frame:
Event stream, bubbling, capture, event objects, events frame, select the frame.
Intermediate frame package:
Movement principle, a single frame movement of the object, a multi-frame movement of the object, moving the object-oriented framework package.
High frame package and added:
JQuery frame prototype, scalability, modularity, encapsulation belonging Chuanzhi own framework.
Stage 6: The modular component development
Component Oriented Programming:
Way component-oriented programming, for the realization of the principle components of the program, the actual component-oriented programming, component-based application development site of the idea.
Module-oriented programming:
AMD design specifications, CMD design specifications, RequireJS, LoadJS, Taobao SeaJS.
Seventh stage: the mainstream of popular frameworks
Web development workflow:
GIT / SVN, Yeoman scaffolding, NPM / Bower dependency management tool, Grunt / Gulp / Webpack.
MVC / MVVM / MVW Framework:
Angular.js、Backbone.js、Knockout/Ember。
Common Library:
React.js, Vue.js, Zepto.js.
Eighth stage: HTML5 native mobile application development
Cordova：
The relationship between the WebApp / NativeApp / HybirdApp Profile, Cordova profiles, and PhoneGap, development environment to build, Cordova combat (create project, configure, compile, debug, deploy release).
Ionic：
Ionic profiles and similar contrast, parsing the template project, and the use of common components, combined with Angular build APP, a common effect (pull-down refresh, the Raja load, sliding navigation, tab).
React Native：
React Native Profile, React Native environment configuration, create projects, configure, compile, debug, deploy, publish, native UI components and modules, native common API.
HTML5 +:
HTML5 + China Industry Alliance, HTML5 Plus Runtime Environment, HBuilder development tools, MUI framework, H5 + development and deployment.
Ninth stage: Node.js whole stack development:
Getting Started:
Node.js development, ecosystem, Io.js, Linux / Windows / OS X environment configuration, REPL environment and the console program, asynchronous programming, non-blocking I / O, modular concept, module management tools, development process, debugging, testing .
Core modules and objects:
Global object global, process, console, util, event-driven, event emitter, encryption and decryption, path operations, serialization and deserialization, file stream operation, HTTP server and the client, Socket.IO.
Web Development Fundamentals:
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 cases.
Rapid development framework:
Express + MVC Introduction Introduction, Express common API, Express routing module, Jade / Ejs template engine, using the Express reconstructed Blog cases, Koa and other common MVC framework.
Node.js development of e-commerce combat:
Requirements and design, module registration account login Member Center module, front display module, shopping cart, order settlement, online customer service chat module.
link: https: //www.jianshu.com/p/3597dc9b3cb7