fbpx

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

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

本課程給你最先進和最現代的CSS線上課程:精通動畫、flexbox、響應式設計…等

課程介紹:English 简中

從這 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 概念等等。

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

完成本課程後,你將:

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

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

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

  • 現代尖端的 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 !

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

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

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

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

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

目標受眾是誰?

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

講師介紹

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

嗨,我是Jonas!我被認為是 Udemy 的頂尖教練之一,我最暢銷的HTML5和CSS3課程最近已經成為最好的Web開發課程的前3名。

我是一個網頁設計師和開發人員,對從頭開始建構美麗的新事物有著巨大的熱情。我自2007年以來一直在建構網站,並擁有工程碩士學位。

我第一次在大學發現我的教學和分享我的知識,幫助他/她人的熱情。這熱情將我帶向 Udemy,我的學生真的很感激我花時間讓每個人都可以容易地理解的方式解釋重要的概念。

你想了解如何使用 HTML5 和 CSS3 建構令人驚訝的網站嗎?

想知道如何使你的網站看起來漂亮和專業?

尋找一個完整的 JavaScript 課程,從初學者到高級開發人員?

今天就報名參加我的課程,和已加入的 210,000+名快樂學生一起學習。如果我必須用一句話來描述我的每一門課程,我會說“這正是我在開始建立網站時所希望的課程”。

所以如果你不想像我一樣經歷所有的書和成千上萬的線上文章和教程,然後今天報名參加我的課程!我會非常高興與你分享我的知識,並幫助你一切順利。

因為快樂的學生也讓我快樂!

英文字幕:有

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

報名參加課程 | 更新優惠折扣碼

Sponsored by Udemy

也許你會有興趣

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

Spread the love

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: