零基礎轉職！網頁設計 HTML、CSS 快速入門

想入門程式領域，你也有這樣的困擾嗎？

哈囉，我是獺斯特，從自學求職，到擔任過網頁設計師。

當初在自學時，我透過網路上片段的文章或影片教學，對網頁設計有了基本的認識。但直到我應徵上網頁設計師的職位，才發現，打好基礎跟實際在職場應用，其實有一段落差！

工作實務上，大部分會遇到程式碼的維護與修改。這項工作需要大量的基本功，才能順利完成客戶要求的樣式與排版。因此我從過往的經驗，推出這門由職場經驗回推而成的零基礎入門課。讓大家不僅能打下網頁設計的程式基礎，還能同時學會實戰應用，拉近你與職場的距離！

程式語言百百種，為什麼零基礎想入門，我會首推從網頁設計開始呢？

因為學習網頁設計擁有 3 大主要特色：

1. 一開始就站在職涯地圖的正中心

擁有網頁設計的能力及概念後，就能對程式設計的架構有一定的了解。而且無論你未來想要進一步轉往哪個職位，都能更快速上手！

2. 適應主流瀏覽器

目前主流瀏覽器仍然只看得懂網頁三元素：HTML、CSS、JavaScript，學完就能直接寫出網頁，成就感 Up！

3. 自由度最高

一旦網頁能任你自由地修改，無論從哪種語言編譯後的程式碼，都能改成你想要的樣式。盡情揮灑你的設計感吧！

課程優勢

有別於其他單純學基礎的課程，這門課會讓你在打基礎的同時，介紹和學習職場上常見應用，並且給予一些單元小練習，讓你一步步跟上進度！

學習程式設計都必須要親自打出程式碼，才能真正學會！否則很容易陷入「聽起來都懂，但卻寫不出來」的惡性循環，導致最後選擇放棄！

教學特色

這門課依據較容易吸收的方式來製作教學內容：

上完這門課，你將學會：

• 用 HTML、CSS 從無到有寫出一個網頁。
• 在沒有 CSS 框架（即原生）的情況下，也能做出 RWD 響應式設計。

什麼是 RWD 響應式設計？

RWD 響應式設計就是你只需要撰寫維護同一份程式碼，就可以同時根據網頁、平板、手機等不同尺寸的裝置，完美呈現你設計的畫面排版。目前已經是網頁設計標準配備的主流設計方式囉！

如果你是以下的狀況，你非常適合這門課！

• 完全零基礎，想學習網頁設計的初學者
• 想跨領域轉職的人
• 在職場上常需要與工程師溝通、想學習網頁基礎的人，如 UI/UX 設計師等

這門課正是專門為你們而設計的，非常歡迎你們加入這門課的行列，開啟網頁設計之路吧！

課程共分為 6 大章節，預計約 520 分鐘。

章節 1：課前準備 - 了解教學模式與開發環境

我們會先讓你了解整門課的教學模式，並說明這門課學習之後，最終會實際帶你做出什麼樣的成品。

以及帶領你從最基本的安裝編輯器、到課程中教學會使用的瀏覽器下載，讓完全沒碰過程式的人，也可以無痛建立基本開發環境。

1-1 教學模式與學習目標說明

1-2 什麼是編輯器？瀏覽器與編輯器下載

章節 2：網頁設計概念 - 初步了解網頁，建立你的程式碼檔案

接著，我們會讓你對網頁設計有基本概念，包含程式碼的基本語法介紹、HTML 和 CSS 分別是什麼、如何應用、如何嵌入圖片或 icon 圖示等，帶著你正式開始寫程式。

2-1 HTML 是什麼？CSS 是什麼？

2-2 程式碼架構與網頁架構概念

2-3 建立你的第一個程式碼檔案

2-4 相對路徑與絕對路徑

2-5 初始化設定與開發人員工具介紹

2-6 建立 HTML 程式碼基本架構

2-7 網頁三元素分別的註解方式

2-8 常用 HTML 標籤介紹

2-9 常用 CSS 樣式範例與操作練習

2-10 常用單位介紹

2-11 CSS 命名規則與權重關係

