【網頁設計】CodePen｜一窺設計成品特效與源碼
許多前端工程師會將自己的網頁元件成品(Pen)擺放在CodePen上，不僅能看得到showcase實作的效果，更是連HTML、CSS、Javascript都一覽無遺，能夠透過閱讀別人的Code，看他們是怎麼完成一個吸睛的效果，來汲取經驗、吸收靈感。
從CodePen.io的首頁主要可以看到幾個主體：
這裡的好處是可以修改上方Code來改變互動，即時察看下方效果，方便學習或了解其他人的對於三個區塊的程式編排方式。若著重視覺效果，如簡單線條、幾何、文字、色彩，或是IO互動，如捲動、點選等等，就仔細閱讀CSS與JS，或是改寫操作，找尋重要的地方學習精隨。
比如此範例，自動依據時間變化的畫面流程、使用下拉捲動(scroll)時的網頁內容改變(transform)，利用伸縮(scale)、旋轉(rotate)的前後景效果，或游標懸浮(hover)的醒目提示。
→ 如同這個個人連結展開效果（前端設計師XiChen所做，同樣出自CodePen）
當初會看到CodePen，單純只是對前端設計很有興趣，一邊在修台大新聞所網頁設計與敘事這門課時，想看看厲害的CSS、JS元件找找靈感，透過幾篇技術文章一看，發現這些設計師都將作品放置到到CodePen，也覺得程式碼並排的方式讀起來很方便。
閱覽CodePen Project的過程中，看到指標人物Waldo Broodryk的網頁專案皆採用Webflow來製作，而在Webflow網站的blog也可以見到針對前端設計的概念性文章。之後有機會我會介紹Webflow如何刻劃一個完整網頁，處理元件互動並匯出。
從CodePen.io的首頁主要可以看到幾個主體：
- Pen：最主要閱讀元件Source Code與效果呈現如何互動的地方
- Project：如何刻劃出一個完整網頁
- Post：專業front-end engineers撰寫的文章（Ex: The Art of CSS Illustration）
- Collections：整理過的Pen集合，把來自不同設計者，但與主題相關的Pen放在一起。
- Ex: My HexaPens放置各種六角形、Daily CSS Image放置純用CSS做成的圖。
閱讀Pen版面
CodePen的擺置非常方便閱讀，上頭三個欄位是網頁生成的三元素，HTML管排版、CSS管樣式、JS管互動，下方則是效果呈現處（範例如下圖）。 |
| [CodePen 即時修改互動] |
瀏覽Project管理
可以看到Engineer對大網頁的撰寫方式，了解資源編排架構（index, css, js, src），還有UX操作方式與視覺流暢性等等。 |
| [Codepen Project瀏覽template] |
心得
早期看到別人擺放個人相關連結的時候，通常是放置Facebook、Twitter、RSS等社交平台或是訂閱相關的連絡資訊。近期更是慢慢開始見到會放置Medium、Github、CodePen等等技術文章部落格以及專案完整源碼，利用這些平台來放置作品集。→ 如同這個個人連結展開效果（前端設計師XiChen所做，同樣出自CodePen）
當初會看到CodePen，單純只是對前端設計很有興趣，一邊在修台大新聞所網頁設計與敘事這門課時，想看看厲害的CSS、JS元件找找靈感，透過幾篇技術文章一看，發現這些設計師都將作品放置到到CodePen，也覺得程式碼並排的方式讀起來很方便。
閱覽CodePen Project的過程中，看到指標人物Waldo Broodryk的網頁專案皆採用Webflow來製作，而在Webflow網站的blog也可以見到針對前端設計的概念性文章。之後有機會我會介紹Webflow如何刻劃一個完整網頁，處理元件互動並匯出。
留言