1、SVG在线制作编辑预览工具
SVG在线制作编辑预览工具 ： https://www.bejson.com/ui/svg_editor/ （里面包括很多前端常用的工具）
http://www.gaituba.com/svg/ （里面包括很多前端常用的工具）
SVG WEB在线编辑器 ： http://www.86y.org/demo/svg/
2、CSS3 一些动画，转换的效果，应该是有在线工具可以生成代码的。（网上找找看）
http://www.css88.com/tool/css3Preview/Transform.html
3、flex弹性布局 在线预览效果
· http://www.css88.com/demo/flexbox-playground/
4、CSS3 动画
http://jeremyckahn.github.io/stylie/
http://www.25xt.com/html5css3/14308.html （这里有各种动画的在线工具，包含有CSS3动画的库）
5、可视化的正则表达式编辑工具 ： https://www.csdn.net/article/2014-11-27/2822843-tools?reload=1
在线正则表达式测试 ： https://c.runoob.com/front-end/854
http://tools.jb51.net/tools/regex.asp (这个正则表达式测试包括m，换行的匹配)
6、CSS选择器 nth-child的演示 ： http://nthmaster.com/
7、HTML5 Video Events and API ： https://www.w3.org/2010/05/video/mediaevents.html
8、JSON在线编辑器 ：http://www.bejson.com/jsoneditoronline/
9、RGB颜色值与十六进制颜色码转换工具 ：https://www.sioe.cn/yingyong/yanse-rgb-16/
10、javascript 变量名 正确与否 检测网站：https://mothereff.in/js-variables
11、前端代码在线演示的网站：
a、codepen：https://codepen.io/pen
使用教程：
1、外联的 css 和 js 都可以在 setting 上设置。不需要在html区域写。界面上的 html 输入区域，是写 body标签里面的 内容的。
2、通过 在 setting 上配置，可以使用 css 预处理器，和 es6
b、jsfiddle
注：前端有一些工作是不需要自己非常熟练去使用的，有的工作非常简单但是很浪费时间，这些工作大部分是可以利用在线工具帮我们很快解决的。
如：1、json数据的生成；2、CSS3的动画以及转化，如果要自己去写代码，常常需要去看文档比较浪费时间（因为不常用），这个时候可以借助在线工具，跳到自己需要的效果，看CSS样式都有哪些；等等。