進度條

線上程式教學課程: Bootstrap 5與Sass,製作RWD客製化響應式網站

製作RWD響應式網站已成為前端工程師基本能力,但是你有能力脫離預設外觀進行客製化嗎?疊床架屋的CSS語法你確定可以維護?本課程從Bootstrap Sass原始碼下手,讓調整前端畫面不再是你的惡夢。

最後更新時間: 2021/09

Loading

特價 NT$: 1900

原價 NT$: 4200

優惠至:2021/09/26

課程包含:

終生於平台觀看 詳情

6個章節,1堂影片

0小時以上的課程時間

本課程未在其他平台上架。


信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率 查看支援銀行

(信用卡不留卡號,Paypal需非台灣)

課程敘述

【 課程將於 9月29日開始進行,每周持續進行更新,預計於 12月底完成課程】

 

來看看範例實作的成果吧!
https://progressbartw.github.io/bootstrap3/
(此範例為Bootstrap 3 課程完結範例,Bootstrap 5 課程會建立在此之上講授更多內容)

 

現代人通常都擁有不同視窗大小的電腦或是行動裝置,以至於在製作網站的時候無法用單一尺寸的視覺設計方式來考量,不然畫面絕對會無法正確呈現,嚴重甚至網站無法正常運作。而響應式網頁設計就是為此而生的網頁設計方式。

 

響應式網頁設計 RWD = Responsive Web Design,又稱自適應網頁設計。除了對一般使用者外,對於搜尋引擎最佳化、SEO 來說是相當重要的一環,也就是 Google 等搜尋引擎提倡的「行動裝置優先」中的重點。

 

製作優良的響應式網站必須以 CSS 為主體去做設計開發,而是市面上也有不少將 CSS 常用套路組合成可以直接使用的網頁元件,已達到快速開發的目的,可以在網頁開發一開始節省 70% 甚至以上的時間。而此課程將要介紹的 Bootstrap 為製作響應式網站中最熱門的框架。

 

(不知道 HTML、CSS、JavaScript?可參考:HTML, CSS, JavaScript, jQuery 網頁從零開始)

 

Bootstrap 相當好用,從 Bootstrap 3 開始就成了市場的霸主,Bootstrap 4 雖然在技術層面上有所變化,但大部分繼承了前代的特性,並不會因為隔代而需要完全重新學習。

 

既然 Bootstrap 3 與 4 已經相當成熟,那為何需要 Bootstrap 5 呢?原因是因為除去響應式頁面外,這幾年網頁前端技術還是有相當多的變化。React 崛起導致 jQuery 逐漸式微,新的 JavaScript 版本也都已經吸收了 jQuery 的優點,製作出自己版本的語法。而 jQuery 被 Bootstrap 3/4 視為必要相依函式庫,導致與新型態開發方式有相容上的一些問題。所以 Bootstrap 5 最主要的目的就是擺脫掉 jQuery 的相依性,因此升級到 Bootstrap 5 是絕對有好處的。 

 

(更多 React 介紹可參考:ES6,ReactJS與Webpack,前端JavaScript全攻略)

 

本課程主要分為三個階段,第一個階段為使用 Bootstrap 5 快速開發,製作出標準常見的響應式頁面,讓對於開發響應式頁面沒有經驗的同學也可以快速上手。此階段的目標成果為有能力利用 Bootstrap 5 快速開發相應式頁面。

 

第二個階段我們會進入 Sass 與 Bootstrap 原始碼的講解。Sass 可以想成加強版的 CSS 語法,對於寫大量或複雜的 CSS 邏輯非常的有幫助,也是現在最主流的做法。Bootstrap 的原始碼也是先由 Sass 語法撰寫,再編譯成 CSS 語法。我們這個階段會從基礎的 Sass 語法開始講解,逐步加強難度到觀看 Bootstrap 的原始碼。

此階段的目標成果為有能力修改 Bootstrap 5 的基礎樣板外觀,並且製作相容於 Bootstrap 5 的客製化元件。並且不會破壞 Bootstrap 5 的原始結構,讓專案管理成為可能。

 

特別需要提到一點,前面說明提到使用 Bootstrap 在開發的一開始通常都可以提高速度,但是如果碰到高度客製化的需求又不懂 Bootstrap 的元件邏輯硬改的話,會導致中後期專案幾乎無法維護,因為沒有元件概念,導致隨便動一點整個畫面就崩壞破版了。這點只要對 Bootstrap 有更深入的理解就可以避免。

 

最後一個階段我們會加入探討 Bootstrap 包含 JavaScript 的元件邏輯,並且用我們自身修改出來的 Bootstrap 樣板進行開發製作一個完整的前端網站作為最後的範例練習,通過這樣的複合應用即可完成一個有強度的成品,也可依此邏輯修改製作自己的作品豐富作品集。

 

課程難度

初級,此課程需要一點基本程式經驗。

請參閱課程需求

課程需求

1. 知道什麼是瀏覽器,什麼是網站
2. 使用過 HTML / CSS / JavaScript
3. 知道電腦, 手機與平板螢幕大小不同
4. 有一台電腦

非必要,但會幫助學習
1. (曾經)有一個網站或需要維護一個網站
2. 了解調整已經做好的網站外觀的痛苦

課程目標

學會如何使用 Bootstrap 5 快速製作出同時符合電腦, 手機, 平板的網站,
並且了解 Bootstrap 原理有能力修改預設版型至符合設計師的規劃。
讓前端逐漸複雜的網站也有能力動手修改符合新需求而不造成其他破壞。

課程特點

1. 學習 Bootstrap 5 元件
2. 了解 Responsive web design
3. 學會快速開發技巧
4. 學習使用前端工具 Sass
5. 學習 CSS 規劃設計

第一章 (總長0.2小時)

Bootstrap 5 安裝與介紹
keyboard_arrow_down
  • play_arrow

    01. Bootstrap 5 與課程介紹

    11:11
  • 章節尚未完全完結,我們會持續更新!!

第二章 (總長0.0小時)

Bootstrap 5 元件使用與實作練習
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第三章 (總長0.0小時)

利用 Bootstrap 5 元件快速製作網頁佈局
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第四章 (總長0.0小時)

從零開始介紹 Sass 與實作
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第五章 (總長0.0小時)

Bootstrap 5 程式碼探討與客製化調整
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

第六章 (總長0.0小時)

利用客製化 Bootstrap 5 完成網站範例
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

課程講師

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師,但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司,範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設,手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷:
進度條 技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台 網站架構設計與建置
HelloStudy 楓禾留遊學網 設計與建置
Funlock 放樂工作室真實密室逃脫遊戲  - 魔鏡迷城 電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師