Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS

光速駕馭 HTML / CSS

我會一步步地帶您完成兩個擬真的網頁專案,讓您自然地學會使用HTML/CSS來開發網站
Rating: 4.7 out of 54.7 (89 ratings)
1,394 students
Created by 蔡偉駿 Jimmy Tsai
Last updated 9/2020
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

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

Course content

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

  • Preview01:40
  • Preview08:43
  • 如何下載教學資源檔?
    02:31

  • Preview01:48
  • Preview06:32
  • Preview12:25
  • Preview03:17

  • 歷史與基礎知識
    08:20
  • Chrome檢查工具
    07:52
  • 標籤語意和Search Engine Optimization (SEO)
    02:33
  • HTML樹狀結構 (Tree Structure)
    05:38
  • 認識其他HTML標籤 - 基本標籤
    04:58
  • 認識其他HTML標籤 - 表單標籤
    10:35
  • 認識其他HTML標籤 - 多媒體標籤
    06:34
  • 認識其他HTML標籤 - 資訊切割標籤
    05:40
  • [測驗] HTML綜合練習
    03:38

  • 歷史與W3C
    02:33
  • CSS如何寫註解 (comment)?
    00:47
  • 如何寫行內樣式 (inline style)?
    01:51
  • 字體大解密
    04:09
  • 顏色寫法有哪些?
    04:06
  • 樣式套用規則與繼承 (inherit)
    08:00
  • 長度單位有哪些?
    05:30
  • Flow決定元素位置
    06:16
  • Box model決定元素大小 (width、height、padding、border、margin)
    27:47
  • Box sizing簡化寬高計算
    02:18
  • 前綴字 (prefix),caniuse,與 補完神器Prepros
    05:30
  • line-height 和 letter-spacing
    04:49
  • 陷阱!Margin collapse
    07:52
  • 陷阱!Inline-block/inline元素的莫名空白
    04:49
  • CSS Selector - Universal & Type Selectors
    02:00
  • CSS Selector - Class Selector
    07:25
  • CSS Selector - ID Selector
    01:10
  • CSS Selector - Attribute Selector
    10:57
  • CSS Selector - Descendant Selector
    03:32
  • CSS Selector - Child Selector
    04:13
  • CSS Selector - Group Selector
    03:22
  • CSS Override Rule
    11:19

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

  • 本課程所使用的圖片均來自Unsplash
    00:32

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:

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

Instructor

蔡偉駿 Jimmy Tsai
前端工程師、軟體工程師
蔡偉駿 Jimmy Tsai
  • 4.7 Instructor Rating
  • 89 Reviews
  • 1,394 Students
  • 1 Course

大家好,我是蔡偉駿 (Jimmy Tsai),擁有6年以上軟體開發經驗,曾在趨勢科技 (Trend Micro)擔任資深軟體工程師,也曾在台積電 (TSMC)擔任研發工程師。我的專長是網頁前端開發和自動化,常用的技術為 HTML/CSS、JavaScript、Node.js、React、Webpack、Python。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.