2-12 CSS 元素選擇器常見連接符號介紹（>、+、~）

2-13 嵌入圖片、影片，icon 嵌入方式

章節 3：基礎實作 - 熟悉常用排版與樣式屬性應用

這個章節會讓你多加練習基礎語法，透過實際在職場上常見的應用回推，讓你知道這些基本語法其實還有很多進階的觀念和用法是非常實用的。

章節的最後，也會帶你練習目前仍為主流的卡片式設計排版方式，實作出常見的設計樣式。

3-1 建立自己適合的筆記方式，加速開發與記憶

3-2 拉開元素之間的空間，box model 介紹

3-3 內建計算器 calc

3-4 區塊設定 display 屬性

3-5 float 排版與 overflow 應用介紹

3-6 position 相對位置介紹

3-7 狀態選擇器 :hover 應用

3-8 CSS 中括號屬性設定

3-9 input 輸入框 type 型態介紹

3-10 background 背景與漸層色

3-11 插入圖片的 2 種方法與應用時機

3-12 按鈕模組化樣式設計

3-13 表單 form 介紹

3-14 列表 ul、ol、li 介紹

3-15 表格 table 介紹，與合併儲存格應用

3-16 卡片式設計排版綜合練習

章節 4：進階應用 - 活用語法設計，開發 RWD 響應式設計

基礎實作練習之後，進入相對進階的語法教學，並透過這個章節的練習，讓你能將基礎練習過的語法綜合應用與活用。

另外，也包含使用 CSS 來完成 RWD 響應式設計、漸變動畫、實用的偽元素介紹等，讓你的網頁設計能力進階到能輕鬆自由使用的里程碑。

4-1 各瀏覽器前綴介紹

4-2 原生 CSS 完成 RWD 響應式設計

4-3 製作固定的 nav bar 導覽列

4-4 水平置中與垂直置中的多種排法與應用

4-5 z-index 圖層概念

4-6 超實用偽元素 ::before 和 ::after

4-7 選取器應用 :nth-child 系列

4-8 狀態選擇器搭配 transition 漸變動畫

4-9 transform 變形應用

4-10 隱藏物件的方法比較

章節 5：實戰演練 - 實際製作一頁式網站，綜合練習與設計細節

綜合前面章節的所有練習，實際帶你製作出一個 RWD 響應式設計的網站，我們將會以餐飲一頁式網站為例，一步步帶你完整做過一遍。

其中，因為手機版會需要製作彈入彈出的選單面板，會教少部分的 JavaScript 來完成與使用者的點擊互動功能，我們也會從零開始教起。

5-1 官方網站常用符號 favicon 與 copyright

5-2 CSS 內建濾鏡效果

5-3 Landing Page 圖片與文字排版設計

5-4 框架衝突與 !important 使用方式

5-5 用原生 JavaScript 觸發 RWD 導覽列按鈕

5-6 製作一頁式 RWD 響應式網站（上)

5-7 製作一頁式 RWD 響應式網站（中)

5-8 製作一頁式 RWD 響應式網站（下)

• 課程作品

在這個章節的最後，會讓大家撰寫出如下方連結的純手刻響應式設計作品！

課程預計成品連結：COOK 廚房

電腦版畫面：

手機版（含選單）畫面：

章節 6：職涯學習地圖 - 未來職涯規劃與目標建立

課程的最後，會和大家聊聊學完網頁設計之後的職涯地圖，以及如何透過自主練習的方式，讓自己可以持續進步，並且思考自己未來的方向，朝著夢想中的目標前進！

6-1 求職迷思

6-2 自主練習方式推薦

6-3 未來職涯規劃與建議

課堂作業的部分，我會分成【小練習】和 Hahow 作業區的【課程作業】。

單元後的【小練習】

我在某些部分單元最後面會設計【小練習】提供一個練習的方向，讓你可以跟著小練習一起跟上進度！

不過小練習的部分會讓大家自由練習，不須繳交作業，也不會進行批改喔！

Hahow 作業區的【課程作業】

Hahow 作業區的部分，則是在第 2 至第 5 章節的最後面，可以將所學的內容進行綜合演練時，我就會將它出成課程作業，讓大家充分整合練習喔！

