從零開始用 HTML 和 CSS 打造網站 from Udemy

What's inside

Learning objectives

這門課結束時，你能夠完整的了解 html 與 css 的基礎知識
這門課程結束後，你會具備撰寫一些 html 與 css 範例的相關經驗
這門課的最後部份，你主要在使用 html 與 css 建造一個精美且具有意涵的網頁
在這門課程的最後，你會對自己感到驚訝，你能立即發揮所學技能

你有能力建造精美的網頁
你可以建造作品集網頁，強調你的網頁設計技能
你可以開始著手進行，發展你的網頁設計職涯

這門課結束時，你能夠完整的了解 html 與 css 的基礎知識
這門課程結束後，你會具備撰寫一些 html 與 css 範例的相關經驗
這門課的最後部份，你主要在使用 html 與 css 建造一個精美且具有意涵的網頁
在這門課程的最後，你會對自己感到驚訝，你能立即發揮所學技能
你有能力建造精美的網頁
你可以建造作品集網頁，強調你的網頁設計技能
你可以開始著手進行，發展你的網頁設計職涯

Syllabus

啟程

歡迎來到 從零開始用 HTML 和 CSS 打造網站！這是第一堂課，我們會簡介這門課程如何教導你從零開始使用 HTML 與 CSS 打造網站。

這堂課我們會學習 HTML 與 CSS 的用途，以及兩者之間的差異。

這堂課我們會學習 HTML tag, HTML 屬性及 HTML 元素。

這堂課我們會學習大部份網站所使用的檔案與資料夾命名規則。

這堂課我們會學習一個簡單網站的檔案與資料夾結構。

這堂課我們會學習專業網頁設計師如何用最好的方法讓開發檔案保持整齊。

這堂課我們會學習如何使用正確的工具學習網頁設計。

請注意：

我把一些連結當作這堂課程的外部資源，你可以下載或購買這些軟體以加強你的學習體驗。
有些連結是我的 '會員' 連結，假設你從這些連結購買軟體，我會分得些許的佣金，而不會對你造成額外的花費。你可以把這個方式當作免費的給予小費 :）

了解你目前學到的HTML 知識

這堂課我們會學習如何建立你的第一個網頁！

Doctype 是什麼？這堂課我們會學習 Doctype 是什麼以及為何我們要使用 Doctype :）

這堂課我們會學習如何動手撰寫 HTML 文件的基本架構。

這堂課我們會學習如何使用 HTML 在網頁上添加網頁標題。

這堂課我們會學習如何使用 HTML 階層一至階層六標題。

這堂課我們會學習如何使用 HTML 段落元素。

這堂課我們會學習如何使用 HTML em 元素與 strong 元素強調文字。

這堂課我們會學習 HTML 元素之間的父子關係與層級。這個架構就像是族譜。

這堂課我們會親自動手做，將這個部份所學到的知識應用在一個迷你的網頁上。

了解你在這個章節中學到的 HTML 基礎知識

這堂課我們會學習如何在網頁上建立連結。

這堂課我們會學習三種列表的使用方式：

Unordered lists
Ordered lists
Description lists

這堂課我們會學習如何在網頁內添加圖片！

這堂課我們會學習 HTML5 標準的 address 元素。

這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。

了解你在這個章節中學到的HTML 基礎知識

這堂課我們會學習 HTML 表格元素。

這堂課我們會學習 HTML 表單元素。

這堂課我們會學習 HTML 特殊字元。

這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。

了解你在這個章節中學到的 HTML 基礎知識

這堂課我們會學習 HTML 元素的 id 與 class 屬性。

這堂課我們會學習 span 與 div 元素。

這堂課我們會學習 HTML5 header 與 footer 元素。

這堂課我們會學習 HTML5 nav 元素, section 元素與 article 元素的正確用法。

這堂課我們會學習 HTML aside 元素。

這堂課我們會學習 HTML time 元素。

這堂課我們會學習 abbr 元素, q 元素與 blockquote 元素。

這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。

這堂課我們會學習 CSS 樣式規則是什麼。

