網頁設計教學課程推薦

完整前端自學資源分享

---

內容最後更新時間：2024-01-02

前言：網頁設計需求與日俱增

隨著網路發展，許多傳統產業漸漸將重心放到了網路上，有許多企業都想要架設一個自己的專屬網站。而當利用網頁製作平台架設網站後，想要讓網頁更有專業度，就會開始有網頁設計的需求。

有了網頁設計的需求，就導致有許多人想要學習「網頁設計」，去接這些企業的外包案件。我們可以在各種外包平台，或是接案社團中，看到相關的需求。

這一篇文章，我將會幫你整理眾多的網頁設計教學資源，會包含付費課程及免費自學的內容，想要幫助無論是想要自己架設網站，還是接案幫企業製作形象官網的人，有個管道可以進行學習。

接下來的內容都有經過篩選，網頁設計新手或資深工程師，都能夠從中找到適合自己的學習資源。

延伸閱讀：網路自學管道有哪些？5個幫助我學習新知識的地方

想追蹤更多「學習」新知，歡迎關注：
1. 線上課程/平台優惠折扣整理 (持續更新)
2. 跟著DEAN學一點 Facebook社團
3. 跟著DEAN學一點 LINE社群
4. 線上學習文章統整頁

各種網頁設計學習資源比較

網頁設計課程與學習資源非常多，除了要選對你想學習的程式語言外，更要熟悉講師的教學方式，因為學習網頁設計更著重在「理解」，所以聽懂真的非常重要。

這個部分就會需要多去體驗看看，以下用個簡易的表格比較，幫助你做選擇。

	線上課程 (中文)	線上課程 (英文)	免費資源 (中文)	免費資源 (英文)
平均花費	中	高	無	無
學習彈性	高	中	高	高
師生互動	差	中	差	差
學習成效	佳	佳	中	中
結業證書	部分有	部分有	無	無

網頁設計教學課程推薦(付費為主)

#1 六角學院

如果你對網頁設計有興趣，相信對於「六角學院」應該不陌生，畢竟它是一個前端工程師的搖籃。

課程中會先教我們如何利用 HTML、CSS 以及 jQuery 來進行網頁的製作與設計，最後用 Bootstrap 加快開發的速度，提升 CSS 的可用性。

與其他平台不同的地方在於，六角學院不僅只服務一般消費者，目前更與 Hahow 合作，推出了 六角學院 x Hahow for Business 企業課程方案，以利企業培養更多數位轉型的人才。

值得一提的是，六角學院的助教團隊非常充足，學員可以不斷的提交作業，提高自己作品的完成度，以提升自己設計的邏輯。

而且，課程社群的互動氣氛很好，整體回覆效率很高，講師會很認真的回答所有學員的問題，如果你是新手，對於新手來說非常友善，不怕問一堆問題被已讀不回。

#2 學米 Xuemi

學米是一個線上教育品牌，針對「行銷設計」提供相對應的學習資源，像是：UI/UX 設計、網頁前端設計、平面設計、2D動畫、3D動畫、影音自媒體等。

課程類型有像是私塾班、學分班、先修班等，最核心的會是私塾班，是根據每個學員狀況客製化的一套培訓課程，並且會安排業師與學員一對一諮詢，提供真實業界的資訊與建議。

在課程中，會以團隊的形式陪伴學員學習，像是會有：學習嚮導、領航員、小幫手、講師、業師，每個職位都各司其職，學員能夠獲得最完善的學習體驗。

如果你對於學米有任何好奇的部分，歡迎閱讀我撰寫的學米評測心得文，會完整與你分享我實際上過課後的心得，並告訴你怎麼樣能夠有最佳的學習效果。

#2 HISKIO

HISKIO 教學平台，專注提供「程式資訊」領域的內容，比如，網站前端、物聯網、手機應用人工智慧等，獲得獲得創夢市集、遊戲橘子、新光金控創投等肯定與投資。

目前已累積超過 300 堂以上的線上課程，幫助工程師以及想學程式的大眾，可以線上自學，進而與合作企業對接，並且成功轉職。

除此之外，他們更提供免費、付費電子書，透過規格化教材、專業的師資，以及友善的學習環境，希望能替轉職與進修的人減少學習的冤枉路。

有上過課的學員表示，HISKIO 的課程淺顯易懂、架構完善，講師的講解由淺入深，再搭配範例，更容易理解，教得比補習班還要實務，學到的內容也可以應用在工作中。

