進階的 CSS 和 Sass：帶你的 CSS 到新境界

CSS 看起來很容易上手。但事實上，大多數開發人員太過低估 CSS 的重要性和威力。 CSS 讓設計能靈活呈現。且運用它可以做到許多事！掌握像 flexbox、CSS 網格和動畫等先進的技術，將會給你許多勝過仍使用過時方法的 CSS 開發者，擁有優勢。

本課程給你最先進和最現代的 CSS 線上課程：精通動畫、flexbox、響應式設計…等 ( 有中文字幕 )

課程介紹影片

從這 28 小時的課程，你會學到

創造驚人的設計和效果的許多現代 CSS 技術
進階的 CSS 動畫與 @keyframes、動畫和過場效果
CSS 如何在幕後工作：串聯 ( cascade )、特異性 ( specificity )、繼承 ( inheritance ) 等
CSS 架構：基於元件的設計、BEM、編寫可重用的程式碼等
CSS Grid 佈局：使用 CSS Grid 建構一個巨大的實際專案
在實際專案中使用 Sass：全域變數、架構 CSS、管理媒體查詢等
先進的響應式設計：媒體查詢、手機優先 vs 桌面優先、em vs rem 單位等
讓 HTML 和 CSS 響應式圖像更快地在頁面呈現
Flexbox 佈局：用 flexbox 建構一個龐大的實戰的專案
SVG 圖像和影片在 HTML 和 CSS：建立一個背景影片效果
NPM 生態系統：發展工作流程和建置過程
在課程問答中獲得友善和快速的支持
所有專案都有可下載的講義、程式碼和設計資產

規定為何？

這不是初學者課程 – 在修本課程前，你應該對自己的 HTML 和 CSS 編寫能力有信心
熟悉任一電腦和操作系統 – Windows、MacOS 或 Linux
不需要購買任何付費軟體 – 只要你有文本編輯器就能跟著做

課程說明

是否已寫 CSS 一段時間，但想要把你在這方面拉到新的水平？是否對於像 CSS 繼承、特異性或串聯等 CSS 的術語感到混淆？

如果有一個資源、一個地方，可以在那學習所有你正在研讀的進階和現代的 CSS 技術和屬性呢？

好消息：有的！

歡迎來到網路上最進階、最現代、最完整的 CSS 課程 “進階的 CSS 和 Sass”。這裡有你在進階 CSS 課程中所需的一切，且更多。

你將學習複雜的 CSS 動畫、進階的響應式設計技術、Flexbox佈局、Sass、CSS架構、基本的CSS 概念等等。

就像在我所有的課程中一樣，你將會開發美觀且精心設計的專案，這將使你為自己感到自豪，並讓你準備好建立復雜的專案。

完成本課程後，你將：

用最現代化和進階的 CSS 屬性和技術來加快速度;
掌握尖端的佈局技術 Flexbox 和 CSS Grid;
準備好為各種設備和情況建構響應式佈局;
真正理解 CSS 如何在幕後工作;
能夠使用 Sass 來建構大型 CSS程式碼庫，以實現可重用性和可維護性。

請注意，這個課程不是為絕對的初學者設計，你應該已經有 HTML 和 CSS 中級程度（如果不是這樣的話，請查看我的其他課程）

這個課程非常龐大，超過 28 個小時。這裡有你正需要的學習的內容：

現代尖端的 CSS 技術創造出驚人的設計和效果：剪輯-路徑 ( clip-path )、背景剪輯 ( background-clip )、遮罩圖像 ( mask-image )、背景混合模式 (background-blend-mode )、形狀-外部 ( shape-outside )、過濾器、背景濾鏡 ( backdrop-filter )、對象-擬合 ( object-fit )、變換、列-計算 ( column-count )、連字號 ( hyphens )、透視 ( perspective )、calc（）和自訂的 CSS 屬性;
進階的 CSS 動畫與 @keyframes、動畫和轉場;
現代 CSS 開發所需的進接 CSS 選擇器、偽類 (pseudo-classes )和偽元素 ( pseudo-elements );
CSS如何在幕後工作：串聯 (cascade )、特異性、繼承、價值處理、視覺格式模型、盒模型、盒類型、定位方案和堆疊上下文 ( stacking contexts );
CSS 架構：7-1規則、基於組件的設計、BEM方法、編寫可重用碼、可維護和可擴展的程式碼;
Sass 簡介：變數、嵌套 ( nesting )、部分 ( partials )、輸入、混合、函數、延展…等等;
在實際專案中使用 Sass：設置全局變數、為可重用性做建構、架構 CSS 和管理媒體查詢;
NPM 生態系統：建立一個開發過程來編譯 Sass 和自動做瀏覽器的重新載入，並創造一個可串聯 ( concatenate )、前綴 ( prefix )和壓縮 CSS 檔案的建構過程 ;
現代響應式設計：流體網格 ( fluid grids )、佈局類型、靈活的圖像、使用媒體查詢來測試不同的螢幕寬度、像素密度和觸摸 ( touch ) 功能;
先進的響應式設計工作流程：行動優先 vs 桌面優先策略、選擇斷點、em vs rem 單元和測試瀏覽器支持的功能查詢;
讓頁面更快呈現的 HTML 和 CSS中的響應式圖像：解析度切換、密度切換、美術指導;
HTML 和 CSS 的SVG 圖像：如何以及為什麼使用SVG、生成 SVG 精靈( sprites )、更改 CSS 中的 SVG 顏色和最佳做法;
HTML 和 CSS 的影片：建構背景影片效果;
Flexbox 佈局：主要概念、Flex 容器和 Flex項目特定屬性的介紹、應用於龐大的實戰專案的先進定位技術;
CSS網格佈局：主要概念、CSS網格 vs flexbox，以及應用於實戰專案的佈局技術。僅此部分就可能是一個完整的課程！

