完整的 Flexbox 課程:學習 CSS3 Flexbox 2018

Flexbox 是現代 Web 布局的主流方式之一,也是新的W3C標準規範,本教程將教你如何使用新的CSS3 Flexbox box model 更有效地創建響應式 Web 佈局!

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

  • 自信地使用 CSS Flexbox 建立新潮的佈局
  • 更有效地設計網站
  • 編寫高品質和可重複使用的 CSS 程式碼
  • 垂直對齊任何元素
  • 利用容器中的剩餘空間
  • 使用 Flexbox 設計出漂亮的反應式陳列 ( responsive galleries )
  • 實現所謂的聖杯( Holy Grail )佈局

要求

  • HTML 和 CSS 基礎
  • 使用程式碼編輯器

說明

完成本課程後,你將能夠使用 Flexbox 做 …

  • 垂直對齊任何元素
  • 做出新潮的網格
  • 佔用剩餘空間
  • 添加元素之間的間距
  • 實現完整的網站佈局
  • 還有更多!

在課程中,我會回答你可能會有的所有問題

要了解你是否能運用 Flexbox 實踐,課程中將有3個小型專案將驗證你的技能,並讓你能夠在未來的 Web 設計專案中有效地應用 Flexbox。

我的學生是如何形容我的(以下評論從我的其它課程中取得)

真是很棒的課程。這已是我跟著 Peter Sommerhoff 學習的第二個課程。

一個很棒的教師,用非常簡單的方法說明。

– Ahmed

我絕對喜歡這門課程,它教你所需要的一切細節而且更多!他們真的傾聽學生的聲音,回答的速度如路跑運動員一樣快。非常感謝你發表這課程,期待其它課程!

– Ana

很棒的課程,Peter 說明的淋漓盡致,他在一天內回答任何問題

– Dunja

課程快速簡明地涵蓋所有需要的資訊,沒有多餘或浪費的部分。它提供足夠準確的附加資訊和文件。我覺得很有價值

– Robert

我很高興收到如此來自我的學生的好評,我會竭盡全力為你提供最好的學習。

我期待在裡面見到你:)

在本課程中,你將學習使用每個 Flexbox 屬性:

設計 flex 容器樣式:

  1. flex-direction
  2. justify-content
  3. align-items
  4. flex-wrap
  5. align-content

然後單獨的 flex 項目:

  1. order
  2. align-self
  3. flex-grow
  4. flex-shrink
  5. flex-basis
  6. flex

最後,我們將看一下實際的 Flexbox 範例,看看可以實現什麼樣的佈局:

  • 使用 Flexbox 的簡單網格,讓所有攔都具有相同的大小
  • 更進階的 Flexbox 網格,讓列可以具有任意大小
  • 垂直居中對齊任何元素
  • 媒體物件,流行的 OOCSS 模式
  • 聖杯佈局,一個完整的網站佈局具有側邊欄( sidebars )和 sticky footer

贈品:本課程包含一個完整的 Flexbox 檢查表,你可以使用它來總結你學到的所有內容,並在使用 Flexbox 時的參考。

此外,我還提供了一個 Flexbox 展示的程式碼範例 – 它就像一個互動式的備忘錄,讓你在瀏覽器中查看包含教學中每個屬性和每個佈局的範例。

目標受眾

  • 希望提高前端技能的網頁設計師和開發人員
  • 想提高生產力的設計師
  • 任何想跟上最新發展網路標準的人

講師介紹

Peter Sommerhoff    開發人員與軟體工程師 – 擁有20,000多名學生

嗨, 我是 Peter,很高興你來到這裡!如果你像我一樣,想要持續學習,掌握新技能,最終實現你的人生目標 — 不論是回報優渥的職業生涯、離開舒服的窩去做世界旅行,或是分享你的專業知識並幫助他人。

這聽起來像你嗎?參加我的課程,並學習很棒的程式語言、軟體設計 、生產力或任何你感興趣的內容!

我對每一位學生都深感榮幸,並將確保你有一個很好的學習體驗。當你在學習過程中被卡住時或需要任何幫助,歡迎隨時問我問題。

那麼現在就參加我的課程吧! 希望在課堂上與你見面!


課程網址♥找優惠折扣碼?
1061202_291d_6

Sponsored by Udemy

你可能會有興趣

喜歡我們的分享嗎?歡迎使用以下的社群分享按鈕分享給你的朋友吧!

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: