網頁開發 網頁設計

免花錢!網頁前後端設計,必備的十大免費教學網站

2017/09/15
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

一、W3CSchool(HTML、CSS、jQuery..)
W3CSchool是目前內容最豐富,資料最完整的網頁教學平台,裡面所提供的網頁技術也相當的完整,從基礎的HTML、CSS到jQuery、PHP應有盡有,而該平台也有提供中文版語系,是所有學習網頁必備的網站之一。

梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄
網站名稱:W3CSchool
連結網址:英文版 | 中文版

二、MDN web docs(HTML、CSS)
MDN與剛的W3CSchool差不多,只不過在MDN裡面都以網頁前端技術為主,同時是由知名瀏覽器Mozilla Firefox公司所成立的,雖然資料相當完整,但中文翻譯的部分,還尚未很完整。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄
網站名稱:MDN web docs
連結網址:英文版 | 中文版

三、jQuery

jQuery是目前相當主流的Javascript Framework,在官網的文件中,就會針對每個可用的屬性,有盡細的解說,甚至也有提供教學範例可參考,透過jQeury可讓網頁變得更炫、更活潑。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:jQuery
連結網址:英文版 | 中文版

四、SASS(CSS)

SASS是CSS的一種框架,透過SASS讓在編寫CSS變得更有效率,同時也較易管理,但編輯完畢後,需編譯過後,才能放到網站上使用,在網站中,有SASS相關的寫法規則,以及編譯的方式。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:SASS
連結網址:英文版 | 中文版

五、LESS(CSS)
網站名稱:LESS
連結網址:英文版 | 中文版

LESS與SASS差不多,但透過LESS可以線上即時就編譯,無需再進行轉檔,像是大家所熟悉的Bootstrap也透過LESS所開發的。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄


六、Bootstrap(RWD CSS)

Bootstrap是目前相當受歡迎的RWD元件之一,透過Bootstrap可以快速的設計出RWD網頁,同時內建了許多網頁互動特效可使用,像是滾動頁籤、廣告輪播、漢堡選單….,在網站中,也有各元件的範例以及網格系統的應用。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:Bootstrap
連結網址:英文版 | 中文版

七、Gulp(專案管理)

Gulp是網頁前端必備的套件之一,透過Gulp可以有效的管理你的網頁專案,甚至將專案進行壓縮與編譯。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:Gulp
連結網址:英文版 | 中文版

八、Yarn(專案管理)

Yarn也是一套專案管理工具,透過Yarn讓執行的效能快速、更簡單,在網站中,也有詳細的安裝方法與操作設定。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:Yarn
連結網址:英文版 | 中文版

九、PHP(後端語言)

PHP是一個網頁後端語言,透過PHP可以快速的與資料庫作溝通,像是大家所熟悉的WordPress、Joomla、Opencart….都是用PHP所開發出來的,在PHP官網中的文件,也相當的完整。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:PHP
連結網址:英文版 | 中文版

十、Node.js(後端語言)

Node.js與PHP一樣,都屬於後端語言的一種,透過官網中,有詳細的說明,要如何佈署Node.js的環境,以及相關的寫作規則。
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄

網站名稱:Node.js
連結網址:英文版 | 中文版