身為網頁設計人員，對於CodePen這平台應該不陌生，在CodePen平台中，有許多熱心的網友，將各式各樣的網頁特效，放到CodePen這平台中，同時CodePen除了能完整的顯示網頁原始碼外，甚至還能即時的預覽結果畫面，以及將網頁的特效範例，以iframe的方式，嵌入到自己的網頁中，由於CodePen這平台中，有成千上萬各式酷炫的網頁特效範例，因此每當梅干卡關時，就會到CodePen中來挖寶。
在CodePen這平台中，支援的語法相當多，因此當找到的範例，是用SCSS或是Jade時，就得再進行編譯後才能使用，甚至有些範例，引用到外部的Javascript時，就得一一的將引用的資源給下載回來，其實CodePen中，除了提供搜尋的功能外，還有封裝的功能，可將找到的範例直接壓縮成ZIP檔，因此不知道的朋友，現在也一塊來看看，如何善用CodePen這個資源庫吧！
Step1
當進到CodePen的平台後，點右上的搜尋圖示。
Step2
再輸入要查尋的關鍵字。
Step3
接著就會列出，相符的範例縮圖。
Step4
點一下，進入後，上方分別會有HTML、CSS、Javascript，而下方就會即時的顯示結果畫面，因此當要把這範例整個打包下來時，按一下右下的「Export」鈕。
Step5
再選擇「Export.zip」選項。
Step6
接著將下載回來的檔案解壓縮，分別就會看到所有範例的原始檔。
Step7
當雙響index.html檔，就可看到剛在CodePen中的範例啦！是不是超方便的呀！因此下回當在CodePen找到喜愛的範例時，不妨可試試此方法，將範例給打包給下載回來囉！