因此，如果你對網頁設計、程式開發等資訊領域有興趣，不妨可以參考看看 HISKIO 平台的內容。

#3 動畫互動網頁程式入門 (HTML/CSS/JS)

這堂課是由墨雨設計創辦人吳哲宇在 Hahow 開設的課程，他希望能透過這門課，幫助網頁設計師與程式設計師之間的溝通順利，並且讓網站開發達到預期的成果。

課程會先從最基礎的 HTML、CSS、JS 教學，再慢慢教我們如何設計網頁，所以我覺得，這堂課很適合完全沒有程式語言基礎的人。

這堂「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，更有超過一萬名學員購買，有上過課的學員認為，老師的教學節奏偏慢，因此新手不用擔心自己跟不上課程的進度。

此外，這門課還有分享許多不錯的網路資源，對於剛開始學習網頁設計的人很有幫助。

#4 動畫互動網頁特效入門 (JS/CANVAS)

一樣是吳哲宇老師的課程，兩堂課的差異在「動畫互動網頁程式入門」是教你如何應用基礎程式設計網頁，而這堂「動畫互動網頁特效入門」則是進一步教你更進階的酷炫特效。

如果你不清楚這堂課是否適合你，你可以參考 Awwards 網頁的設計，並且思考其中的經典特效與互動式設計是否為你想要的。

課程的程式語言主要是以 JS 以及 Canvas 進行教學，內容主要分為四個重點：

• 使用 HTML與 CSS 基礎程式設計網頁，並運用 Flexbox 了解現在前端工程設計的趨勢。
• 使用 JS 導入函數、物件導向等技巧，教大家做出可以互動的程式。
• 使用 Canvas 製作更具美感的網頁，並且結合 JS 的邏輯，製作各種不同的網頁特效。
• 使用 Vue.js 處理一些需要即時更新的資料，並且把它視覺化。

大家也不用太擔心課程的難易度很高，老師還是會從最基本的設計、切版、前端功能來做講解，不過，如果已經有一定網頁設計基礎的底子了，這的確是一堂可以提升個人技能的課程喔。

#5 透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面

這堂課是由卡斯有限公司創辦人張互賓在 TibaMe 所開設的課程，他曾經有在中視、華視、Yahoo! 等企業任職過，並且於 2013 年成為網路前端的自由工作者。

這門課分為上下兩集，上級主要會教我們如何利用 HTML、CSS 製作最基本的網頁，還會提供大量的練習，因此很適合新手學習；而下集則屬於進階教學，教我們如何美化網頁，製作更多互動介面。

課程編排都是由老師多年的接案與教學經驗所設計的，你可以透過這堂課學到基本的 HTML、CSS 概念，還能學習到進階的網格排版、多欄式排版、轉場效果、動畫效果等。

課程會將每個單元的時間控制在 10 分鐘左右，方便大家可以利用零碎的時間上課，如果你是上班族、或是課業繁重的學生，並且想從事網頁設計工作，這堂課不妨可以參考看看。

#6 Adobe Xd設計實務｜成為UI設計師的8項核心技能

這門課程，是由 Monospace 的共同創辦人林育正在 Yotta 所開設的，他不但擁有非常豐富的講師經驗，現在更是 Adobe Xd 官方的合作講師。

課程教學主要以 Adobe Xd 來做教學，其中最大的優勢在於，我們可以跟 Adobe 自家的產品 Photoshop 與 illustrator 合併使用，因此，如果你已經熟悉 PS 和 AI 了，這門課也許會很適合你喔。

此外，老師還會完整地分享要成為 UI 設計師需要具備的條件，並且教我們學會 WireFrame 的線框草稿、網頁視覺，以及文字編排等設計，讓學員可以實際地設計出一個網頁。

#7 Build Responsive Real-World Websites with HTML and CSS

Jonas Schmedtmann 為一名網頁開發人員與設計師，他在 Udemy 所開的課程，不但深受許多學生的喜愛，更被列為頂級講師之一，

在這堂的課程中，他希望可以用簡單易懂的方式讓學生理解內容，並且學會 HTML、CSS、設計草圖、建立並優化網站，以及響應式設計。

