你將在課堂中，從零開始入門 Bootstrap 4.0，並獨立完成一個Bootstrap為基礎的入口網頁（Landing Page）。課堂將步驟式引導：Bootstrap的基本使用方式，並最後讓使用者自行建立一個入口網頁。

不知從何下手學習 Bootstrap 嗎？即便知道從何處找尋正確文件學習，但花很多時間看文件、讀範例，還是覺得不能掌握 Bootstrap 與 Casear 二位 Web Fullstack Developer 開發者，共同設計與規劃高效率的 Bootstrap 入門課程。透過 2 Step by Step 專題 與 Landing Page 專題，讓 Bootstrap 初學者 6 小時內，跑完入門的實作流程，有效率地成為 Bootstrap 前端使用者。

課程大綱

本課程採用工作坊形式，學習 Bootstrap 的入門知識（Level 101）。Bootstrap 實戰教學的理念：有效率地入門 Bootstrap 前端開發。

• 第 1 課：Bootstrap 基本元件操作
• Bootstrap 介紹
• 安裝與環境設定
• Bootstrap Responsive 說明
• Bootstrap 基本CSS元件介紹與使用
• 第 2 課：Bootstrap 進階Javascript 元件操作
• jQuery 簡易介紹
• Bootstrap javascript 元件操作
• 第 3 課：從無到有使用 Bootstrap
• 描繪你的網頁
• 開發你的第一個入口網頁
• 第 4 課：其他類似的Framework
• Semantic UI
• Material UI

學習藍圖

Bootstrap 基本元件操作	Bootstrap 進階Javascript 元件操作	建立你的Landing Page	其他類似的Framework
design tool	jQuery	Scratch	Semantic UI
CSS Component	Javascript Components	網頁實作	Material UI
Responsive

技術主題這麼多，請看以下說明，了解我們如何為初學者規劃 Bootstrap 工作坊。

課程說明

課程內容分為 4 個部份：Bootstrap 基本元件操作，Bootstrap 進階Javascript 元件操作，建立你的Landing Page，其他類似的Framework ，主要的內容如下：

• 開發環境的建置
• 認識 Bootstrap 與 Component 觀念
• Bootstrap 上手操作
• Frontend 製作

其他類似的Framework的部份，會講解必須知道的差異與使用觀念，內容如下：

• 與Bootstrap的差異
• 如何快速掌握其他的framework

上述主題是採用解說的方式，並不會有太深入的實作，或是理論討論；目的是搭配 Bootstrap 的實作，在實作的過程，瞭解framework的基礎，並理解與其他的差異。

本課程採取工作坊形式，教學定位是「初學者入門與上手」。

專題演練

Bootstrap 採用工作坊的形式，搭配 2 個專題：

• Step by Step 專題，讓初學者完整實作一次 Bootstrap 的入門（Level 101 實作流程）
• Landing Page 專題，讓初學者完整演練整個 網站開發實作，並再次練習 Bootstrap 入門觀念

課程對象

本課程適合：

• Web Frontend 初學者
• 對美工設計沒有經驗的工程師

講師團隊

Jollen Chen

Jollen，Node.js 全端開發者、Moko365 的技術總監暨講師。正使用 React 與 Node.js 開發 Decentralized IoT 與 P2P IoT 的專案。

Casear Chu

Casear，對於前後端技術皆有興趣，曾於 Microsoft 與 TrendMicro 任職，於 2012 年獲得 Node.js Knockout 台灣區第一名。曾於 JSDC 2014、2015 擔任講師，也是 SlideNow（線上 Markdown 編輯 Slides）的創辦人。目前興趣轉向 IoT，於 2015 年建立 KitchBot，轉至於廚具的系統分享與建立，並獲得聯發科穿戴式比賽亞軍。

開課時間

• 時間：平日下午班，2 個下午、共計 6 小時
• Day 1:
• Day 2:
• 地點： 台北市博愛路 25 號 3F

開課紀錄