狠狠撸

狠狠撸Share a Scribd company logo
設計師的進擊http://codepen.io/
徐桃花 2015/06
jsfiddle.net
Jsfiddle
颁辞诲别辫别苍(设计师的进击)
没有图
颁辞诲别辫别苍(设计师的进击)
還是
没有图
1.英文太差
2.不會搜尋
3.整理困難
Jsfiddle
github.com
GitHub
颁辞诲别辫别苍(设计师的进击)
當然不是
交給彼得
題外話CodePen 也有Store
jsbin.com
Jsbin
颁辞诲别辫别苍(设计师的进击)
颁辞诲别辫别苍(设计师的进击)
当然还有........
cssdeck.com
功能太陽春
對不起,
很主觀
因為........
www.yr.com
我是
設計師
那看點數據
http://voidcanvas.com/jsbin-jsfiddle-or-codepen-which-one-to-use-and-why/
来说说主题吧
颁辞诲别辫别苍(设计师的进击)
1. CSS選項
CSS Base
包括Normalize.css、Reset.css,只需點擊一個單
選按鈕。
Vendor Prefixing
選擇 -prefix-free、Autoprefixer。
Quick-add
BootStrap、Foundation、Animate
CodePen有CSSLint通過整合你的CSS代碼搜索並
警告你,如果有錯誤,警告,瀏覽器的支持,等
等。
2. HTML, CSS, and JavaScript 的寫法
HTML
Haml、Markdown、Slim、Jade
CSS
Less、SCSS、Sass、Stylus
JavaScript
CoffeeScript、LiveScript、TypeScript、Babel
3. Emmet and 綁定 Vim
Emmet
https://codepen.io/floraya/settings#editor
4.收藏和搜寻
5. 不同的顯示方式
編輯視圖
這是默認,可以調整代碼預覽的大小和選擇要顯
示的語言。
詳情查看
可以看到筆的標籤,like,評論,分叉筆等,包含
了大部分的CodePen的社交功能。
全頁視圖
全屏幕的iframe中,只留下一個CodePen頁腳。
網頁視圖
全屏視圖,沒有iframe和CodePen頁腳容易。
6. 崁入部落格
輕鬆快速地崁入到
自己的部落格
跟一些厉害的人一起学习
The Most Hearted Pens of 2014
參考網站
http://jenniferdewalt.com/index.html
http://voidcanvas.com/jsbin-jsfiddle-or-codepen-which-one-to-use-and-why/
http://codepen.io/2013/popular/10/
聽說厲害的人都
要有小當家
打完收工,
感謝大家。

More Related Content

颁辞诲别辫别苍(设计师的进击)