《CodePen》開啟瀏覽器就可開發網頁與即使預覽(jade、SCSS、jQuery)

梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)
  現在開發網頁愈來愈複雜,技術也愈來愈多元,所以現在也很少使用Dreamweaver了,幾乎都是用Sublime Text來開發,透過Sublime可開發各式各樣語言,無論是要寫SASS、LESS、Jade....都沒問題,但前題下就得自行手動安裝這些套件,才能開始感受到這些框架的便利性,但現在有個更簡單的方法,免安裝任何東西,只要打開瀏覽器,立即就可體驗到SASS、Jade的寫法,因此想了解SASS、Jade的寫法的朋友,現在也一塊來看看囉!

CodePen:
網站名稱:CodePen
網站網址:http://codepen.io/

Step1
當進入網站後,點一下左上方的NewPen,先建立一個專案。
梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)
Step2
接著就會看到編輯畫面,左邊是編輯區,右邊是預覽區,若要改變版面編排時,點右下角的小圖,就可切換排法。
梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)
Step3
梅干個人習慣,右邊寫code接著把右邊的css、js編輯視窗關閉。
梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)
Step4
接著點HTML旁的齒輪,再選擇Jade
梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)
Step5
這樣就可開始寫jade啦!
梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)
Step6
當要看原始碼時,只要按一下右上的眼睛,立即就會將的Jade的code轉成html啦!其實這一個平台,用途相當的多,也可將開發的專案,放到這網站中,並且分享出來,至若只是單純想了解一下SASS、jade的寫法時,這網站是最方便的,完全不用安裝任何的元件,直接開啟就能使用,且也無需註冊會員,相當的不錯,因此想了解一些新的網頁技術的朋友,也可多加善用這平台吧!
梅問題-《CodePen》開啟瀏覽器就可開發網頁(Jade、SCSS、jQuery)

相關文章

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Animate.css」讓Boostrap導覽列的下拉選單動起來

「Animate.css」讓Boostrap導覽列的下拉選單動起來

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。