網頁設計教學課程推薦，完整前端自學資源分享【2025最新】

當利用網站架設平台架設完網站後，想要更有專業度，就會開始有網頁設計的需求，導致許多人想要學習「網頁設計」，去接這些企業的外包案件。

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

網頁設計要學什麼？

想學網頁設計，可能會感到迷惘：「到底要學哪些技能？一定要會寫程式嗎？」以下是常見的學習重點整理：

1. 介面與版面設計 (UI Design)

• 學習如何排版、配色、使用字型，讓網站看起來清晰、美觀、易讀。
• 常用工具：Figma、Adobe XD、Sketch。

2. 使用者體驗設計 (UX Design)

• 理解使用者的行為與需求，設計流程順暢的網站動線。
• 包括 wireframe（線框圖）、使用者流程圖、可用性測試等。

3. 網頁切版與前端開發基礎

• 將設計轉成可以操作的網頁，會接觸 HTML、CSS，有時也會碰到 JavaScript。
• 不用一開始就精通程式語言，但基本的排版與樣式設定建議還是要懂。

4. 響應式設計 (Responsive Design)

• 學會讓網站在手機、平板、電腦等不同裝置上都能正確顯示。

5. 網站架設與實作工具

• 初學者可以使用 no-code 平台 (如 Webflow、Wix、WordPress) 快速上手。
• 進階者則可以學 Git、網頁部署、CMS 系統等。

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

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

以下用個簡易的表格比較，幫助你做選擇。

	線上課程 (中文)	線上課程 (英文)	免費資源 (中文)	免費資源 (英文)
平均花費	約 NT$1,000～3,000	約 NT$2,000～6,000	無需付費	無需付費
學習彈性	高，自由安排進度	中，多為預錄影片	高，但需自律	高，資源分散、需篩選
師生互動	有留言區或社群可提問	部分平台支援討論區	幾乎無互動	幾乎無互動
課程深度	中等偏實作，適合初中階	多數深入完整，適合中高階	多為入門導向，缺乏系統	內容深但斷裂，偏重技術教學
中文介面與教學	全中文介面與教學	英文介面與教學	多為繁體中文	英文介面與英文講解為主
適合對象	初學者、自學型學員	英文程度中等以上的進階學習者	完全零基礎、想試試看的新手	已具備自學習慣、英文閱讀能力者
是否有結業證書	有些平台提供	多數平台提供	無	無

如果你是完全沒基礎的新手，可以先從「免費中文資源」開始，了解 HTML、CSS 是什麼，有一點基礎後，再選擇「中文線上課程」進一步學習排版、設計與切版技巧。

當你對工具與概念有一定掌握後，建議開始補充「英文線上課程」，因為內容更新速度快、主題豐富，有助於拓展視野。

若你已能自學、閱讀英文教學，也可以從「英文免費資源」中補充進階技術與前端框架 (如 React、Tailwind、Git 部署流程) 等，培養更完整的網站製作能力。

國內外網頁設計學習平台推薦

六角學院

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

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

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

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

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

學米 Xuemi

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

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

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

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

HISKIO

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

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

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

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

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

freeCodeCamp

freeCodeCamp 是全球最大的開源學習平台之一，提供超過上千小時的免費課程，內容涵蓋 HTML、CSS、JavaScript、UI 設計基礎、前端框架等。

每個章節都有練習題與專案實作，學習完後還能領取認證證書。

雖然是英文介面，但有完整教學流程與社群支援，新手也能按部就班學習。freeCodeCamp 特別適合希望自學、預算有限，但願意花時間實作的人。

CareerFoundry

CareerFoundry 是歐洲知名的線上職業轉職平台，課程涵蓋 UI 設計、UX 設計、Web 開發等，強調一對一導師制與職涯教練服務。

學員在 6～10 個月內完成專案、作品集與模擬面試，幫助建立可轉職的履歷。

這平台適合打算以設計為職業目標的人，尤其適合非設計背景者系統學習。學費較高但資源完整，有明確學習流程與國際視野。

SuperHi

SuperHi 是一個針對創意人與設計師打造的線上編碼平台，課程主打視覺風格與網頁互動性，適合設計師學會基礎前端技能、打造個人網站。

課程內容包含 HTML、CSS、JavaScript，以及現代網頁動效。

SuperHi 特別受歡迎的原因在於「設計感」，教學風格輕鬆、範例具美感，對不擅長看技術文檔的學員非常友善。適合追求美學與實作兼具的學習者。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Build Responsive Real-World Websites with HTML and CSS

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

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

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

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

Front End Development Nanodegree

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

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

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

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

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

W3Cx Frontend Developer Program

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

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

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

Web Design for Everybody

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

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

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

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

Google UX 設計專業證書

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

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

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

網頁設計免費自學資源

CSScoke – YouTube

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

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

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

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

個人心得

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

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

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

因此，我認為這個 Youtube 頻道適合：
• 對網頁設計有興趣的初學者。
• 已有網頁設計的基礎與經驗，卻一直碰壁的人。

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

GrandmaCan 我阿嬤都會 – YouTube

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

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

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

個人心得

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

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

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

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

Flux – YouTube

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

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

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

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

個人心得

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

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

我認為，Flux 很適合給：
• 想學習如何設計網頁外觀的人
• 想要成為自由接案設計師的人

Easy Tutorials – YouTube

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

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

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

個人心得

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

初步講解完網頁設計的概念後，接著就會開始帶著我們實際操作，一步步製作出屬於自己的網站，很適合想要學習設計不同類型網站的人。

Online Tutorials – YouTube

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

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

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

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

個人心得

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

Webflow – YouTube

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

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

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

個人心得

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

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

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

Smashing Magazine – 部落格

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

他們的團隊雖然小，但只提供高品質的文章，內容專業，但不死板，不論是 UI、CSS、HTML 等教學，都非常完善。也提供其他多種服務，包括專家線上研討會、67 種電子書、工作委員會 ( 幫助設計師和開發人員找到好工作 )。

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

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

學習網頁設計常見問題

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

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

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

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

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