完成作業之後記得上傳到 Hahow 作業區，我會再進行作業的批改與回覆呦！

作業回覆頻率

我預計會平均以 5 ~ 8 天內的頻率，回覆作業及問題喔！

解鎖活動的募資達成率累積「僅限募資期 30 天」呦！

200% 解鎖篇：(未解鎖)

課程達到募資人數 60 人，加開「CSS 動畫 animation 介紹」

使用 CSS 的 animation 屬性，漸變的動畫可以進階依照你想像中的時間、變形方式、重複等形式進行設定，讓你的網頁增添動態、更加豐富！

300% 解鎖篇：(未解鎖)

課程達到募資人數 90 人，加開「製作選項按鈕變化型！」

選項按鈕的形式除了基本的預設樣式，像是手機版常常會看到的開關按鈕（如下圖），可以讓選項透過 CSS 樣式來改變外型，不僅更加美觀，更大大提升使用者的體驗！

400% 解鎖篇：(未解鎖)

課程達到募資人數 120 人，加開「修改屬性讓表格也能響應式！」

表格在電腦的寬螢幕下方便閱讀，但手機版上的表格則會需要使用者自己左右拉動才能完整查看。因此依照不同需求，也可以試著透過 CSS 來幫表格也達到響應式設計喔！

解鎖活動注意事項：

• 解鎖活動的募資達成率累積「僅限募資期 30 天」。
• 解鎖篇若有成功解鎖，都將會統一於正式課程一併上架。

關於獺斯特

哈囉！我是獺斯特，從自學求職，到擔任過網頁設計師。

之前常遇到在程式上需要協助的同事或朋友們，進而發現自己喜歡將不會的人教到會的成就感，因此決定在獺斯特網站透過部落格、FB、IG 分享網頁設計相關的內容，也開啟我的程式教學之路，期待能幫助更多對網頁設計有興趣的人！

作品簡歷

• 形象網站設計案例：

建立可以增添質感的首頁，並清楚的下標，讓訪客能快速感受品牌形象。

• 活動網站設計案例：

透過活潑的線條與充分的空間感，帶動視覺動線，並適度留白把重點突顯出來。

Q1. 請問購買這門課之後，可以看多久？

A： 這門課可以在本教學平台上，隨時隨地都能無限次觀看，沒有觀看期限。

Q2. 我怕這門課對我還是太難？

A：我會從安裝編輯器、基礎程式介紹開始教學，並且帶著大家透過小練習跟上腳步。期望能讓大家不僅從 0 到 1 學習，還能藉由我職場經驗回推的課程內容，順利達到各自期待的學習成效，相信課程的意義會更大。

如果在學習過程中有任何問題，都可以於課程留言區發問，或直接私訊粉專、加入獺斯特的官方 Line 等方式詢問，我都會盡速為你解答喔！

Q3. 請問這門課會用哪個作業系統教學呢？會使用哪個瀏覽器教學呢？

A：這門課會使用 Windows 作業系統進行教學，若使用 Mac 作業系統，我也會把相對應的鍵盤操作快捷鍵整理給你。

由於每個瀏覽器對 CSS 效果的支援度不同，這門課會以 Google Chrome 瀏覽器的教學為主。

Q4. 請問這門課會教 JavaScript 嗎？

A：這門課並不會有 JavaScript 的完整教學，課程中只會提到 RWD 響應式設計所需要使用的相對應 JavaScript 事件，目的是為了讓學會 HTML、CSS 的人也可以快速並實作出 RWD 響應式網頁，提高成就感，並且相關內容皆會從零開始教學。

Q5. 請問這門課學完，真的就能順利轉職嗎？

A：這門課的教學如果能完整學習，是能讓你擁有網頁設計基本概念，並且能夠從無到有撰寫出網頁，但無法保證任何求職結果！

轉職要看你想往哪個方向求職，每個人的方向都不同，但我會在課程中簡單提到幾種未來方向讓你參考，後續要學習哪些內容，就看個人想往哪個方向走，再去進修相關的內容囉！