Web front-end development is and other related development, recommended sublime text, Webstorm (jetbrains Company series products) The reason is that there is a technology called Emmet, Http://docs.emmet.io, and these two support for him is:
Sublime text is the only one that supports Emmet in all editors.
Webstorm is one of the only built-in Emmet in all editors and pushes the spirit of Emmet forward.
The Phpstorm,idea includes all Webstorm functions. Just Phpstorm is for phper, and idea is for javaer,webstorm for front-end er.
Their detailed comparison: http://www.36ria.com/5884
A. CSS tool:
1. Emmet http://docs.emmet.io/
A. Can be installed in the form of a plug-in dreamweaver,notepad++,editplus,sublime each editor.
Http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html
Http://www.qianduan.net/the-zen-coding-renamed-as-emmet.html
Http://www.qianduan.net/zen-coding-update-to-0-7.html
Http://www.qianduan.net/zen-coding-resources-to-update.html
Http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html
Effect of Emmet on sublime:
1). CSS: He differs from other editors in detail, such as the ctrl,alt+ key can be repaired and the value inside
2). HTML effect:
3). Sublime's Emmet Rule modification:
Packages->emmet->emmet->snippets.json
B. Only one exception Jetbrain company's product line: Webstorm,phpstorm,intellij idea is built-in and does not need to be installed.
1).
Write the effect of JS:
2). Webstorm Emmet Rules modified: Live Templates, Settings, Files
2. CSS compression method:
A. With the regular five-step substitution method, apply to any editor:
Http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html
B. Modular Tools
Two. JS Tool:
1. Compression, etc.:
Http://www.yulonghu.com/?post=5
Online compression
http://tools.css-js.com/
Online compression
http://tool.oschina.net/
Tool Set
2. Develop Js,php,jsp,java and so on in a emmet manner.
Http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html
Http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html
3. Use of the Firebug,chrome Debug tool:
http://ued.taobao.org/blog/?p=5534
Chrome debugging
Http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html
Debugging for Chrome
Https://developers.google.com/chrome-developer-tools/docs/commandline-api
Chrome console commands in a detailed
Http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html
Firebug Getting Started Guide
Http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html
Firebug Console Detailed
Https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
Chrome Mobile Debugging
http://www.seejs.com/archives/296
"Translate" remote debugging on Android
http://blog.jobbole.com/31178/
JavaScript performance analysis with chrome developer tools
Http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html
Use the Google Chrome browser to be the phone simulator
Http://www.cnblogs.com/xiaoyao2011/p/3447421.html
View Event Bindings
Chrome.exe--user-agent= "mozilla/5.0 (Linux; U Android 2.2; En-us; Nexus one build/frf91) applewebkit/533.1 (khtml, like Gecko) version/4.0 Mobile safari/533.1 "
http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/
Integrated Browser Development Tools
Http://ccforward.net/2013/02/firebug_console.html
About Firebug and Chrome's consoles
Http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles
Http://h5dev.uc.cn/article-25-1.html
Chrome Profiles
Http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html
Chrome artifact Vimium shortcut key learning record
http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/
Chrome Development Tools Workspace Use
4. JS Reference manual:
Brochure
5. Other development tools:
Beginner's recommendation: Editplus,vim
Team Development:
Webstorm, Phpstorm (Phper), Pycharm (Pythoner), IntelliJ Idea (Javaer).
Http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook
6. Modular Development Grunt
Http://www.gruntjs.org/article/getting_started.html
Entry
Http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows
Extension Tool Grunt
Http://www.gruntjs.org/article/home.html
Http://www.cnblogs.com/tugenhua0707/p/3497488.html
Front-end project building Tools---Grunt
Http://javascript.ruanyifeng.com/tool/grunt.html
Http://www.infoq.com/cn/articles/GruntJs
http://blog.segmentfault.com/frankfang/1190000000372612
Enjoy Grunt
Http://www.cnblogs.com/yexiaochai/p/3603389.html
Http://www.cnblogs.com/yexiaochai/p/3594561.html
Leaves-Chai first bomb
7. Gulpjs
Http://gulpjs.com
Website
http://www.tuicool.com/articles/n2Uj2y
Tutorial
Http://gratimax.github.io/search-gulp-plugins
Gulp Plugins
Https://github.com/gulpjs/gulp
Http://blog.segmentfault.com/laopopo/1190000000372547?page=1
Front-end build tool Gulp Getting Started tutorial
http://zhuanlan.zhihu.com/TLA42/19691575
GULP Another automated assembly line
III: JQ Tool
1. Oschina reference manual Daquan.
2. The W3c_all.chm,w3cschool offline version contains the javascript,jquery,php,sql,html,css2.x,3.x manual.
Web front-end development sharing-CSS,JS Tool Chapter