這堂課我們會學習三種添加 CSS 的其中一種方法：行內樣式。

這堂課我們會學習三種添加 CSS 的其中一種方法：外部樣式。

這堂課我們會學習 CSS 選擇器, 屬性與屬性值。

這堂課我們會學習一些 CSS 樣式的繼承規則。

這堂課我們會學習 CSS 最常使用的長度單位。

了解你在這個章節中學到的 CSS 基礎知識

這堂課我們會學習使用 CSS 的 id 選擇器。

這堂課我們會學習使用 CSS 的 class 選擇器。

這堂課我們會學習使用 CSS 的後代選擇器。

這堂課我們會學習使用 CSS 的群組選擇器，幫助我們撰寫有效率的程式碼！

這堂課是上一個課程的更新資料。

了解你在這個章節中學到的 CSS 基礎知識

這堂課我們會學習 CSS 的 Box Model。

這堂課我們會學習 CSS 的顏色設定。

這堂課我們會學習 CSS 的文字樣式設定。

這堂課我們會學習如何使用 CSS 樣式讓字型變得好看。

這堂課我們會學習 CSS 的邊界。

這堂課我們會學習 CSS 的背景圖片。

這堂課我們會學習使用 CSS 建立好看的 HTML 表單！

這堂課我們會動手做，將這個部份所學到的技巧應用在迷你網站中。

了解你在這個章節中學到的 CSS 基礎知識

這堂課我們會學習設定超連結樣式。

這堂課我們會學習塊元素與行內元素的差異。

這堂課我們提供了一些簡單的資料讓你了解 CSS 漂移。

這堂課我們會學習元素相對定位與絕對定位。

這堂課我們會學習 CSS 權重。

這堂課我們會動手做，將目前所學到的技巧建立迷你網站！

這是上一個課程的第二部份。

了解你在這個章節中學到的 CSS 基礎知識

這堂課我們會一瞥最終網頁的全貌。

這堂課我們會了解如何藉由下載課程檔案附件增進學習經驗。

下載課程檔案的方法：

點擊位於外部資源的連結。

這堂課我們會撰寫網頁的頁眉與 Hero 區塊。

這堂課我們會撰寫網頁的 General Content 部份。

這堂課我們會撰寫網頁的 News 與 Events 區塊。

這堂課我們會撰寫網頁的頁尾。

這堂課我們會學習如何替網頁套用 normalize.css 檔案。

這堂課我們會使用 CSS 整理網頁外觀。

這堂課我們會使用 CSS 設定網頁頁眉樣式。

這堂課我們會使用 CSS 設定 Hero 區塊樣式。

這堂課我們會使用 CSS 設定 General Content 區塊樣式。

這堂課我們會使用 CSS 設定 News 與 Events 區塊樣式。

這堂課我們會使用 CSS 設定頁尾樣式。

這堂課我們會檢視網頁完成後的外觀並做一些結論 :）

這堂課我們會對完成這門課之後的學生提供未來繼續學習的建議！

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Provides a practical, hands-on approach to learning HTML and CSS by building mini-websites, reinforcing learned concepts through application and skill refinement

