介紹 codepen 的使用

1. 設計師的進擊http://codepen.io/
徐桃花 2015/06

2. jsfiddle.net
Jsfiddle

4. 沒有圖

6. 還是
沒有圖

7. 1.英文太差
2.不會搜尋
3.整理困難
Jsfiddle

8. github.com
GitHub

10. 當然不是
交給彼得

11. 題外話CodePen 也有Store

12. jsbin.com
Jsbin

15. 當然還有........

16. cssdeck.com
功能太陽春

17. 對不起，
很主觀
因為........

18. www.yr.com
我是
設計師

19. 那看點數據
http://voidcanvas.com/jsbin-jsfiddle-or-codepen-which-one-to-use-and-why/

20. 來說說主題吧

22. 1. CSS選項
CSS Base
包括Normalize.css、Reset.css，只需點擊一個單
選按鈕。
Vendor Prefixing
選擇 -prefix-free、Autoprefixer。
Quick-add
BootStrap、Foundation、Animate
CodePen有CSSLint通過整合你的CSS代碼搜索並
警告你，如果有錯誤，警告，瀏覽器的支持，等
等。

23. 2. HTML, CSS, and JavaScript 的寫法
HTML
Haml、Markdown、Slim、Jade
CSS
Less、SCSS、Sass、Stylus
JavaScript
CoffeeScript、LiveScript、TypeScript、Babel

24. 3. Emmet and 綁定 Vim
Emmet
https://codepen.io/floraya/settings#editor

25. 4.收藏和搜尋

26. 5. 不同的顯示方式
編輯視圖
這是默認，可以調整代碼預覽的大小和選擇要顯
示的語言。
詳情查看
可以看到筆的標籤，like，評論，分叉筆等，包含
了大部分的CodePen的社交功能。
全頁視圖
全屏幕的iframe中，只留下一個CodePen頁腳。
網頁視圖
全屏視圖，沒有iframe和CodePen頁腳容易。

27. 6. 崁入部落格
輕鬆快速地崁入到
自己的部落格

28. 跟一些厲害的人一起學習

29. The Most Hearted Pens of 2014

30. 參考網站
http://jenniferdewalt.com/index.html
http://voidcanvas.com/jsbin-jsfiddle-or-codepen-which-one-to-use-and-why/
http://codepen.io/2013/popular/10/

31. 聽說厲害的人都
要有小當家
打完收工，
感謝大家。