The most difficult problem is how to most wild programmers to rely on technology to solve food and clothing, is popular in terms of discounting technical problems.
If it is purely out of interest, or simply to surprise some stage or some technical barriers project, not tied down with self-employment it is also irrelevant. But when posts become the ultimate goal of self-study and the results, everything is another matter.
Mistakes existing front-end autodidact learning:
1, the learner may be outdated
as a classic things may be outdated, or have a better alternative, and you limited access to information, news lagging behind, resulting learning content is also lagging behind.
2, learning the blind.
Read a book read to find video-based tutorials to learn, feel your taste does not match with the tutorial to find another method, because of his lack of ability to identify resources, always blindly without a clear plan in learning lines learning situation, resulting in ineffective learning harvest time is too long and only a handful.
3, only a theory, lack of exercise real project.
Understanding of the technology remain in the theoretical level, but the lack of experience of real business projects, if no relevant internships or work experience, job specific front-end division of responsibilities and work processes do not fully understand.
What skills required to master the front-end self-study, to go to work?
So, what is the level needed to reach the front end of self in order to go to work? I combined knowledge and now front-end mainstream job requirements, lists some, want to help everyone learn ~
PC terminal site layout: HTML basis, CSS foundation, CSS core attributes, CSS style stacking, inheritance, box model, container, overflow and element type, browser compatible with the width and height from modest, positioning, anchor and transparent, integrate pictures, tables, CSS attributes and filters, etc.
HTML5 + CSS3 basis: HTML5 new elements and attributes, form field strengthening elements, CSS3 selectors, text font-related style, CSS3 displacement and deformation processing, CSS3 2D animation converted with excess, CSS3 keyframe animation with 3D conversion, the flexible pouch model, media query, responsive design.
WebApp page layout: Page design specifications movable end, the movable end cut FIG text flow / control elasticity / pictures ratio / 100% of special design layout, the use of geometric scaling layout, viewport / meta, rem / vw is, of flexbox Detailed , mobile web particular style processing.
Native JavaScript development of interactive features: basic syntax, loop statements, functions and arrays, String and Date, BOM and DOM, event, dragging effect, cookie store, regular expressions, Ajax, object-oriented basis, sports and game development.
Object-oriented and advanced ES5 / ES6 applications: prototype chain, constructors Promise / A +, the design pattern (observer pattern, etc.), and execution context stack an execution context, active objects and variable objects, scope chain, closures, the this , ES5, ES6 and so on.
JavaScript toolkit independent research and development: DOM library, library events, AJAX libraries, and inheritance prototype library, MVVM core library, SPA-based routing libraries.
jQuery classical interaction effects: timeline effects, tab page switching effect, the page navigation effects, effects of the sliding door, the focus FIG rotation effects, the effect of the menu navigation, cascade effects, layer effects, effects pop countdown.
PHP + MySQL backend infrastructure: PHP, MySQL, HTTP (s ) protocol detailed, Ajax advanced, with the cross-domain Defered, Apache and Nginx environmental structures and configuration, interface definition, Mock data, the Restful, FBI front end, the front end security (XSS, CSRF, JSON injection) and so on.
Front-end engineering and modular applications: Gulp, Webpack, NPM, Git / SVN, CommonJS, AMD, CMD, ES6 modularization.
PC-side full stack development: big home, a list of pages with details page display and interactive effects, search, login and registration, shopping cart, jQueryUI with jQuery EasyUI, Bootstrap (ACE), Highcharts / Echarts, ArtTemplate, Velocity, Smarty, cloud platform front-end systems and so on.
Vue.js application development WebApp: Vue.js basic, modular, single-file assembly, routing, communication with the server state management, unit testing and production release, the server render SSR and Nuxt.js, based Vue.js Enterprise Project development.
React.js application development WebApp: ReactJS basis, JSX grammar, assembly, flux + Redux, React, Router routing, animation effects, based React enterprise-class R & D projects.
Angular application development WebApp: TypeScript basic and advanced development environment configuration, Hello World, architecture, modules and components, templates, metadata, data binding and data, forms, services and instruction, dependency injection, routing, Ionic 3 MUI framework.
Micro-channel public number Development: acquaintance micro-channel public number, subscription number of basic functions, using Baidu BAE fast on-line code, using Git completed online deployment of code, public numbers development rights and feature access, micro channel JSSDK interface to the API, micro-channel scene project development and access.
Small micro-channel application development: On the micro-channel applet, applet entry will learn, experience a small program components, applets big function, combat and other projects.
React Native: Preliminary React Native, React Native Project Navigator, React Native project text box, React Native project rolling paging, React Native Project Sign in, React Native other components.
Various types of hybrid applications development: self native Navtive Hybrid, a third-party Hybrid frame Cordova / Phone gap, third party Hybrid framework.
Bonus items when the front end of the self-study
Oh, yes, there are bonus items, large data visualization!
Suggest that you start with some knowledge of the details of the entry data visualization, data visualization based on zero programming tools: ChartBlocks, Infogram, plotly, Raw, Tableau, D3.js Detailed, entry D3.js, D3.js advanced applications, D3.js application tools: NVD3, n3, charts, Highcharts, FusionCharts, Polymaps and so on.
In fact, a means of self-study, as to the specific learning outcomes, in fact, all about the individual, this approach is basically the front entry among the slowest, and if learning the wrong direction, is likely to do useful work. If you want to switch to front-end or front-end is going into the industry, as a professional, I suggest learning or training systems, because not only save time, but also learn about the latest front-end technologies and skills, but also a professional in the industry who help you find the quickest way to get started learning, not to a white school or detours. This is just a personal piece of advice for reference only, do not like do not spray!