Front-end is undoubtedly the hottest technology in 2016, bar none.
Various front-end mvc frameworks are emerging in endlessly. Angular js, vue, react, and the concept of front-end component development have been deeply rooted in the hearts of the people. Front-end salaries are already higher than mobile development.
As a personal webmaster, it is also necessary to learn front-end design. First, you can solve some small design problems by yourself, and at the same time, you can improve your own aesthetics and improve the UI design level of the website.
Front-end skills summary This project records in detail
all aspects of knowledge involved in front-end engineers. After you have basic skills, you can find the direction of learning and improve your skills and knowledge.
The following are the basic skills that I personally feel should be mastered at the entry level:
Basic development tools
solve problems when problems arise. The following are the front-end development tools that I personally feel are necessary:
xxx site: https://developer.mozilla.org
After having the previous foundation, the front-end is basically getting started. At this time, everyone may have some learning direction in mind, if not.
You can refer to the two projects mentioned in the previous essential skills section and choose some from them for development and learning. Here are some nice aspects:
The masters above have pretty much summarized it, so I’ll just make some nonsense here
####Tools
####SKILLS
In fact, there are many front-end skills besides JavaScript (including NodeJS), HTML, and CSS. In fact, the front-end skill tree is very large. Here I can only list some of the ones I have seen during development
#####Language basics
JavaScript:
CSS:
HTML:
#####Advanced
JavaScript:
CSS and HTML: Mainly the features of CSS3 and HTML5, as well as the browser processing process and drawing principles
Commonly used NodeJs packages:
Some ideas:
t make me think
Performance optimization:
#####project
#####FUTURE
#####Others
There are some things that cannot be solved by typing in the code. I felt a lot when I participated in the internship. These are what I encountered and where I felt that I did not do well
####Getting started
You can get started by reading books, but many things in books are outdated. While reading books, you should also continue to pay attention to new developments in technology. Here are a few books that I think are good:
"Dont make me think": The concept of web design and understanding user behavior, very good####Some good websites
####Process
I used to do Java SSH, and became a front-end developer halfway through, so my skills were relatively weak and I encountered more problems. Basically, you can get started by reading books and tutorials on W3C School, as well as some front-end blogs, such as Uncle Tom's blog. In the past, I only used jQuery and didn’t study much in native js. Later, I gradually read a lot of animal books, such as the essence of language by experienced people. I learned a lot of language-level knowledge from these books. But this is obviously not enough, so I often go to the community to see what everyone is talking about, and then check out the relevant information. If I am interested, I will look for more information or write a demo. This is the main way to learn CSS. Later, I began to pay more attention to the blogs of various experts and some relatively in-depth books, as well as some new knowledge and frameworks, and continued to practice submitting codes to github, which also taught me a lot of knowledge. During the internship process, I personally participated in actual project development and learned many concepts and thinking that I could not learn in school, which was also of great help. No more talking, I’m going to move bricks and ask for offers...
In response to the invitation of Qiu God, I would like to share my front-end learning experience. I will not summarize the front-end knowledge system architecture here. The summary of the masters is already quite in place. I will contribute a few links that I think are useful for everyone to study and study. Okay, then I will mainly share the problems I encountered during the front-end learning process and the lessons learned. If it can help FE beginners who want to get started (I will assume that this is the audience type of this article), let them It would be best to take fewer detours and know the direction of your next step every step you take. For the summary and sharing of the masters, please see FE-learning organized by Qiu God.
Let me start by saying that everyone can have their own way of learning the front-end thing. This article is for reference only. It is a bit messy, so you can just read it.
I stumbled into the front-end by accident. I had always been in the direction of making games. I had built game websites, played with game engines, such as unity and unreal, commercial engines, and tinkered with several game prototypes. However, As soon as I entered the laboratory as a researcher, I was directly assigned by my tutor to write js. The tutor gave me half a month to write a data display page based on Baidu Map API. Although this time was quite generous, I had not done much before. I have written js, but I don’t know how to use the map api, so I read the "Javascript Authoritative Guide" (Rhinoceros Book) while referring to the "code" left by predecessors in the laboratory, and finally wrote out all the functions. That page is considered my introduction to js, and it is also the beginning of my front-end learning route.
Thinking about it now, although I was assigned to do front-end, I still have to rely on interest to continue doing it and do it well. Of course, front-end is an interesting technical field, and the community is very "busy" every day.
I personally think that in the initial stage of front-end learning, you can completely break away from books and be project-driven. Although I personally started reading from the Rhinoceros book, if you don’t have enough time, or you find reading large books boring, don’t be like me. Of course, if you decide to read a book, it is best to follow all the examples in the book. I had never come into contact with js before going to graduate school. In April, before school started, my tutor directly told me about the Baidu Map API project, and then came various ERP and map data display. Although it was different in different ways, it was not the same. , but it’s basically all front-end work. I’ve also done SSH and android development. Can you believe that I’m the only one writing the front-end in the entire laboratory? The back-end in the era of rich client SPA is a restful interface, and the amount of code is basically in the front-end. How can I write it so well... During this period, I followed the mentor to experience entrepreneurship, and I worked on it from 7 o'clock to 10 p.m. every day. point, it can be regarded as going through a period of rapid growth.
To master a technology, first master its general framework, think of an achievable idea, make a demo that can run, and then improve its details. When the demo is completed, you will have a perceptual understanding of the technology. If you read books again, you will gain much more. I started writing from native js to jquery, then to extjs, then to angularjs. From the instructor's designated technology to my own technology selection, I practiced one project after another, just like fighting monsters and upgrading. Of course, if you don’t have a project, it’s fun and fulfilling to create your own project and realize your own ideas.
Front-end learning has a characteristic. Many things are fragmented and scattered, and you need to organize, summarize and summarize them yourself. Following many great masters on Weibo and Zhihu is not just for listening to gossip. Sometimes the words of the great masters leave endless aftertaste. It is very likely that a word mentioned inadvertently will become your next learning goals. Collect this information, make good use of Google, ask questions, and think. Just like the collection elements in the game, front-end learning is also a "game" full of collection elements, but you need a knowledge management tool to act as an inventory and warehouse. All the big guys I know use knowledge management tools. Heavy user. I used oneNote before, but it was not bound to cloud storage at that time. Now I basically use evernote, and I have accumulated more than 1,200 notes. I have always planned to use delicious for bookmarks because it is managed based on tags, but it has never been used. Of course, the focus is not on these tools, but tools that are handy can improve your learning efficiency. The most important thing is of course to maintain a strong desire to learn at all times. Your goal is to understand everything about the front end (of course, not everything must be mastered, because after all, your energy is limited, and realistically speaking, this is unlikely). Follow God
In short, these two gods pulled me into a pit, or jumped from one pit to another. Although neither of the two gods are engaged in front-end, there are always similarities between the technologies.
Reading
(the technical books mentioned here refer to those classic and recognized good books). It seems meaningless to discuss the correctness of this formula, but its rationality is beyond doubt, that is, read more classic technical books. The most extreme example, Xu You from Google said in my university that he swept the entire TP312 bookshelf in the library... For front-end classic books, there is a list of front-end books I collected (if there are any missing front-end classics, that's fine) Books, please leave a message and let me know). If possible, you can try to read these books. I am also looking for full time to finish them. As mentioned before, front-end knowledge points are loose, collecting scattered knowledge points, learning quickly from blogs, etc. These are only one aspect of front-end learning. If you want to deeply understand a knowledge system, understand its ins and outs, and establish a systematic understanding of it , reading classic books is still essential. I finished reading the Rhinoceros book from the beginning, and then went on to read some other classic technical books that had little to do with the front-end. Later, through laboratory projects and some small projects I did, I gradually became more familiar with the front-end field. I read "Javascript Patterns", "Javascript Design Patterns", and "Writing Maintainable Javascript". Later I learned about node and started to use it to make some gadgets. I also read "NodeJS up and run" and "Mongodb Authoritative Guide". ", but I feel that the former is a bit of a trap. At that time, Pu Ling's book "In-depth and simple explanations" had not yet been released. After it came out, I went to the library to borrow it and read it. After reading it, I felt that it was pretty good, but I felt that I had read too little, and I still need to continue. Brush (refer to book list above). The positioning of the front-end is related to what kind of knowledge and skills you need to absorb, and determines what you need to be particularly sensitive to in the technical world. If you think that the front-end only stops at cutting pages and realizing interaction and visual requirements, then your understanding of the front-end is still in its infancy. During the final interview with Alibaba, I asked the examiner this question: Front-end technology is changing with each passing day, the scope is getting wider and wider, and the standards are becoming richer and richer. It seems that any tentacle can reach far. How to give the front end a suitable position? The examiner analyzed it for me for a long time, and then summed it up in one sentence: it is the connector between users and the website, the creator of user experience (that’s not the original word, but that’s the general meaning). In other words, the ultimate goal of the front-end is actually to create user experience, improve user experience, centered on user experience. Whether you start from interaction design, performance optimization, or improving workflow to improve workflow efficiency, in the end it is all about creating and improving user experience, and it must ultimately be reflected in user experience. I think this summary is very reasonable (of course the term "user experience" is too broad, and it is not just the category of front-end engineers. For example, when developing the backend, optimizing a data processing process improves the overall performance, which is also good for users. an improvement in experience). Nowadays, front-end engineers will inevitably come into contact with many more in-depth issues than cutting pages, implementing visual requirements, implementing interactions, etc. at a certain stage, such as front-end automation, image programming, performance optimization, etc., and pushing it a little further back is PHP /JSP/ASP/nodeJs. In the past, back-end templates generally belonged to the back-end category. Now with the evolution of front-end architecture, you may be asked to write back-end template code, which requires the use of back-end languages (PHP/Java/C#, etc.) ), this is the so-called big front-end (however, this is not inconsistent with the positioning of the front-end. The big front-end still deals with the parts that come into contact with users, and still optimizes the user experience). Perhaps the most common or talked about one is node. In fact, any of these technologies can be selected. It is said that among the three BAT companies, Baidu uses PHP more and Alibaba uses node more. Uncle Yu mentioned in his blog that the so-called full-end is horizontal and the full-stack is vertical. Full-end That is to say, all terminals are front-ends, because they are all related to user experience and are in direct contact with users. Adapting to multi-terminal development requires you to expand your knowledge of android development and ios development on the basis of web front-end. Fortunately, due to the popularity of hybrid development methods, the skills for using native language development will not be so in-depth. . Full stack can be said to be the most suitable development type for start-up companies. Broadly speaking, it is considered to be from front-end to back-end, from development to operation and maintenance. I won’t talk about this kind of thing. Most people probably won’t want to go there. If you want to develop in this direction and want to become a full-stack dev in this sense, you may not need to read my article; and full-stack in a narrow sense specifically refers to using js language to write from the front-end to building on nodeJs. Backend, front-end and back-end have unified language, unified programming model, and even share the same set of code. To learn more about full-stack development, you can read Yu Bo’s article about full-stack engineers. The above is my superficial understanding of the front-end and the derived technical routes. It is quite important to learn a field and grasp its overall direction and trend. In addition, if you want to have an overall understanding of the front-end learning direction and career growth path, it is recommended to read this front-end development talk summarized by Ba Chi. Contribute several links that are helpful for front-end learning and interviews: Compared with grunt, learning gulp will be easier If you want to make a SPA, we recommend backbone.js and backbone.marionette.js FQ Don’t bother, just spend ten yuan to buy a month’s worth of red apricots. It’s no problem to learn these things after laying a solid foundation. html There’s nothing much to say, just learn html5 when you have time. Css Try to read the documentation as much as possible, because many Chinese materials have different opinions. Reading too much will make you confused. There is a website where you can check the support status of html/css tags and attributes in various browsers. It is very useful. javascript Just look at JavaScript Advanced Programming. But after reading such a thick book, you will forget it. Here is a good article to explain the core concepts of JavaScript: object/prototype chain/constructor/execution context/scope chain/closure/this. If you have time, you can take a look at ecmascript 6, which is scheduled to be released in June next year. Ruan Yifeng's website has introductory information. jquery has many APIs, which can be easily found on this website. Have time to figure out the usage of jquery deferred. Install more plug-ins for sublimetext, such as checking code errors, creating new directory files, and organizing code. Positioning of the front end
Finally
Suggestions from yiyizym on byr forum
Comprehensive category
Comprehensive category
Address
Front-end knowledge system
http://www.cnblogs.com/sb19871023/p/3894452.html
Front-end knowledge structure
https://github.com/JacksonTian/fks
Overview of Web front-end development department
https://github.com/unruledboy/WebFrontEndStack
Overview of Web Front-End Development Department-Chinese Version
http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
Web Front-end Stack v2.2
Web Front-end Stack v2.2
Free programming Chinese book index
https://github.com/justjavac/free-programming-books-zh_CN
Front-end books
https://github.com/dypsilon/frontend-dev-bookmarks
Comprehensive collection of front-end free books
https://github.com/vhf/free-programming-books
Front-end knowledge system
http://www.cnblogs.com/sb19871023/p/3894452.html
Free programming Chinese book index
https://github.com/justjavac/free-programming-books-zh_CN
Intelligent Society - Proficient in JavaScript development
http://study.163.com/course/introduction/224014.htm
Reintroducing JavaScript (JS Tutorial)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
MIT Open Course: Introduction to Computer Science and Programming
http://v.163.com/special/opencourse/bianchengdaolun.html
The most complete collection of this trap in JavaScript - one of the best
http://segmentfault.com/a/1190000002640298
JS Functional Programming Guide
https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
JavaScript Promise Mini Book (Chinese version)
http://liubin.github.io/promises-book
Tencent Mobile Web Front-End Knowledge Base
https://github.com/AlloyTeam/Mars
Front-End-Develop-Guide Front-End Development Guide
https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
Front-end development notebook
https://li-xinyang.gitbooks.io/frontend-notebook/content
Big front-end toolset - Nie Weidong
https://github.com/nieweidong/fetool
Front-end Developer Manual
https://dwqs.gitbooks.io/frontenddevhandbook/content
Entry class
Entry Class
Address
Front-end introductory tutorial
http://www.cnblogs.com/jikey/p/3613082.html
Xuefeng’s Javascript tutorial
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
jQuery Basics Tutorial
http://www.imooc.com/view/11
Essential PS skills for front-end engineers - picture cutting
http://www.imooc.com/view/506
A front-end entry method based on personal experience summary
https://github.com/qiu-deqing/FE-learning
Tools
Tools
Address
Front-end people’s club
http://f2er.club/ It can really liberate your favorites
How to use Sublime Text elegantly
http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
Usage notes of the new coding tool Atom
http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
css sprite creation
http://www.imooc.com/learn/93
Getting started with version control – moving into Github
http://www.imooc.com/learn/390
Grunt-beginner front-end automation tool
http://www.imooc.com/learn/30
IntelliJ IDEA Simplified Chinese special tutorial
https://github.com/judasn/IntelliJ-IDEA-Tutorial
Webstorm,InterllIdea,Phpstorm
http://t.cn/8kZZ1Uy
SublimeText
https://github.com/jikeytang/sublime-text
Atom
https://atom.io
visual studio code
https://code.visualstudio.com
Comprehensive effect search platform
Comprehensive effect search platform
Address
JavaScript Resource Collection Chinese Version
https://github.com/jobbole/awesome-javascript-cn
100+ super comprehensive web development tools and resources
https://xituqu.com/170.html
zoommyapp.com
http://zoommyapp.com/ High quality picture gallery
unsplash.com
https://unsplash.com/ High quality picture gallery
www.pinterest.com
https://www.pinterest.com/ Gallery
New Old Stock
http://nos.twnsnd.co Retro Style Gallery
Effect Network
http://www.jq22.com
Petals.com
http://huaban.com/
Beautiful pictures
http://www.topit.me/
codepen
http://codepen.io/
Photo Network
http://699pic.com/
Commonly used JavaScript code snippets
http://microjs.com
Team Blog|Weekly Report
Weekly Newsletter
Address
Qiwu Weekly
http://old.75team.com/weekly/
Coder Weekly
http://weekly.manong.io
WEB front-end development
http://www.css88.com
A JS tip per day!
http://www.jstips.co
Tencent AlloyTeam
http://www.alloyteam.com/webdevelop/
Ping An Technology Mobile Development Team 2 Technical Weekly Report
https://github.com/PaicHyperionDev/MobileDevWeekly
Development Center
Development Center
Address
mozilla js reference
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
Chrome Development Center (chrome’s core has been switched to blink)
https://developer.chrome.com/extensions/api_index.html
safari development center
https://developer.apple.com/library/safari/navigation
microsoft js reference
https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
js secret garden
http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js secret garden
http://bonsaiden.github.io/JavaScript-Garden/zh
w3help
http://www.w3help.org Comprehensive Bug Collection Website
Nodejs
Nodejs
Address
nodejs is quite large
http://liuqing.pw
Node.js includes teaching but not skills
https://github.com/alsotang/node-lessons
The length is relatively short
http://www.rainweb.cn/article/category/Nodejs
node express introductory tutorial
http://www.w3cfuns.com/article-5598538-1-1.html
nodejs scheduled tasks
http://my.oschina.net/u/568264/blog/193773
A nodejs blog
http://60sky.com
【NodeJS Study Notes 04】News Release System
http://www.cnblogs.com/yexiaochai/p/3536547.html
Happy 7 days of Chinese New Year, learning nodejs is also fun
http://www.cnblogs.com/qqloving/p/3541099.html
Learn NodeJS in seven days
https://github.com/nqdeng/7-days-nodejs
Nodejs study notes (2) --- event module
http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
Getting started with nodejs
http://www.cnblogs.com/liusuqi/p/3735491.html
angularjs nodejs
https://github.com/zensh/jsgen
A series of articles about starting nodejs from scratch
http://blog.fens.me/series-nodejs
Understand nodejs
http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs event polling
http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
Getting started with node
http://www.nodebeginner.org/index-zh-cn.html
nodejs cms
http://ourjs.com/detail/53e1f281c5910a9806000001
Getting started with Node, a comprehensive NodeJS tutorial
http://ourjs.com/detail/529ca5950cb6498814000005
Code debugging and performance tuning for NodeJS
http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line
Comprehensive API
Comprehensive API
Address
javascripting
http://www.javascripting.com
Various popular library searches
http://microjs.com
runoob.com - Contains various API collections
http://www.runoob.com
Open source China online API document collection
http://tool.oschina.net/apidocs
devdocs
http://devdocs.io English comprehensive API website
Ecmascript
Ecmascript
Address
Understanding ECMAScript 6 - Nicholas C. Zakas
https://leanpub.com/understandinges6/read
exploring-es6
https://leanpub.com/exploring-es6/read
exploring-es6 translation
https://github.com/es6-org/exploring-es6
exploring-es6 translation preview
http://es6-org.github.io/exploring-es6
阮一峰 es6
http://es6.ruanyifeng.com
Ruan Yifeng Javascript
http://javascript.ruanyifeng.com
ECMA-262, 5th edition
http://yanhaijing.com/es5
es5
http://es5.github.io
Js template
Js template
Address
template-chooser
http://garann.github.io/template-chooser
artTemplate
https://github.com/aui/artTemplate
tomdjs
https://github.com/aui/tmodjs/blob/master/README.md
Taobao template juicer template
http://juicer.name/docs/docs_zh_cn.html
Fxtpl v1.0 Starry front-end template engine
http://koen301.github.io/fxtpl
laytpl
http://laytpl.layui.com
mozilla - nunjucks
https://github.com/mozilla/nunjucks
Juicer
https://github.com/PaulGuo/Juicer
dustjs
http://akdubya.github.io/dustjs
etpl
http://ecomfe.github.io/etpl
HTML5(HTML)
HTML(HTML5)
Address
In-depth understanding of HTML5 tags
https://segmentfault.com/a/1190000002695791
How to write efficient HTML
https://segmentfault.com/a/1190000002680822
HTML meta tag summary and attribute usage introduction
https://segmentfault.com/a/1190000004279791
Joking about HTML5
http://www.cnblogs.com/dojo-lzz/p/5059316.html
CSS3(CSS)
CSS
Address
CSS syntax reference
http://tympanus.net/codrops/css_reference
How to write maintainable CSS
https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS3 Animation Manual
http://isux.tencent.com/css3/index.html
Tencent css3 animation production tool
http://isux.tencent.com/css3/tools.html
Zhiye css gadget collection
http://linxz.github.io/tianyizone
css3 js mobile hodgepodge
http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
bouncejs touch library
http://bouncejs.com
css3 button animation
http://fian.my.id/Waves
animate.css
http://daneden.github.io/animate.css
The end of global CSS
http://www.alloyteam.com/2015/10/8536
browserhacks
http://browserhacks.com
Angularjs
Angularjs
Address
Some learning resources for Angular.js
https://github.com/dolymood/AngularLearning
angularjs Chinese community
http://angularjs.cn
Angularjs source code learning
http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs source code learning
http://www.ifeenan.com/?c=AngularJS
angular encapsulation of bootstrap
http://angular-ui.github.io/bootstrap
angularjs + nodejs
https://cnodejs.org/topic/51404e0f069911196d2e3923
Lv Dabao Angularjs
http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS Best Practices
http://www.infoq.com/cn/news/2013/02/angular-web-app
Some extension directives for Angular
http://www.lovelucy.info/angularjs-best-practices.html
Angular data binding principle
https://github.com/Pasvaz/bindonce
Some extended Angular UI components
https://github.com/angular-ui
Performance testing of Ember and AngularJS
http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
Take you closer to AngularJS - introduction to basic functions
http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
Angularjs Development Guide
http://angular.duapp.com/docs/guide
Angularjs learning
http://www.cnblogs.com/amosli/p/3710648.html
Don’t learn AngularJS with jQuery in mind
http://www.rainweb.cn/article/angularjs-jquery.html
angularjs study notes
http://wangjiatao.diandian.com/?tag=angularjs
angularjs development guide
http://www.angularjs.cn/T008
angularjs English information
https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap
http://angular-ui.github.io/bootstrap
angular jq mobile
https://github.com/opitzconsulting/jquery-mobile-angular-adapter
angular ui
http://mgcrea.github.io/angular-strap
Experience in integrating jQuery Mobile+AngularJS
http://www.tuicool.com/articles/7ZZVr2
With jQuery background, how to use AngularJS programming ideas
http://blog.jobbole.com/46589/
AngularJS online tutorial
http://each.sinaapp.com/angular
angular study notes
http://www.zouyesheng.com/angular.html
React
React
Address
react.js Chinese Forum
http://www.react-china.org
react.js official website
https://facebook.github.io/react/index.html
react.js official documentation
https://facebook.github.io/react/docs/getting-started.html
react.js material UI
http://material-ui.com/#
react.js TouchstoneJS UI
http://touchstonejs.io
react.js amazeui UI
http://amazeui.org/react
React introductory example tutorial - Ruan Yifeng
http://www.ruanyifeng.com/blog/2015/03/react.html
React Native Chinese version
http://wiki.jikexueyuan.com/project/react-native
Webpack and React Little Book - Front-end Stew
http://www.html-js.com/article/Fakefish%203053
Webpack and React Little Book - gitbook
https://fakefish.github.io/react-webpack-cookbook
webpack
https://github.com/webpack/webpack
Webpack, 101 entry experience
http://html-js.com/article/3009
Webpack Getting Started Tutorial
http://html-js.com/article/3113
Exploring front-end engineering solutions based on webpack
http://segmentfault.com/a/1190000003499526
React original practical video tutorial
http://www.piliyu.com
vue
vue
address
Vue
http://cn.vuejs.org
Vue Forum
http://forum.vuejs.org
Vue Getting Started Guide
http://www.cnblogs.com/aaronjs/p/3660102.html
Some resource indexes of Vue
http://segmentfault.com/a/1190000000411057
awesome-vue
https://github.com/vuejs/awesome-vue
Mobile API
Mobile API
Address
99 mobile knowledge collection
https://github.com/jtyjty99999/mobileTech
Mobile front-end development knowledge base
https://github.com/AlloyTeam/Mars
Some pitfalls and solutions (appearance and performance) of mobile front-end
http://caibaojian.com/mobile-web-bug.html
【Original】Mobile web resource organization
http://www.cnblogs.com/PeunZhang/p/3407453.html
zepto 1.0 Chinese manual
http://mweb.baidu.com/zeptoapi
zepto 1.0 Chinese manual
http://www.html-5.cn/Manual/Zepto
zepto 1.1.2
http://www.css88.com/doc/zeptojs_api
zepto Chinese annotation
http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
jqmobile manual
http://app-framework-software.intel.com/api.php
Mobile browser development collection
https://github.com/maxzhang/maxzhang.github.com/issues
Mobile Development Hodgepodge
https://github.com/hoosin/mobile-web-favorites
jQuery
jQuery
Address
jQuery API Chinese Documentation
http://www.jquery123.com
hemin online version
http://hemin.cn/jq
css88 jq api
http://www.css88.com/jqapi-1.9/on
css88 jqui api
http://www.css88.com/jquery-ui-api
Learn jquery
http://learn.jquery.com
jquery source code search
http://james.padolsey.com/jquery
Web front-end resource summary (jQuery, Js, Css3, etc.)
http://www.cnblogs.com/jihua/p/webfront.html
D3
D3
Address
d3 Tutorials
https://github.com/mbostock/d3/wiki/Tutorials
Gallery
https://github.com/mbostock/d3/wiki/Gallery
lofter
http://datavisual.lofter.com/post/40cf3a_188e535
iteye
http://alanland.iteye.com/blog/1878595
ruanyifeng
http://javascript.ruanyifeng.com/library/d3.html
Requriejs
Requriejs
Address
Javascript modular programming (1): How to write modules
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript Modular Programming (2): AMD Specification
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
Javascript Modular Programming (3): Usage of require.js
http://www.ruanyifeng.com/blog/2012/11/require_js.html
Getting started with RequireJS (1)
http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
Getting started with RequireJS (2)
http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
RequireJS Advanced (3)
http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
requrie source code learning
http://www.cnblogs.com/yexiaochai/p/3632580.html
requrie Getting Started Guide
http://www.oschina.net/translate/getting-started-with-the-requirejs-library
requrieJS study notes
http://www.cnblogs.com/yexiaochai/p/3214926.html
requriejs one
http://cyj.me/why-seajs/requirejs/
require backbone combination
http://www.cnblogs.com/yexiaochai/p/3221081.html
Seajs
Seajs
Address
seajs
http://seajs.org
seajs Chinese manual
http://cyj.me/why-seajs/zh
Less,sass
Less,sass
Address
sass
http://www.w3cplus.com/sassguide
sass tutorial-sass China
http://www.sass.hk
Sass Chinese documentation
http://sass.bootcss.com
less
http://less.bootcss.com
Markdown
Markdown
Address
Markdown syntax description (Simplified Chinese version
http://wowubuntu.com/markdown
Markdown Getting Started Reference
https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook
https://www.gitbook.com Foreign online markdown can be edited into a book
mdeditor
https://www.zybuluo.com/mdeditor A domestic online markdown editor
stackedit
https://stackedit.io A foreign online markdown editor with powerful functions and cloud disk synchronization
mditor
http://bh-lay.github.io/mditor A lightweight markdown editor
lepture-editor
https://github.com/lepture/editor
markdown-editor
https://github.com/jbt/markdown-editor
Homework Blog
https://www.zybuluo.com has powerful functions, smooth speed, and synchronization across all platforms
Compatibility
Compatibility
Address
esma compatibility list
http://kangax.github.io/compat-table/es6
W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse
http://caniuse.com/#index
csscreator
http://csscreator.com/properties
microsoft
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