Covers essential HTML5 elements like `

Explores CSS box model, color settings, text styling, and background images, which are essential for creating visually appealing and well-structured web pages

Teaches three methods of adding CSS: inline, internal, and external styles, which are crucial for understanding CSS architecture and maintainability in web projects

Includes a section on file and folder naming conventions, as well as how to keep development files organized, which promotes good coding practices

Recommends external resources, some of which are affiliate links, which may influence the choice of software or tools used in the course

Reviews summary

Html css 網頁基礎實作

根據學生表示，這門從零開始的 HTML 和 CSS 課程非常適合完全沒有基礎的新手。課程內容結構良好，從基礎概念循序漸進，透過實際的迷你網站練習，讓學習過程不枯燥且能立即應用。許多人讚賞講師的教學方式，認為講解清晰易懂，能夠有效建立網頁設計的基礎知識。雖然課程主要聚焦於基礎，部分學生認為對於進階或響應式設計的涵蓋較少，但對於初學者來說，這門課是踏入網頁開發領域的絕佳第一步。

課程內容有持續更新或維護的跡象。

"這堂課是上一個課程的更新資料。"

"內容有持續在更新的感覺，很棒。"

透過迷你網站練習，幫助鞏固知識。

"老師會帶著實作，不會枯燥乏味。"

"我特別喜歡課程中的實作練習，讓我能立即應用所學。"

"課程的實作部分很有趣，做完迷你網站讓我對自己更有信心。"

"動手做中學的方式讓概念更容易吸收。"

課程設計合理，結合理論與動手實作。

"從基礎開始講解，一步一步跟著老師做，做完會有很大的成就感。"

"由淺入深，很適合當入門的課程，且講師實作說明清楚。"

"課程編排結構良好，讓我能夠循序漸進地學習 HTML 和 CSS 的基礎知識。"

"我覺得這門課很實用，讓我可以把學到的東西實際運用在專案上。"

講師的教學風格受到好評，易於理解。

"老師講解的很詳細易懂"

"很棒的課程，講師講解很詳細，很快就可以進入狀況"

"老師的講解清晰好懂，跟著操作也很順暢，很推薦給初學者！"

"非常詳細的講解，對初學者非常有幫助！"

本課程特別為網頁設計新手量身打造。

"對於沒有基礎的人來說，這門課程的內容結構非常完善，可以一步步建立概念。"

"很適合從零開始的新手，老師教學很有耐心。"

"如果你是網頁設計完全新手，這門課絕對是個非常好的開始。"

"非常適合零基礎入門學習 HTML 和 CSS。"

課程聚焦於基礎，進階內容較少。

"這門課程很棒，但如果你希望學到比較深入的響應式設計或更進階的排版技巧，可能需要另外找資源。"

"課程主要講解基礎概念，對於想要立即應用於複雜網站的學習者可能覺得內容深度稍嫌不足。"

"學完大概可以建立靜態的基本網頁，離做一個完整的、符合現今需求的網站還有點距離。"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 從零開始用 HTML 和 CSS 打造網站 with these activities:

閱讀《深入淺出 HTML 與 CSS》

Show steps

閱讀本書以獲得對 HTML 和 CSS 的輕鬆入門，並建立扎實的基礎。

View Head First Html With CSS & XHTML on Amazon

Show steps

閱讀本書的相關章節。
完成書中的練習。
嘗試將書中的概念應用到您自己的網頁設計中。

閱讀《HTML & CSS 設計與構建網站》

Show steps

閱讀本書以獲得對 HTML 和 CSS 的更深入理解，並學習最佳實踐。

View HTML and CSS on Amazon

Show steps

閱讀本書的相關章節。
練習書中的範例程式碼。
嘗試修改範例程式碼以探索不同的效果。

使用 CSS 選擇器練習

Show steps

透過練習使用不同的 CSS 選擇器來提高您的 CSS 技能。這將幫助您更有效地選擇和樣式化 HTML 元素。

Show steps

尋找或建立包含各種 HTML 元素的網頁。
使用不同的 CSS 選擇器來選擇這些元素。
應用不同的樣式到所選元素。

Three other activities

Expand to see all activities and additional details

Show all six activities

撰寫關於 CSS Box Model 的部落格文章

Show steps

撰寫一篇關於 CSS Box Model 的部落格文章，以加深您對這個重要概念的理解，並練習用清晰簡潔的方式解釋技術概念。

Show steps

研究 CSS Box Model 的各個方面。
撰寫文章的草稿。
編輯和潤飾文章。
發布文章。

建立個人作品集網站

Show steps

透過建立個人作品集網站來應用您在本課程中學到的 HTML 和 CSS 技能。這將幫助您鞏固知識並展示您的能力。

Show steps

規劃網站的結構和內容。
使用 HTML 編寫網站的內容。
使用 CSS 設計網站的樣式。
發布您的網站。

建立響應式網頁設計

Show steps

建立一個響應式網頁設計，以確保您的網站在不同的設備上都能正常顯示。這將幫助您掌握響應式設計的技術，並提高您的網頁設計技能。

Show steps

規劃網站的結構和內容。
使用 HTML 編寫網站的內容。
使用 CSS 設計網站的樣式，並使用媒體查詢來實現響應式設計。
在不同的設備上測試您的網站。

Career center

Learners who complete 從零開始用 HTML 和 CSS 打造網站 will develop knowledge and skills that may be useful to these careers:

前端工程師

前端工程師負責使用 HTML、CSS 和 JavaScript 等技術創建網頁和應用程式的使用者介面。此課程非常適合有抱負的前端工程師，因为它提供了 HTML 和 CSS 的堅實基礎。本課程從零開始指導您，涵盖 HTML 基礎知識、父子結構、CSS 基礎知識和識別碼選擇器等主題。您將學習編寫程式碼和設計網頁樣式，並了解網站的建構方式。通過逐步完成迷你網站專案，本課程可以幫助您建立實際經驗和作品集，展示您的前端技能。

See salaries and explore the career path for 前端工程師

网页设计师

網頁設計師規劃和創建網站的視覺外觀和使用者體驗。本課程可幫助有抱負的網頁設計師，可以幫助他們學習如何使用 HTML 和 CSS 建立有吸引力且實用的網站。本課程涵蓋 HTML 基礎、CSS 基礎和網頁樣式設計等主題。通過本課程，網頁設計師可以了解如何使用 HTML 建立網頁結構，並使用 CSS 進行樣式和佈局，以建立美觀且使用者友善的網站。課程中建立迷你網站的實作方法可以幫助網頁設計師在實際場景中應用所學的知識。

See salaries and explore the career path for 网页设计师

使用者介面設計師

使用者介面設計師專注於設計使用者與數位產品互動的方式，例如網站和應用程式。如果您希望未來能成為使用者介面設計師，本課程可以幫助您了解如何使用 HTML 和 CSS 創建清晰且易於導航的介面。本課程涵蓋 HTML 結構、CSS 樣式和網頁元件設計等主題。通過本課程，使用者介面設計師可以學習如何使用 HTML 建立介面的骨架，並使用 CSS 設定其樣式以實現最佳的使用者體驗。從課程中迷你網站的建立中，可以學習到如何建立一個具備專業外觀的網站。

See salaries and explore the career path for 使用者介面設計師

網頁開發人員

Web 開發人員建構和維護網站。您可能需要了解前端和後端開發。本課程會幫助您了解網站的前端開發。本課程涵蓋 HTML 基礎知識、CSS 基礎知識和程式碼編寫等主題。通過本課程，Web 開發人員可以學習如何使用 HTML 建立網站的結構，並使用 CSS 設定其樣式以實現所需的視覺外觀。通過本課程完成迷你網站的實作練習，能掌握網頁開發的基礎知識。

See salaries and explore the career path for 網頁開發人員

電子商務專員

電子商務專員負責管理線上商店並優化線上銷售。本課程可幫助電子商務專員了解如何使用 HTML 和 CSS 對電子商務網站進行基本更改和客製化。本課程涵蓋 HTML 基礎知識、CSS 基礎知識以及網頁樣式設計等主題。通過本課程，電子商務專員可以學習如何修改產品描述、橫幅和其他網站内容，以改善使用者體驗並提高轉換率。對 HTML 與 CSS 的基礎理解，可以讓您對網站進行調整與更新，無需外部協助。

See salaries and explore the career path for 電子商務專員

內容行銷人員

內容行銷人員創建和分發有價值、相關且一致的內容，以吸引和留住目標受眾。本課程讓內容行銷人員具備 HTML 和 CSS 技能，以便有效地格式化和呈現網頁上的內容。本課程涵蓋了 HTML 基礎、CSS 基礎，了解網頁的組成能讓內容行銷人員能夠控制內容在各種網站上的外觀。您可以通过创建迷你网站来增强行销技能。

See salaries and explore the career path for 內容行銷人員

數位行銷人員

數位行銷人員制定和執行數位行銷活動，以宣傳產品或服務。本課程讓數位行銷人員具備必要的技能，可以了解網頁的基礎知識，並優化網頁以獲得更好的可見性和參與度。課程涵蓋 HTML 基礎知識、CSS 基礎知識，讓你了解網頁的組成方式，可以幫助數位行銷人員確保行銷活動在不同裝置和平台上獲得最佳的展示。從課程中迷你網站的創建中，可以學習到如何建立一個具備專業外觀的網站。

See salaries and explore the career path for 數位行銷人員

部落客

部落客會定期在網站上撰寫文章。部落客需要學習 HTML 和 CSS，以便可以有效地格式化和設計部落格文章。課程涵蓋 HTML 基礎知識、CSS 基礎和網頁設計樣式，部落客可以學習如何使用 HTML 建立部落格文章結構，並使用 CSS 設定樣式以創建視覺上吸引人的引人入勝的閱讀體驗。課程中建立迷你網站的實作方法，將能够建立一個專業的部落格。

See salaries and explore the career path for 部落客

小型企業主

小型企業主通常需要管理自己的網站。本課程可能可以幫助小型企業主了解如何使用 HTML 和 CSS 對其網站進行基本更新和修改。本課程涵蓋 HTML 基礎知識、CSS 基礎知識和網頁元件設計等主題。通過本課程，小型企業主可以學習如何更新內容、新增圖片和修改網站樣式，而無需聘請網頁開發人員。因此，小企業主可以省錢，並可以更大程度地控制自己的線上形象。

See salaries and explore the career path for 小型企業主

專案經理

專案經理負責規劃、執行和完成特定目標的專案。本課程可能可以幫助專案經理了解網頁開發過程，並與開發團隊進行有效溝通。本課程涵蓋 HTML 基礎知識、CSS 基礎知識和網頁元件設計等主題。通過本課程，專案經理可以對開發過程有更深入的了解，並確保專案按時且在預算範圍內完成。本課程可以幫助他們在工作中更有效率地管理專案。

See salaries and explore the career path for 專案經理

技術支援工程師

技術支援工程師為客戶提供技術協助。對於需要支持網頁相關產品或服務的技術支援工程師而言，本課程可能可以幫助他們了解其所支援技術背後的基礎知識。本課程涵蓋了 HTML 基礎知識、CSS 基礎知識，讓技術支援工程師能夠更有效地解決客戶問題，並提供準確的指導。本課程可以幫助工程師在工作中更有效率地管理專案。

See salaries and explore the career path for 技術支援工程師

产品经理

產品經理負責產品的策略、路線圖和功能集。本課程可能可以幫助產品經理了解網頁開發過程，並就產品開發做出更明智的決定。本課程涵蓋 HTML 基礎知識、CSS 基礎知識等等。產品經理可以了解建立使用者友善介面的權衡取捨，並優先考慮客戶體驗。

See salaries and explore the career path for 产品经理

資料分析師

資料分析師分析數據以幫助組織做出更好的決策。本課程可能可以幫助資料分析師從網頁上抓取和清理數據。熟悉 HTML 結構和 CSS 選擇器將使資料分析師能夠更有效率地從網站中提取相關資訊以進行分析。理解 HTML 基礎知識、CSS 基礎知識可以有效地解決客戶問題，並提供準確的指導。

See salaries and explore the career path for 資料分析師

社群媒體經理

社群媒體經理負責管理組織的社群媒體帳號。本課程可能可以幫助社群媒體經理了解如何在社群媒體平台上有效地呈現內容。了解 HTML 基礎知識、CSS 基礎知識可以幫助社群媒體經理優化內容以獲得最大的參與度。他們可以微調內容，從結構上滿足社群媒體平台的需要。

See salaries and explore the career path for 社群媒體經理

銷售人員

銷售人員負責向客戶銷售產品或服務。本課程可以幫助銷售人員建立一個個人網站或作品集，展示他們的技能和經驗。掌握 HTML 基礎知識、CSS 基礎知識後，銷售人員可以用低成本建立個人品牌，並提升其專業形象。能夠自己維護網站，也能幫助銷售人員及時更新個人資訊。

See salaries and explore the career path for 銷售人員

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in 從零開始用 HTML 和 CSS 打造網站.