你不需要有網頁設計的經驗，更不需要付費買任何軟體，將近 38 小時的課程，再搭配課堂中超過 10 個的應用練習，幫助你扎實地學會如何設計出一個引人注目的網頁。

這堂課目前已經有 30 萬位學員加入，他們一致認為，Jonas 的口條非常清晰，課程內容深入淺出，儘管你完全不懂程式，通過這堂課，也能清楚地了解網頁的設計原理。

#8 Front End Development Nanodegree

這堂在 Udacity 的前端開發課程，為了有效學習網頁設計與開發的技能，會讓我們先了解基本的 HTML、CSS、JavaScript，接著學習如何利用 CSS、Flexbox、CSS Grid 建立響應式網站，以及使用 JavaScript 和 HTML 開發交互式網站以及 UI 應用程式。

該堂課屬於進階課程，平均每週需上 5-10 小時，並且長達四個月。

此外，值得注意的是，如果你加入 Udacity 課程，我們會獲得以下福利：

• 與頂級公司合作，執行真實專案，掌握公司所需的技術
• 向專業導師諮詢，及時回答問題，幫助我們學得更順利
• 提供職涯服務，優化 LinkedIn 個人資料，幫助我們獲得更高的職位與收入
• 彈性的學習計畫，量身幫我們制定學習計畫，讓我們可以按照自己的學習進度，規畫出適合自己時間表，進而實現個人目標

根據學員表示，這個課程很有挑戰性，工作量很大，但學習很有成效，因此推薦給有預算，並且堅定想要從事網頁開發的人。

#9 W3Cx Frontend Developer Program

edX 是一個由麻省理工學院和哈佛大學建立的開放線上課程平台，提供大家能夠透過該管道，獲得大學教育的水平及微碩士學位。

這堂「W3Cx 前端開發」課程，會教導利用最新的網站設計原則設計網頁，並且學會 HTML5、CSS、JavaScript 概念與實作，以及繪製網站圖形、動畫、音樂等元素，課程內容相當扎實。

倘若你加入課程，不但可以獲得專家的指導、自訂學習進度 ( 每週需學 5-7 小時，長達七個月 )，最終更可以獲得「前端 Web 開發人員專業證書」。

#10 Web Design for Everybody

Colleen van Lent 為密西根大學講師，致力於提供網路科技的相關教育，因此開設了許多關於程式設計與網頁開發的課程，目前更為中小學生出版關「HTML 網頁設計」的兒童讀物。

這堂在 Coursera 上的課程，目前已經擁有 24 萬學員加入。我們可以從中學會 CSS、HTML、JS，以及利用 DOM 修改頁面、透過響應式設計，使網站可以跨裝置顯示等。

學員表示，你完全不需要有任何專業基礎，每週學 3 小時，並且持續大約 6 個月，便可以在 Linkedin 上展現你的證書，進而在工作中脫穎而出。

Coursera 是由大學跟企業所開課，因此課程完整度很高，從理論、實作、到補充教材都提供的很完整。如果你有興趣，不妨可以免費試看，並且在 7 天內決定這門課是否適合你。

#11 Google UX 設計專業證書

這堂課提供超過 200 小時的教學與數百個實作練習，幫助學員們在學習後不到 6 個月，就能擁有工作技能，內容包含網頁設計流程、UX、用戶體驗、Figma 等教學。

目前已經有 40 萬學員加入，你不需要相關學位或經驗，即可學會如何從無到有設計網頁、尋找用戶痛點、設計解決方案、建立原型、測試設計、反饋迭代等。

該堂課建議學習時間為每周 10 小時，共 6 個月。若想扎實地學習網頁設計，不妨參考這個培訓。

網頁設計免費自學資源

#1 CSScoke – YouTube

身為五倍紅寶石講師的 CSS 可樂，活躍於台灣各大技術研討會，擅長 HTML & CSS、Bootstrap、RWD 等，為國內知名前端技術講師。

2018 年成為 Youtuber，主要分享網頁技術與網頁設計的技巧，希望能透過簡單易懂的方式，讓新手能夠輕鬆學習前端開發技能。

他更在 iT 邦幫忙鐵人賽連續三屆冠軍、連續兩屆優選，並於 2020 出版「金魚都能懂的 CSS 選取器：金魚都能懂了你還怕學不會嗎」一書。

如果你對網頁設計感興趣，但沒有任何經驗與專業知識，我很推薦你可以看他的系列影片，例如：《新手網頁教學系列》、《網頁教學》以及《網頁切版教學》等。

