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

從零開始成為網頁開發人員,一切都在這門課。這門課幫助初學者完整地學習 HTML 與 CSS 等網頁開發基礎知識。
4.6 (13 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
152 students enrolled
$140
Take This Course
  • Lectures 77
  • Length 8 hours
  • Skill Level Beginner Level
  • Languages Traditional Chinese, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 Traditional Chinese Closed captions available

Course Description

對於新接觸網頁開發的人來說,HTML 與 CSS 是兩個最重要的網頁開發語言。這兩個語言也是最簡單的網頁開發語言。如果你一直都想要有設計網頁的經驗但害怕接觸程式,這門課程會用快速且簡單的方法讓你學會這兩個語言。

這門課程採用做中學的方式,一步步引導你從零開始完成迷你網頁。

這門課讓你用快速且簡單的方法學會網頁設計領域中最重要的兩個語言。

  • HTML 基礎
  • HTML 父子結構
  • CSS 基礎
  • ID 選擇器
  • 撰寫代碼與設計網頁樣式
  • 了解網頁的組成

網路上每一個網頁都是由程式語言代碼來完成。有許多程式語言都可以讓你的網站有各種應用,但其中最重要的兩個程式語言就是 HTML 與 CSS 。實際上,即使是聘請其他廠商設計網頁的人,對於這兩種語言也該具備基本的了解。有了這兩種語言的基本知識,你就可以不用仰賴其他人,對網頁的格式做一些調校。

課程內容與課程概要

這一門課程包含 77 個講座、講座影片總共有 8 個小時。這一門課會讓你對於 HTML 與 CSS 有基本的了解。這一門課會引導你直接撰寫代碼,從實作中學習,並且在課程的尾聲會利用 HTML 與 CSS 完成屬於你自己的網頁。

課程一開始你會知道 HTML 與 CSS 是什麼,並了解這兩種語言的用途。這一門課程中,你會建造數個迷你網頁,藉此複習學習到的知識。課程中的應用練習也能幫助磨練你的技能

不論你是熱情的網頁設計者、部落客、程式開發員或是企業主,你都可以從學習 HTML 與 CSS 中得益。你可以建造自己的動態網頁,或是管理你已經擁有的網頁。如果你計畫要成為一個網頁開發者或是設計者,HTML 與 CSS 是最基本的兩個語言。實際上,任何人、從任何角度學習網頁開發,都需要學會 HTML 語言。同時學習 HTML 與 CSS 讓你能立刻開始設計網頁。

What are the requirements?

  • 一個有網路連線的環境
  • 具備學習的意願
  • 文字編輯器軟體

What am I going to get from this course?

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

What is the target audience?

  • 完全的初學者
  • 網頁設計學生
  • 網頁設計初學者
  • 電腦程式設計師
  • 部落客
  • 積極有熱忱的網頁設計者
  • 希望發展新職涯的人

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: 啟程
01:15

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

3 pages

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

7 pages

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

7 pages

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

17 pages

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

4 pages

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

4 pages

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

請注意:

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

9 questions

了解你目前學到的HTML 知識

Section 2: HTML 基礎:第一部份
01:13

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

01:30

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

03:07

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

02:34

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

03:40

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

02:23

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

02:47

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

01:45

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

06:33

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

4 questions

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

Section 3: HTML 基礎:第二部份
04:28

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

04:05

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

  1. Unordered lists
  2. Ordered lists
  3. Description lists
10:27

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

02:39

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

06:00

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

5 questions

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

Section 4: HTML 基礎:第三部份
04:45

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

13:34

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

3 pages

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

06:59

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

4 questions

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

Section 5: HTML 基礎:第四部份
04:50

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

05:54

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

01:46

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

06:09

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

02:52

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

03:20

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

04:02

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

10:59

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

10 questions

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

Section 6: CSS 基礎:第一部份
3 pages

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

02:21

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

04:20

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

09:45

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

3 pages

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

3 pages

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

2 pages

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

11:46

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

10 questions

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

Section 7: CSS 基礎:第二部份
05:46

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

06:07

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

07:25

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

07:18

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

13:59

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

02:18

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

4 questions

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

Section 8: CSS 基礎:第三部份
16 pages

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

03:24

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

13:20

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

6 pages

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

10:54

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

09:13

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

18:31

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

19:12

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

12 questions

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

Section 9: CSS 基礎:第四部份
09:08

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

5 pages

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

01:21

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

08:07

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

11 pages

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

18:55

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

16:58

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

6 questions

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

Section 10: 讓所有技巧派上用場
01:54

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

02:58

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

下載課程檔案的方法

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

08:21

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

03:05

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

05:41

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

02:22

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

01:54

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

14:29

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

06:07

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

03:36

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

02:41

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

05:54

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

05:59

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

01:15

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

03:19

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

慕課 癮科技, Udemy台灣合作夥伴

癮科技為台灣知名科技媒體網站,於2005年成立。根據全球數據監測公司 Alexa 測量,癮科技每月有189萬名不重複使用者(UV)。科技新聞媒體網站流量台灣第三。

致力於將科技帶入生活,提供專業的科技新聞、產品開箱、技術課程。也與網友分享許多科技⽣生活新知,另外更 透過許多深度分析、實測觀點的專欄,讓科技更貼近網友們的生活。

慕課為癮科技成立之線上教育品牌,希望讓每個人的學習不受阻礙。

有更多的詳情歡迎與我們聯絡。

Instructor Biography

Brad Hussey, Freelancing Web Designer @ Code College

A highly skilled professional, Brad Hussey is a passionate and experienced freelancing web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.

Brad's determination and love for what he does has landed him in some pretty interesting places with some neat people. He's had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.

Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

180,000+ Students Don't Lie

Join Brad and adventure into his world of web design, web development, and speaking in code. You won't regret it!

What are people saying about Brad?

"[Brad is] the BEST coding instructor on the planet. Brad has a passion for teaching and he does it with joy. He pours his heart into his lessons and makes you feel at ease. It's just like having your best buddy having a chat with you - only this time, you are learning valuable skills. He's the type of guy who is passionate about transforming people's lives through his lessons. He's not after the money. He truly wants you to succeed.Three hearty cheers to Brad - the best coding instructor on planet Earth."

— Cicero, Brad's student


"...These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work."

— Brennan, Brad's student


"...Brad is amazing and I honestly think he's the best tutor of all the courses I have taken on Udemy. Will definitely be following him in the future. Thanks Brad!"

— Brad's student


"...Brad has an infectious enthusiasm, a great eye for detail, and expert-level knowledge of the material."

— Brad's student

Instructor Biography

劉得祺 Derek Liu, 翻譯者、前端工程師

嗨,我是 Derek Liu,我向網路學習,喜愛翻譯與分享教學資源。

身為 1990 年出生的網路世代,我相信知識的分享與傳遞能夠讓更多人得益,我也相信在不久的未來,網路會成為每一個人的教室。

我期許自己能持續翻譯教學資源,為教育貢獻一份心力。

Ready to start learning?
Take This Course