fbpx

CSS – 完整指引 (包含 Flexbox、Grid 和 Sass)

上手 CSS 或刷新你的 CSS 技能,並深入探索。 每個 Web 開發人員都必須知道 CSS。

課程介紹:English 简中

從這 22.5 小時的課程,你會學到

  • 建立美麗的網站,不僅包含精彩的內容,而且看起來很棒
  • 使用基本以及進階的 CSS 功能
  • 了解 CSS 和某些 CSS 功能背後的概念和理論

要求

  • 一般來說,你應該了解有關 HTML 和 Web 開發的基本知識
  • 並不要求有進階的 HTML 或 Web 開發知識
  • 不需要有 CSS 知識! 你會在這門課程中學到這一切!

課程說明

CSS -階層式樣式表( Cascading Style Sheets )的縮寫 – 是一種“程式語言”,用於將原始 HTML 頁面變為真正漂亮的網站。

本課程涵蓋了所有內容 – 我們從基礎知識開始(什麼是CSS?它是如何運作的?你如何使用它)? 並逐漸深入再深入。 我們通過展示實例以及背後的理論來做到這一點。

CSS 入門看起來很簡單,但實際上要完全了解 CSS 還蠻有深度的 – 於是本課程提供了不同的“軌道”或“入門點”,以準確地滿足你的需求並適應你當前的知識水準:

  • 基礎知識:從零開始,從頭開始學習 CSS。 你從第一講開始,直到最後。
  • 高級課程:你已經了解了 CSS 基礎知識,知道選擇器( selectors )是什麼以及它的工作原理,但希望深入了解並學習一些高級功能和用法。
  • 專家新知:你也擁有先進的知識,但想深入了解 Flexbox、CSS Grid、CSS Variables 或Sass 等。 這一軌道適合你。

當然,這門課程提供了理論和實踐的例子 – 我們將在整個課程中建立一個完整的真實專案 – 但也有多個作業、測驗和挑戰,讓你練習在整個課程學習的個別概念。

談談課程中的專案 – 我們將建構一個虛構的虛擬主機託管服務公司的前端(無後端)。 我們將做一個具有不同部分的初始螢幕,我們做一個帶有動畫側邊抽屜( side-drawer )的響應式設計,學習了模態( modals )和表單( forms ),且獲得很多CSS動畫,字體樣式等等!

以下是課程內容的細節 – 這也適用於上述課程專案:

  • 關於選擇器、組合器以及如何設置一般樣式規則的基礎知識
  • 屬性( properties )、值( values )和宣稱 ( decalrations )
  • 特定性和繼承的工作原理以及為什麼稱為“階層式”樣式表
  • 重要的理論概念,如“盒子模型 ( Box Model )”
  • 如何改變元素的預設位置
  • 樣式背景(例如漸層)和圖像
  • 你通常在 CSS 中使用哪些單位和尺寸(px、rem、%和更多)
  • JavaScript 和 CSS 如何互動
  • 響應式設計和“行動優先”意味著什麼
  • 樣式表單和表單輸入
  • 處理文本、字體和文本樣式
  • Flexbox! 它是如何運作以及如何使用它
  • 使用 CSS 網格及其與 Flexbox 不同之處
  • 借助 CSS 轉換和設置 HTML 元素的動畫效果
  • 使用 CSS 變數或最佳實踐類名稱(class names )等功能編寫未來性的CSS
  • 使用 Sass 並了解其實際上的意義

這門課程適合你嗎?

這是給你,如果…

  • 你開始學習怎麼寫網頁,想建立更美麗的網站
  • 你已經知道 CSS,但想更深入研究
  • 你正在以試錯的方式使用 CSS,並想改變這狀況(你應該!)

你可能以後再回來看這門課,如果…

  • 你是一個絕對的 CSS 專家,你打從心裡明白 CSS 運作的群組草圖
  • 你是一個僅做後端的開發人員(Node、PHP、NO HTML或前端 JavaScript )
  • 你是 Web 開發的新手,你沒有 HTML 的基礎知識

目標受眾

  • 任何想要開始學習 CSS 或希望提高 CSS 技能的人
  • 任何很想了解 Flexbox、CSS Grid 或 CSS Variables 等最新的 CSS 功能者
  • 任何知道 CSS 但希望深入探究者

講師簡介

Maximilian Schwarzmüller   專業的Web開發人員和講師

作為Web開發人員的經驗

從13歲起,我不間斷地學習新的程式設計技巧和語言。 早期我只是因為好玩開始為朋友做網站。 這種熱情一直持續下去,並導致我成為一個自由的 Web 開發人員和顧問的決定。 我在這份工作上獲得的成功和樂趣很豐盛,也引燃並持續這份熱情。

我從後端的 Web 開發 ( PHP 的 Laravel、NodeJS ) 開始,漸漸也做越來越多的前端開發,在很多專案中使用 Angular 或 VueJS 2 等現代框架。 我現在兩個世界都愛!

作為一名自學的開發人員,我有機會通過攻讀工商管理碩士拓寬視野,也取得學位。 這使我能夠在一家重要的戰略諮詢公司和一家銀行工作。 這段時間大大提升了我的整體經驗和技能。

身為教練的經驗

由於自我學習成為專業人士的經驗,我真正了解在學習新知識或改進已知語言時的困難部分和難題。 這種背景和經驗使我能夠專注於最相關的關鍵概念和主題。 我有很多五星級的課程記錄,在 Udemy 有超過10萬名學生以及成功的 YouTube 頻道,是最好的證明。

無論是作為開發的指導員,還是工商管理教學,我都收到很好的反饋。 最有意義的經驗是看到人們因此找到新的、更好的工作、建立很棒的網路應用程式、獲取令人驚奇的專案,或只是在我的教學幫助下把開發網頁當成嗜好享受其中的樂趣。

Manuel Lorenz   專業商業分析師

在一家大型諮詢公司和一家投資銀行擔任商業分析師之後,我總是發現自己面臨著各種複雜的資料集和挑戰性的客戶需求。 因此,越來越多的資料讓我需要不斷地調整,發現新的方法做有效地分析,且需要從 Excel 的VBA的自動化分析過渡到更複雜的商業智能工具。

作為新的快速發展的工具的早期採用者,我很享受學習這些工具,並將我的知識傳授給我的同事和同學。 結合自學資料分析的經驗與在高競爭性需面對許多客戶的諮詢環境,讓我除了以學習者的角度外,有能力從產業的角度來評估工具。 自學的經驗也使我能夠識別學生在學習這些工具時可能遇到的痛點。

由於我總是發現很難找到聚焦特定工具關鍵能力的高品質、易理解性和全面性的學習材料,所以我決定自己來拍攝和創作這些材料。

當然,我不僅熱衷於創作這些材料,且想利用這些材料將我的知識傳授給你。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

優惠資訊

如何購買這門課程比較划算?可以參考課程購買優惠說明


報名參加課程  

Sponsored by Udemy

也許你會有興趣

 歡迎使用 e-mail 訂閱 Soft & Share 

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: