Contents
建構 10 個實戰專案時 – 使用 CSS Grid 和 Flexbox 建立現代 Web 佈局,包括 SASS 和 CSS 過場( Transitions )
從這 12 小時的課程,你會學到
- 學習 Flexbox 和 CSS Grid 以建立令人驚嘆的/響應式 Web 佈局
- CSS Grid 和 Flexbox 是 Web 佈局的現在和未來,你將於課程中掌握它們
- 你還將學習如何在設計中實現 SASS、Gulp、JavaScript ES6 和其他工具
- 我們正在建構幾個範例,每個範例都會有所不同,因此你可以掌握這些工具
要求
- 如果你已經編寫了一些 HTML 和 CSS 的網站,並且你想學習 Flexbox 或 Grid,那麼這門課程適合你
- 如果你有使用基於浮動的佈局( float based layouts )的經驗並想學習網格( Grid )或 Flexbox,那麼本課程適合你
- 我們需要安裝一些工具:文字編輯器( VS Code )、Chrome 和 Firefox Developer Edition
課程說明
CSS Grid 和 Flexbox 是 Web 佈局的現在和未來。
在本課程中,你將學習兩種技術,我們正在建構幾個範例,包括 AirBNB 克隆、Udemy 和 Netflix 登入頁面,以及其他幾個專案(可以免費觀看視訊,你可以在其中檢視所有專案)
我們將從 Flexbox 開始,這是一種用於建構一維佈局的優秀技術,使用 Flexbox,你可以非常輕鬆地建立響應式網站,你將學習 Flexbox 的基礎知識,從 flex container、flex direction、flex wrap、flex flow 和其他。
然後我們將使用 Flexbox 建構一些專案,以便你可以更輕鬆地瞭解它的功能。
此外,我們將把 Flexbox 跟一些不錯的工具做整合,工具如 SASS、NPM、Gulp 以及一些帶有轉場( Transitions )和自訂屬性的進階 CSS。
然後我們將進入 CSS Grid 又名 GRID 或 CSS 網格佈局( Grid layout ),這是在 CSS 中原生建立 Web 佈局的最先進方式,使用 CSS Grid,你可以輕鬆建立更高階/響應式佈局,不再需要框架! 我們將使用 CSS Grid 建構幾個範例,以及網站 AirBNB 的克隆,以及你可以為你的客戶或個人使用的其他專案!
目標受眾
- 希望學習 CSS Grid 和 Flexbox 以建立現代 Web 佈局的 Web 設計人員和開發人員
- 任何具有任何框架(如 Bootstrap 或 Foundation )經驗的 Web 開發人員都可以參加本課程
講師簡介
Juan Pablo De la torre Valdez 自由網頁開發人員和 Easy-WebDev 創辦人
我叫 Juan Pablo De la torre Valdez,我來自瓜達拉哈拉。墨西哥。 在過去的 10 年裡,我一直在使用網路,我在現代 Web 技術方面擁有豐富的經驗,如 Foundation、Bootstrap、RWD、WordPress、Drupal、PHP、JavaScript 和 jQuery、HTML5、CSS3、SASS 和 Photoshop。 我創辦了一家名為 CreativaWeb 的公司,在那裡我設計和開發基於 WordPress 的網站。 我非常喜歡設計和開發網站,近年來我為我所在的城市、全國和其他國家的政府、大學、新創公司和中型公司製作了數百個網站。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To