網頁設計, 網頁資源

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

梅干2017/09/15
梅問題-免花錢!線上十大網頁設計教學資源網站一次收錄
  一直以來身旁有許多朋友常問梅干,有沒有什麼推薦的網頁設計的書,說真的梅干現在已很少買書,最主要的原因就在於,網路上的資源很多,且技術與觀點也會比較新、比較快,所以當梅干遇到任何問題時,往往上網谷哥一下,就會找到相關的資料,再加上現在許多技術文件都寫的相當的完整,甚至有些還有範例可參考,因此就可在短時間了解各屬性的用法與原理。
  說真的現在設計網頁,已不像十年前那麼的單純,只要會平面就會網頁,所以現在學習網頁的門檻愈來愈高,甚至要學習的技術也愈來愈多,從早期的HTML、CSS,到現在的HTML5、CSS3、jQuery、SASS、LESS......,還真的要會十八般武藝才行,,所以梅干就整理了一下,手邊幾個常去的網頁教學網站,讓學網頁的朋友,不妨可到以下這幾個平台,雖然原來的官網都是英文的,但卻有提供簡中版,所以英文不好也不用擔心,想學網頁的朋友,現在起不用再花錢買書啦!善用梅干為大家所整理的十大必備網頁教學網站,你也可以變成網頁高手!
一、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
連結網址:英文版 | 中文版

UAG軍規iPhone防摔殼