Amos Lee 李建杭 | CSS 動畫課程教學 | RWD 課程教學推薦 | 五倍紅寶石

講師

李建杭 (Amos Lee)

資策會(台北、中壢) 講師
ModernWeb 研討會講者
亞馬勁雲科技前端工程師
中科大業界專家課程 講師
致理技術學院業界專家 講師
元培醫事科技大學業界專家 講師
凌網科技視覺設計師

本課程適合

  • 學生族群,想嘗試新領域,懂基本的 HTML & CSS
  • 設計師,對於網頁設計有興趣,想更精進設計感
  • 上班族,利用假日時間增進技能,獲取更高經驗值

你將會學到

  • 格線與排版
  • Flex
  • 內容與表格控制
  • 導覽相關組件
  • 表單組件
  • 按鈕組件
  • JavaScript 組件

為什麼我應該學 Bootstrap?

Bootstrap 網頁設計實作課程 - 假日班

Bootstrap 可說是近年最熱門的前端開發框架,內建常用網頁元件與 RWD 效果,可大幅節省網頁開發時間!

在 Bootstrap 團隊的不斷優化下,目前 Bootstrap 4 全面支援 Flexbox 與導入 Node SASS,讓您完全貼近主流開發模式,若您曾經學過 Bootstrap 3 以前的版本,更應該深入了解 Bootstrap 4,體驗更方便更彈性的 Bootstrap 4 新元素!

由教學經驗豐富的講師 Amos 帶領你快速上手,課堂上建立觀念、著重實務、操作技巧優化!讓您一次掌握 CSS 屬性功能,手機網頁、各種版型都難不倒您!

扎實課程內容搶先看

Bootstrap 網頁設計實作課程 - 假日班

第一階段:快速認識 Bootstrap

由業界經驗豐富講師 Amos 帶領,快速了解 Bootstrap 4 與 Bootstrap 3 差異,並瞭解 Bootstrap 最重要的格線切版觀念、不同裝置尺寸如何設置 RWD 效果,以及更多關於 Bootstrap 的基礎觀念。

除此之外更詳細瞭解 Bootstrap 4 一大變革「全面導入 Flexbox」,讓你不只是學會 Bootstrap,也一邊學會最新的 CSS 觀念。

Bootstrap 網頁設計實作課程 - 假日班

第二階段:常用元件全面解析

Bootstrap 最方便的功能之一就是整理了很多現代網頁中常見的元素,並將它們變為單個的元件,只要按照 Bootstrap 的命名規則套用,即使對設計並不擅長,也能夠快速建構出美觀的網頁。

常用元件介紹包含導覽列、麵包屑、表單、按鈕...等超實用網頁元素,Bootstrap 4 當中重要的卡片組件,也會清楚介紹觀念與應用實務!

Bootstrap 網頁設計實作課程 - 假日班

第三階段:進階瞭解 JavaScript 組件

以為 Bootstrap 只能幫你解決切版和 RWD 問題嗎?不!Bootstrap 也有內建常用的 JavaScript 組件,諸如常見的圖片輪播、摺疊功能,甚至是 Popover、Tooltip、滑動、滾動監聽、彈出視窗等都直接幫你一次解決囉!對 JavaScript 還不甚熟悉,但卻有以上功能的設計需求的話,絕對不能錯過!

Bootstrap 課程內容

一、介紹與準備

  • 尺寸與斷點
  • 裝置與尺寸
  • 檔案與方法
  • 快速了解 BS 4 與 BS 3 差異

二、格線與排版

  • 重點觀念
  • 格線撰寫規則
  • 格線偏移與排序
  • 格線應用規則
  • 定寬容器與滿版容器
  • 重要層級說明
  • 對齊控制
  • 顯示與隱藏控制
  • 重要的卡片組件
  • 卡片組件應用實務

三、關於 Flex

  • 原理與語法規則
  • 應用觀念
  • 換行控制
  • 寬度控制
  • 對齊控制

四、內容與表格控制

  • 頁面標題控制
  • 表格組件應用
  • 引用組件
  • 清單設定
  • 原始碼組件
  • 圖片 RWD 控制
  • 滿版螢幕組件
  • 進度條組件
  • 警告區塊

五、導覽相關組件

  • 導覽列製作
  • 導覽列修改方式
  • 麵包屑
  • 下拉選單製作
  • 清單群組組件
  • 分頁導覽組件

六、表單組件

  • 表單設定
  • 表單群組
  • 輸入群組
  • 表單修改技巧

七、按鈕組件

  • 按鈕設定方式
  • 按鈕色彩
  • 按鈕尺寸控制
  • 按鈕群組與設定

八、JavaScript 組件

  • 輪播組件應用與設定
  • 摺疊組件應用與設定
  • Popover 組件
  • Tooltip 組件
  • 滑動組件
  • 滾動監聽組件
  • 彈出視窗組件

五倍紅寶石課程提供

程式網頁設計課程結業證書證明 | 五倍紅寶石

課程結業證書證明

程式網頁設計線上補課 | 五倍紅寶石

每週二獨家默默會讓你問題問到飽 & 業界高手一同交流

前端後端課程詢問 | 五倍紅寶石

共同討論課程群組,老師同學即時交流

程式課程環境 | 五倍紅寶石

舒適教室環境,備有插座及快速穩定免費 wifi 連線操作

程式網頁設計線上補課 | 五倍紅寶石

線上補課,不怕跟不上進度!

程式課程貓 | 五倍紅寶石

吉祥物貓貓加持

五倍紅寶石上課環境、地點

上課地點:台北市中正區衡陽路 7 號 5 樓
交通資訊:台大醫院站 1 號出口 (走路 4 分鐘)

立即揪團課程享折扣(名額有限)

超值加購方案

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

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

更多團報 or 相關課程諮詢請洽 02 - 2331-8188

立即報名搶位

報名及付款方式:

  1. 點擊「立即報名搶位」連結並填寫表單。
  2. 課程達開課人數後,我們會主動寄發繳費連結。
  3. 線上繳費(刷卡或匯款),或是現場現金或刷卡繳款。
  4. 匯款帳號資訊:
    • 銀行:華南商業銀行 營業部
    • 帳號:100-10-034068-2
    • 戶名:五倍紅寶石股份有限公司附設臺北市私立五倍紅寶石文理技藝短期補習班

注意事項:

  1. 課程內容、日期及講師可能因故有所修改,主辦單位保留異動之權利。
  2. 學員需自備筆記型電腦。
  3. 本次課程僅開放 30 人報名。
  4. 報名費不包含餐費。
  5. 若報名學員人數不足 10 人,將視情況取消當次課程,並全額退還報名費用。
  6. 如有企業或團體課程需求,歡迎直接來信洽詢。

聽聽看同學怎麼說