五倍紅寶石・專業程式教育

五倍紅寶石 ・專業程式教育機構

快速實踐客製化網站樣式又易於維護的現代 CSS framework - Tailwind CSS !

CSS 一直都是網站開發人員的痛點,亂七八糟的命名,無限的 important 互蓋,沒有限制的開發,會讓團隊欠下滿滿的技術債。

導入 Tailwind CSS 讓團隊有個共同的 CSS 架構

其豐富內建的 utility class 滿足絕大部份的 layout,減少團隊客製化 style

透過其強大的 config 設定,能夠快速擴充團隊所需要的 style。

當然也可以完美與 React / Vue 等任何 framework 整合。

Tailwind CSS 雖然可以快速引用進專案,但強大的功能還是需要透過 CLI 編譯

課程會介紹到 Tailwind CLI 與 webpack 的整合應用,讓你開發起來更得心應手。

課程特色

Tailwind CSS 課程內頁 - Banner

不管你是前端或後端工程師,在維護網站時總是會因為 CSS class 命名而經常搞混、還有 CSS 父層與子層選取的問題,經常讓接手的開發者相當頭痛,因為這些問題誕生了 Tailwind CSS ,他試圖要解決 CSS 維護的困難,讓工程師可以更專注在開發上,同時在 2021/11 月份發佈的 Tailwind CSS v3.0 版本中更是支援更多 CSS 樣式。

