網頁設計教學課程推薦

網頁設計教學課程推薦

完整前端自學資源分享


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

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

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

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

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

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

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

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

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

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

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

網頁設計教學課程推薦

#1 六角學院

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

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

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

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

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

#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 種電子書、工作委員會 ( 幫助設計師和開發人員找到好工作 ),是個很不錯的學習管道。

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

學習網頁設計常見問題

Q1:學網頁設計有用嗎?

我認為網頁設計目前在市場上還是個很大的市場,因為它其實算是剛性需求,許多企業或個體戶都想要有自己的一個形象網站,有了網站就會需要搭配網頁設計,來提升專業感。

所以如果你學習網頁設計是為了要獲取收入,那麼會蠻有用的;只是相對的,這個領域在市場上就會比較競爭,許多人都搶著接案,所以持續提升個人能力,就會變成是非常重要的課題。

Q2:網頁設計課程價格?

網頁設計課程價格其實沒有一定,會視你學習的程式語言,以及你學習的深度來決定。目前網路上就有非常多免費的課程,但也有需要上萬元的完整培訓。

我會建議去上外國專門的培訓,通常雖然價格稍高(基本價都 2~3 萬起跳),但內容都非常扎實,課程結構也很完整,有些還會有保證制度,讓你學習完以後一定能夠接到案子或找到工作。

Q3:線上與實體課哪個好?

過去很多人喜歡實體課程的原因,是因為它會更有即時性,遇到問題都可以立即發問,老師會幫助你解答疑問,提升學習效果。

但現在很多線上課程都可以做到這一點,無論是開發自己的學習平台,還是建立師生的討論社群,都有辦法立即解答自身問題,學習效果並不會差異太多。

所以哪個比較好?其實這不一定,都是要看自己的學習習慣。

結論:網頁設計該如何自學?

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

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

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

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

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

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

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

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

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

error: 內容已被保護!
回到頂端