Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

光速駕馭 HTML / CSS

我會一步步地帶您完成兩個擬真的網頁專案，讓您自然地學會使用HTML/CSS來開發網站

Created by蔡偉駿 Jimmy Tsai

Last updated 9/2020

Chinese (Traditional)

Chinese (Traditional) [Auto],

What you'll learn

使用HTML和CSS從無到有地寫出一個網站
紮實、清楚、重脈絡的CSS排版技巧，讓您能以簡馭繁，在日新月異的網頁技術中，擁有持續自我進修的能力
目標導向式的學習，讓您從實戰中理解各種語法的使用情境，不用擔心學了一堆東西卻不知為何而戰！
唯快不破：使用各種輔助工具來加速開發，大幅節省您寶貴的時間！

Course content

6 sections • 60 lectures • 8h 6m total length

課程總覽1:40
安裝和使用Sublime Text 3，以及設定縮排 (Indent)8:43
* 若使用 Ctrl + ] 增加多行縮排無效 --> 請改成使用 Tab 來增加多行縮排。
* 若使用 Ctrl + [ 減少多行縮排無效 --> 請改成使用 Shift + Tab 來減少多行縮排。
如何下載教學資源檔？2:31

歷史與W3C2:33
CSS如何寫註解 (comment)？0:47
如何寫行內樣式 (inline style)？1:51
字體大解密4:09
顏色寫法有哪些？4:06
樣式套用規則與繼承 (inherit)8:00
長度單位有哪些？5:30
Flow決定元素位置6:16
Box model決定元素大小 (width、height、padding、border、margin)27:47
Box sizing簡化寬高計算2:18
前綴字 (prefix)，caniuse，與補完神器Prepros5:30
line-height 和 letter-spacing4:49
陷阱！Margin collapse7:52
陷阱！Inline-block/inline元素的莫名空白4:49
CSS Selector - Universal & Type Selectors2:00
CSS Selector - Class Selector7:25
CSS Selector - ID Selector1:10
CSS Selector - Attribute Selector10:57
CSS Selector - Descendant Selector3:32
CSS Selector - Child Selector4:13
CSS Selector - Group Selector3:22
CSS Override Rule11:19

我們的需求是什麼？11:12
專案準備以及獨立的CSS檔案3:28
未登入的首頁 - header (Part 1)19:15
未登入的首頁 - header (Part 2)13:28
float大解密 - 文繞圖, float的行為, 以及clear22:17
float大解密 - 分割網頁畫面11:35
[測驗] 使用float排版！17:14
未登入的首頁 - 主題區塊7:44
[測驗] 未登入的首頁 - 促銷區塊 (漸層色的練習)3:10
未登入的首頁 - 商品區塊14:24
未登入的首頁 - 將header固定在視窗上方3:59
position大解密 - fixed, relative, absolute26:33
position大解密 - sticky 和 overflow 的搭配7:55
position大解密 - z-index 與 stacking context23:56
已登入的首頁 - header14:54
[測驗] 已登入的首頁 - 商品項目 (position的練習)7:34
[測驗] 美食/時尚/搜尋頁面 (未登入 + 已登入)3:07
會員頁面與正則表達式 (regular expression)17:48
[挑戰！] 購物車頁面1:41
正則表達式 (pattern) 的部分，可參考member.html並自行修改。
將JavaScript獨立成一個檔案2:55
使用Media Query打造手機版網頁 (RWD)28:34

Requirements

本課程適用於 Windows、OSX、Linux 的作業系統
本課程使用 Chrome 瀏覽器來對網頁進行測試和除錯
本課程使用 Sublime Text 3 編輯器來撰寫網頁程式碼

Description

想要寫出一個網站，卻苦於不知道要怎麼入門嗎？那這門課就是你的最佳選擇！

1. 本課程由資深的業界工程師設計，讓有志於網頁前端開發的朋友，能快速跨過初學門檻，迅速掌握網頁開發 (web development) 的全貌。

2. 不要再浪費時間去做那些無聊的玩具範例了！本課程帶著你完成兩個擬真的專案，讓你看到真實世界的網頁，是如何一步一步被開發出來的。不要忘記，解決一個經典問題，勝過解決千千萬萬個無聊問題。

3. 課程的最後包含響應式網頁 (Responsive Web Design, RWD) 開發的教學，讓你的網頁在手機/平板/筆電/桌電上面都能完美呈現。

4. 讓你從戰鬥中學習，並不代表要讓你死在戰場上。在完成專案的過程中，我會針對各種重要但又比較難以理解的語法規則，進行詳細說明，讓你擁有紮實的基礎，同時也知道這些語法是要解決什麼樣的真實問題。

5. 作業不要帶回家 - 講座中使用 Quiz (隨堂測驗) 來讓您即時練習，加深印象，一旦看完講座，您就馬上學會！

6. Every Question Takes You Further. 有任何問題請隨時發問，我永遠都在這裡為您解答！

不只學習，而是駕馭！給你自己一個機會，跟著我一起駕馭HTML和CSS，讓全世界看見更好的你！

Who this course is for:

適合完全沒有程式經驗的初學者，或者任何對網頁開發有興趣的人
期望自己能從無到有寫出一個網站
想要成為前端工程師、軟體工程師、或網頁設計師的人
想要轉換工作領域至網頁前端的開發者