像是擴充更多色票、 Just-in-Time (讓開發時直接 Build 你有用到的 class)、左右滑動 (Scroll snap API)、更自由的 shadow 樣式等(更多 v3.0 更新內容請參考官方文件說明

想要入手 Tailwind CSS 到你的專案嗎? 👀

又或是你有遇到以下情境嗎?

  • 接手專案時發現要修改 CSS 樣式時,因為上面包太多層,所以不得已下了很多 important 🧨 

  • 肥大的 CSS 樣式管理專案,改不動只好再寫一樣的 CSS 樣式 🧨 

  • 使用 Vue.js 或 React 前端框架開發客製化網站,但又希望可以好維護。

  • 有接觸過 Tailwind CSS 但對於 CLI 、Webpack 整合還不熟悉,想要導入在現有的專案,但又不知道如何開始 😩

  • 想知道 Tailwind CSS v3.0 升級了哪些功能?

  • 之前只用過 Bootstrap 用 CDN 引入 CSS framework ,換到 Tailwind CSS 不知到如何開始。

這些,情境都可以在這堂課來聽奶綠茶老師分享,一起開始你的 Tailwind CSS 開發之旅!

🛎 課程提醒,上課之前你需要具備:

立即報名
廖珀均

廖珀均

奶綠茶

講師簡介

資深前端開發者與程式開發講師,授課資歷十年以上。

擅長 HTML、CSS、JavaScript、jQuery、Vue、React 開發應用與 Webpack 前端打包工具等,專修各種前端跨平台的疑難雜症。

另一個身份為花鬍子樂團吉他手,育有二貓,喜愛小酌。

適合對象

Tailwind CSS 適合對象

👩‍💻 🧑‍💻  如果你是....

  1. 前端工程師 / 網頁工程師

  2. 對整合 CSS 架構有興趣的開發者

  3. 對手上專案 CSS 亂七八糟,想知道 2022 最好用的 CSS 開發方式

  4. 是 React 或 Vue.js 的開發者,想導入 Tailwind CSS 到專案內

  5. 想要知道 Tailwind CSS 如何使用與整合

課程大綱

  • 導入 Tailwind CSS 的優點

  • Tailwind CSS vs Bootstrap

  • Tailwind  CLI

  • Webpack 與 Parcel 的整合應用

  • Tailwind CSS 與 SCSS 整合

  • Tailwind CSS custom theme

  • Tailwind CSS config 擴充

  • Tailwind CSS 與 React / Vue.js 的整合

  • Tailwind CSS 與 Vite

  • Tailwind CSS 與 CSS Module / BEM 的整合

  • 現行已存在的專案如何導入 Tailwind CSS

  • Tailwind CSS 優化

  • 用 Tailwind CSS 輕鬆打造 Disney+ 網頁

  • 用 Tailwind CSS 輕鬆打造 Nike 網頁

立即報名

扎實課程搶先看

TailwindCSS 課程內頁 - 標題圖 - 課程內容
Tailwind CSS 課程內容

這門課將由淺入深,奶綠茶老師將帶你從 Tailwind CSS 的特色說起、因應現在的前端框架的發展,Tailwind CSS 實際解決了開發上的哪些問題?以及它與 Bootstrap 的差異。

課程中後半段老師將花較大的篇幅分享如何將 Tailwind CSS 與 Webpack 、React、 Vue.js 整合應用。如果你是 React 或 Vue.js 的開發者可能好奇 Tailwind CSS 如果導入專案時會不會有什麼問題?

最後,也將會以現代的大型網站 Disney+Nike 為例,教你用 Tailwind CSS 切出設計稿!學後立即應用!

這門課將會教:

💠 Tailwind CSS 簡介

  • Tailwind CSS 的特色與優點

  • 什麼是 utility class? Tailwind CSS 實際開發時會是什麼樣子?

  • Tailwind CSS 與 Bootstrap 的差異?大部分的就專案還是使用 Bootstrap ,為什麼還要學 Tailwind CSS 呢?

💠  Tailwind CSS 起手式

  • 從 Tailwind CLI 開始,讓你的專案跑起來!

  • Tailwind CSS 與 Webpack 、Parcel 打包工具整合。

  • 習慣用 SCSS 寫樣式? Tailwind CSS 與 SCSS 整合。

💠  客製化 Tailwind CSS

  • 有自己的品牌顏色、字體、自定義螢幕斷點等?Tailwind CSS custom theme 與 config 擴充你的樣式。

 💠  Tailwind CSS 實戰應用

  • 應用在前端框架 React / Vue.js 示範,有哪些整合需要留意?

  • 以 Vite 為例,如何結合前端開發工具快速打造你的網站。

  • 與 CSS Module / BEM 整合

  • 現有專案 Tailwind CSS 導入指引

  • 如何優化 Tailwind CSS 

  • 用 Tailwind CSS 輕鬆打造 Disney+Nike 網站

五倍紅寶石專業程式教育機構因應疫情發展,

🚨 實體教學課程落實社交距離注意事項:

  1. 每天都會要求學員量體溫、使用酒精消毒雙手
  2. 進入教室,也規定戴口罩;就算在用餐時,也會提醒同學盡量不要邊吃邊聊天
  3. 每場與課程相關的活動,都會要求填寫實名制健康聲明卡
  4. 學員下課後,會進行空間的次氯酸空氣消毒
  5. 每週都會安排漂白水、紫外線殺菌燈消毒
  6. 若有呼吸道疾病,或被政府匡列的接觸者,禁止進入教室,並可使用補課平台觀看線上補課
  7. 除上述之外,我們也全力配合政府防疫規定,讓每位學員都能在安心的環境學習

立即報名

Tailwind CSS 實戰課程

課程類別與程度

前端課程初階課程

近期開課時間

2022 / 12 月班

12/11(日)、12/18(日)

10:00 - 17:00

時數: 12 小時

優惠價

NT$ 7,500

搶位報名

組團報名享折扣

兩人同行 或 一次購買 2 堂課,享 9 折優惠

三人同行 或 一次購買 3 堂課,享 85 折優惠

更多團報或課程諮詢請洽 02-2331-5247

五倍紅寶⽯課程提供

結業證書

結業證書 | 五倍紅寶⽯課程提供

課程結業證書證明

課程討論群組

課程討論群組 | 五倍紅寶⽯課程提供

共同討論課程群組,

老師同學即時交流

wifi

wifi | 五倍紅寶⽯課程提供

備有插座及快速穩定

免費 wifi 連線操作

線上補課

線上補課 | 五倍紅寶⽯課程提供

線上補課,

不怕跟不上進度!

默默會

默默會 | 五倍紅寶⽯課程提供

每週二獨家默默會

讓你問題問到飽

業界高手一同交流

吉祥物貓貓

吉祥物貓貓 | 五倍紅寶⽯課程提供

吉祥物貓貓加持

搶位報名