Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
設計師的進擊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
BootStra...
2. HTML, CSS, and JavaScript 的寫法
HTML
Haml、Markdown、Slim、Jade
CSS
Less、SCSS、Sass、Stylus
JavaScript
CoffeeScript、LiveScript...
3. Emmet and 綁定 Vim
Emmet
https://codepen.io/floraya/settings#editor
4.收藏和搜尋
5. 不同的顯示方式
編輯視圖
這是默認,可以調整代碼預覽的大小和選擇要顯
示的語言。
詳情查看
可以看到筆的標籤,like,評論,分叉筆等,包含
了大部分的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(設計師的進擊)
Codepen(設計師的進擊)
Codepen(設計師的進擊)
Codepen(設計師的進擊)
Codepen(設計師的進擊)
Codepen(設計師的進擊)
Upcoming SlideShare
Loading in …5
×

Codepen(設計師的進擊)

1,006 views

Published on

介紹 codepen 的使用

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Codepen(設計師的進擊)

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

×