個人心得

原本我以為寫程式語言很難，不過站長可樂的教學影片居然能讓我這個初學者聽得懂他在說什麼，非常符合他的頻道名稱「金魚腦都能懂網頁設計入門」。

可樂講話清晰不死板、內容架構有邏輯，更會用最淺顯易懂的方式教學，講解的非常扎實，細節也會特別解釋，不會含糊帶過，更有網友稱讚他「完勝一堆坑人課程」。

除此之外，他有別於傳統的教學方式，不會教我們很多艱深的概念與理論，而是實際教我們如何從無到有做出網頁，讓我們邊做邊學。

因此，我認為這個 Youtube 頻道適合：

• 對網頁設計有興趣的初學者。
• 已有網頁設計的基礎與經驗，卻一直碰壁的人。

我只能說，站長可樂將這些內容免費分享給大家學習，真的非常的佛心，未來如果我想再精進網頁設計技能，其實還滿意願上他的付費課程的。

#2 GrandmaCan 我阿嬤都會 – YouTube

2020 年創立的「我阿嬤都會」Youtube 頻道，主要分享 HTML、CSS、JS 等網頁設計教學。

如果你是網頁設計的初學者，可以先看他的系列教學，沒有生硬的理論，淺顯易懂的方式直接演示給我們看，網頁設計基本元素、語法、環境建置與設定等教學，內容都非常的完整。

更有網友稱讚這個教學「對新手超級友善」，並且「很適合編入到義務教育的教材中」。

個人心得

雖然我不會任何程式語言，意外的是，我竟然聽得懂這個頻道在教什麼。

講師用簡單的方式，分享 HTML、CSS、JavaScript 之間的關係，分別製作詳細的完整教學，還直接開啟範例網站，實際與我們演示他想表達的重點，讓我們更容易理解他在做什麼。

講師最常說：「不要擔心它們很難。」致力於為初學者提供網頁設計教學，確實將原本我以為很艱深的程式語言，講解得非常簡單又扎實。

因此，我還滿建議你可以先將這個頻道的免費教學看完，等你有一定底子後，如果想再精進相關技巧，到時候再付費學習也不遲。

#3 Flux – YouTube

Flux 的創辦人 Ran Segall，為一名網頁設計的設計師，他曾經花了幾萬美元去正規設計學校，花了超過四年的時間學習網頁設計，因為他認為倘若不這麼做，在成為設計師的道路上，不會有專家協助，也沒有社群可以相互扶持。

身為自由工作者的他，在 2015 年成立 Youtube 頻道 Flux，致力於「如何成為一名網頁設計師，並以此謀生」相關內容。

在「網頁設計系列課程」中，它不同於上述的頻道，主要是教我們如何「設計網頁外觀」，並且網站透過程式開發 ( 比如 Wix )，或者是內容管理系統 ( 比如 WordPress )，將網站上線。

在「自由工作指南」中，則與我們分享，身為網頁設計師，「該如何找到客戶，並且提升你的收入」，比如，如何和客戶報價、是否需要租借辦公室、如何利用 Fiverr 等接案平台等。

個人心得

我認為，Flux 很適合給：

• 想學習如何設計網頁外觀的人
• 想要成為自由接案設計師的人

雖然 Flux 為國外頻道，但我覺得他的教學容易理解，頻道的主題分類非常明確，影片更新的速度又很快，內容根本學不完。

其中讓我很印象深刻的是，他對於「自由工作者是否要在 Fiverr 等平台上接案」的看法，與目前中文看到的內容不太一樣，更符合市場趨勢，提升了我的國際視野。

因此，如果你想成為網頁設計師，並且想成為自由工作者，非常建議你看他的頻道。

#4 Easy Tutorials – YouTube

Easy Tutorials 主要是希望可以提供簡易的教學，教導大家學設計網頁、建立部落格、數位行銷等。

在「UI 網頁設計課程」中，主要是教我們如何利用 Adobe XD 進行網頁的 UI 設計。

在「HTML和 CSS 的新手入門課」中，則與我們分享如何利用 HTML 與 CSS，從無到有製作出一個網站，以及設計特殊功能與樣式。不論是旅遊網站、求職網站、個人履歷等，頻道中都有詳細教學。

個人心得