你為什麼要上這門課？

所以你看到這個課程絕對是內容豐富的。但也許你還不確定你是否應該學習進階CSS？

這可能是因為 CSS 很容易上手。事實上，大多數開發人員都高度低估了 CSS 的重要性和強大功能。但沒有什麼能比離開真相更遠！

CSS 使我們的設計成為現實。我們可以用它做很多事情！掌握諸如 flexbox、CSS網格( Grid )和動畫等進階技術，將使你比那些仍然使用過時方法的許多 CSS 開發人員更具優勢。

此外，當你嘗試掌握 CSS 時，以及當你必須維護大型專案時，CSS 可能會成為真正的噩夢。因此，掌握基本概念對於任何認真的前端開發人員來說都是絕對必要的。

本課程將幫助你完成所有這些！那麼，你應該參加這門課程嗎？

答案很可能是一個大聲回覆 YES !

我在這門課程中收錄了很多內容，無論你是剛剛開始，還是已經是一位經驗豐富的前端開發人員，在本課程中肯定會有適合你的東西。

以下將會是你今天註冊會得到的：

終身 28 小時以上的高解析度畫質影片。沒有每月訂閱的問題。隨時隨地學習;
所有影片都可以下載。即使沒網路，也可以隨時隨地學習！
在有問題或遇到困難時，歡迎來到課程問答，你將獲得友好和快速的支持;
英文字幕（不是由 Udemy 提供的自動字幕）; 簡中字幕
PDF格式的課程簡報;
每個專案都有可下載的資產、起始程式碼和最終程式碼;
影片中包含許多小挑戰，因此你可以查驗自己的進度。

如果你現在還在這裡，那麼請觀看宣傳影片與課程專案，我保證你會感到驚喜 🙂

在此之後，我誠摯歡迎你來上課。我相信你會愛上它的！

目標受眾是誰？

希望將 CSS 技能更新到最現代的水平的 CSS 開發人員
希望將自己的技能工具箱擴展到動畫、flexbox、Sass、NPM、SVG… 等的CSS 開發人員
希望最終能了解 CSS 如何在幕後工作的前端開發人員
一般來說：任何想要真正掌握 CSS 的人！

講師介紹

Jonas Schmedtmann ( 更多講師主講課程介紹 )

嗨，我是 Jonas！我已被確定為 Udemy 的頂級講師之一，我的所有高級課程都因出色的表現和學生的滿意度而獲得了最暢銷的地位。

我是一名全端 Web 開發人員和設計師，熱衷於從頭開始建構美麗的事物。自 2010 年以來，我一直在建構網站和應用程式，並且還擁有工程學碩士學位。

通過分享我在大學時所知道的一切，我發現了我對教學和幫助他人的熱情，這種熱情將我帶到了 2015 年的 Udemy。

在這裡，在我所有的課程中，學生們最喜歡的是我花時間以每個人都容易理解的方式解釋每個概念。

那麼，你想學習如何使用現代 HTML 和 CSS 建構出色的網站嗎？

正在尋找一門完整的 JavaScript 課程，讓你從零到高級開發人員？

或者，也許你想使用 Node.js 建構現代且快速的後端應用程式？

然後不要在隨機教程或不完整的 youtube 視頻上浪費時間。我所有的課程都是易於學習的一體化課程包，可將你的技能提升到一個新的水準。

這些課程正是我第一次進入 Web 開發時希望擁有的課程！

所以你自己看看，註冊我的一門課程（或所有課程：D），今天加入 1,000,000 多名快樂的學生。

字幕 : 英文，中文

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

點選 ✨ 大多課程 NT320優惠連結 (到 425 )| Udemy 永久擁有課程 ( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現