程式新手想入門網頁設計？網頁前端 4 大精選線上課，快速找到自學路！

想入門網頁設計的你，正在找尋適合你的自學資源嗎？Hahow 精選四堂適合新手的 HTML/CSS/Javascript 線上課，讓你在家就可以成功累積轉職實力！

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏 文章，再也不怕錯過就是一輩子！

學習程式語言，是學習用電腦的方式思考。瞭解電腦運作的邏輯，便可請他來幫我們解決生活問題、提高工作生產力。很多人都是從網頁設計或軟體開發開始接觸程式語言，兩者也一直是很熱門的進修或轉職學習目標。

Hahow 精選四堂適合新手、應用導向的程式設計課程，讓你在家就可以累積轉職實力。跟著我們規劃的學習路徑與選課指南，一步步找到適合你的課程吧！

程式新手村大哉問：前端 vs 後端，入門程式語言怎麼選？

首先，在網頁設計與應用程式 (APP) 開發中，都有「前端」與「後端」兩個部分。 前端是我們跟電腦互動的地方、如首頁、介面；後端我們看不到、是電腦處理資料的地方，如後台、伺服器。前端與後端的關係就像去餐廳吃飯：我們點餐(指令)，服務生(前端)會送菜單去廚房(後端)；廚師做好餐點(資料)，服務生再送回來給我們。

前端是櫃台，要好用、好看、流暢；後端是圖書館，要提供正確、穩定的資料。運作前端需要網頁設計、使用者體驗；後端則需要系統架設、資料運算。所以，若你喜歡視覺、互動，可選擇學習前端；若你擅長邏輯思考、數據處理，可選擇進修後端。

程式新手學網頁設計
圖片來源：Hahow 圖庫

建議新手先選擇一種程式語言學習，建立基礎邏輯。本篇介紹的 HTML/CSS/JavaScript 就是非常實用的組合，可入門網頁設計、也可做應用程式開發！或是你對最近超級熱門的 Python 有興趣，也可以參考我們的另外一篇文章《6 大 Python 精選線上課程，讓你輕鬆掌握爬蟲、機器學習！》。

HTML/CSS/Javascript，我該從何開始學？

前端三大程式語言：HTML 做架構、CSS 做外觀、JavaScript 做互動。其中，強大的JavaScript還發展成能開發應用程式、跨足後端的全端程式語言。

建議新手可先學習 HTML 與 CSS、並打好 JavaScript 基本功，紮穩網頁設計基礎；有了JavaScript的底子，再進一步進階網頁開發、動畫互動，或是應用程式開發。

程式新手學網頁設計
圖片來源：Hahow 圖庫

如果你準備好了，來挑適合你的網頁設計課程吧！

以下四堂課都是應用導向，課程透過概念說明與大量實作，帶著大家從實作中學習，非常推薦給程式新手的你。

選課前，記得先問自己幾個問題：

上課是為了求職、做自己的網站或解決生活問題？
有一兩個周末、或是有好幾個月可以上課？
喜歡多一點概念講解、還是喜歡從做中學？

這些問題沒有標準答案，重點是釐清自己的學習動機、目標、學習風格與條件，據以找到適合的課程與學習方法，達到學習目標。

如果你是零基礎新手，想要踏入前端的世界
▶︎ 請直接到 🅰 網頁前端入門，打好 HTML、CSS 基本功

有一點 HTML&CSS 基礎，想挑戰 JavaScript 進階應用
▶︎ 請直接到 🅱 上手 Javascript，實戰動畫互動、程式開發

🅰 網頁前端入門，打好 HTML、CSS 基本功

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

圖片來源：Hahow 圖庫

這堂課由破萬名學生的共同老師 — 墨雨設計創辦人吳哲宇講授，非常適合程式語言新手，尤其推薦給對網頁設計有興趣、想玩網頁視覺與互動的人。 課程會帶你入門 HTML&CSS 與 JavaScript，從網站結構規劃開始，建立基本網頁製作概念和技術，最後透過大量練習視覺與動畫互動技巧，讓你能做出不只是好用、還具備視覺美感的網站。

2. 使用 HTML、CSS 開發一個網站

圖片來源：Hahow 圖庫

這堂課是 Hahow 與六角學院合作的「前端網頁設計」課程組合中第一門基礎課。課程將從基本網頁架構基礎開始，帶你紮穩 HTML&CSS 基礎。清楚好吸收的概念講解、搭配有挑戰性的實作作業，還有助教的細心批改回饋。 學完這門基礎課，也可以持續照著安排好的學習路徑，完成前端組合裡的其他課程。特別推薦給想循序漸進、入門網頁開發的你。

B. 上手 Javascript，實戰動畫互動、程式開發

1. 動畫互動網頁特效入門 (JS/Canvas)

圖片來源：Hahow 圖庫

這堂課特別推薦給想深入網頁動畫互動與特效、想探究網頁設計更多可能的人。 內容會著重在打好 Javascript 程式基礎、結合動畫繪圖函式庫 Canvas，完成有設計感的互動性網站。和《動畫互動網頁程式入門 (HTML/CSS/JS)》相比，這堂課的難度較高、進階內容較多，所以若有一點 HTML /CSS 基礎，在課程的銜接上會更加順暢喔！

2. JavaScript 程式設計新手村

圖片來源：Hahow 圖庫

這堂課特別推薦給對應用程式開發有興趣的人。 在課程中，老師會帶你快速熟悉 HTML&CSS；再特別強化超重要、但新手容易卡關的 JavaScript，建立你的程式語言基礎。接下來，老師會示範操作如何做出聊天機器人、記帳軟體等瀏覽器外掛或應用程式，讓你大量練習與熟悉 JavaScript，並能應用在生活上、也累積踏入前端世界的能力。

圖片來源：Hahow 圖庫