講師雖然是印度人，講話的口音會有點不習慣，不過我很喜歡他會先開起一個範例網站，再透過逐步拆解網站介面中的圖示、文案、選單等，告訴我們這些功能的程式邏輯、網站架構。

初步講解完網頁設計的概念後，接著就會開始帶著我們實際操作，一步步製作出屬於自己的網站。

如果你想學習如何製作多種類型的網頁，不妨可以參考 Easy Tutorials 的教學。

#5 Online Tutorials – YouTube

成立於 2013 年的 Online Tutorials，主要提供響應式網站設計、CSS、Javascript、HTML，以及 UX 與 UI 設計等內容。

這個頻道的影片超多，主題也分類的非常詳細與完整，比如，如何設計價目表、選單、評論樣式。

特別的是，他還有分享像是 Google、星巴克、Netflix 等知名企業的網站，是如何利用程式語言設計出來的。

不過，我覺得比較可惜的地方在於，Online Tutorials 主要是以「畫面」進行教學，沒有任何人在旁講解，因此對於沒有程式基礎的人而言，可能會比較有難度。

個人心得

頻道雖然會一步步操作，帶我們如何從零到有製作出一個網站，但在教學沒有人聲解說的狀況下，對於不會程式設計的我而言，會看不太懂。

不過影片的主題非常豐富，內容非常實務，更教我們如何拆解其他的網站設計，因此我覺得這個頻道比較適合給對網頁設計有一定基礎的人。

#6 Webflow – YouTube

Webflow Uvniversity 隸屬於「提供網站架設服務」的 Webflow，分享了許多關於 CSS、網站設計、電商架設等，教學都是免費。

其中「自由工作者的網頁設計訓練營」這堂課會教你如何跟客戶提案、提升收入、設計網頁，課程架構非常完整，你只需要按照順序學習即可，如果你想成為自由工作者，這堂課會滿適合你的。

另外還有「21 天設計形象網站」課程，教你從頁面的製作、SEO 設定、404 頁面設計、網站配色，到最後網站的上線，一步步教你如何開始。

個人心得

我覺得這個頻道的影片設計非常用心，講師的聲音很像頒獎典禮的旁白，會讓人想一看再看 XD

而且 Webflow University 還另外架設網站，將所有上架到 Youtube 的影片統整在一起，不但能讓我們很清楚地選擇想要的課，而且課程都是免費的，真的非常佛心。

不過他們的內容大多都是環繞在「如何利用 Webflow 建立網站」，然而 Webflow 對於完全不懂網頁設計的人而言，可能會比較吃力，因此建議會一點程式語言的人再看這些教學，可能比較適合。

#7 Smashing Magazine – 部落格

Smashing Magazine 於 2006 年在德國成立，專注提供生產力、網頁設計與開發技能相關內容，進而幫助我們實現工作與生活的平衡。

他們的團隊雖然小，但只提供高質量的文章，內容專業，但不死板，不論是 UI、CSS、HTML 等教學，都非常完善。

除了文章以外，他們更提供其他多種服務，包括專家線上研討會、67 種電子書、工作委員會 ( 幫助設計師和開發人員找到好工作 )，是個很不錯的學習管道。

如果你想即時收到最新資訊，也可以訂閱他們的電子報。

學習網頁設計常見問題

結論：網頁設計該如何自學？

以上就是跟大家分享的網頁設計教學資源，希望這對想開始學習網頁設計幫助自己接到更多案子，或未來想要從事相關工作的你，有所幫助。

個人認為，不論是免費或付費資源，目前關於網頁設計的內容都算滿豐富的，想要自學絕對是沒有問題的，我相信現在很多坊間高手也都是靠著自學而逐漸變專業的。

自學最重要的，就是要化「輸入」為「輸出」，實作永遠都會比單純聽理論重要。你可以嘗試找個部落格平台，當作學習筆記，紀錄下自己的學習過程。

如果你對於自學技巧有興趣，過去我有寫過一篇文章，分享我個人的自學方法，歡迎閱讀：在家自學有什麼技巧？多年學習經驗談與資源分享。

線上課程/平台相關優惠資訊

• 線上課程/平台優惠折扣整理 (持續更新)
• 跟著DEAN學一點 Facebook社團
• 跟著DEAN學一點 LINE社群
• 線上學習文章統整頁

線上課程/數位學習相關文章

【手機版 表格資訊在下方】