質感網站輕鬆不求人，學會如何使用 Bootstrap 建立網頁及元件，並且創造出具職場競爭力的能力
恭喜你！你已經來到了最後一步囉！
相信已經看到 Bootstrap 的你，對於網頁開發已有一定的了解。不管你是後端、前端工程師或是網頁設計師等，應該可以同意要建構一個具美感、符合需求與規範的網頁並非一觸可及吧！
在 CSS 奇怪的特性下，要將畫面調整到與設計稿一致並非容易的事情；加上響應式網頁的普及，行動式裝置瀏覽網頁是非常普遍的事情。也因此，為了讓開發者能夠更容易做到網頁設計、行動優先的功能，這堂課程將介紹 Bootstrap 的前端框架給你，這是世界最受歡迎的前端框架，有了這技術製作具質感的網站再也不求人！
你是否曾經看過 Bootstrap 的相關文件，卻無奈眾多資源皆是以英文為主嗎？
六角學院是 Bootstrap 繁體中文版的翻譯者，且獲得官方認證，所以在這堂課程中，不用擔心看不懂英文文件，中文版本已經幫您備妥妥，跟著六角講師的腳步一起學習就沒有問題囉！
超過百萬開發者使用！ 最受歡迎的網頁設計框架，增加工作效率，打造堅強實力！
Bootstrap 可以說是目前公認最流行的前端開發框架，內建多項模組化的版型、表單、按鈕等元件組合。也因為它具有大量的元件可供靈活使用、標準化的靈活格線，其架構具有標準化的語意，除了能夠讓前後端開發相互整合之外，也能夠省下大量的 UI 設計時間。而透過 Bootstrap 設計出來的前端 UI，具有極高的兼容性，能完美呈現在各種裝置！
在 Bootstrap 團隊不斷優化，以及眾多開發者的使用見證下，Bootstrap 以調校適用於各類型網頁服務下，無論是活動頁面、購物網站、控制台、行動版網頁一律適用。透過更加便捷開發方式，提供大方、直覺好操作的 UI 體驗給所有人。
Bootstrap 4 的進化，為網頁設計帶來了哪些優勢？
1. 融入自由度強大的 Flexbox豐富樣式簡單完成
Flexbox 取代了傳統 table、float 單調排版，讓你不再為了達不到而哭泣，靈活完成各種版面排列、欄位設定，豐富變化就在彈指之間。2. 元件化繁為簡，卡片樣式以一擋百
新的卡片元件取代過去幾個不常使用的元件，如將 Panel、Well、Thumbnails 統一整合成 Card，功能不僅沒有變少，並且有更多變化。3. 導入 Node SASS，更貼近於主流的開發模式
Bootstrap 從 Less 轉變到 Sass，不僅擁抱更龐大的社群能量，且新的 Sass 環境編譯速度大幅提升，讓你輕鬆製作屬於品牌專屬設計。 在這堂課程中，更是會結合 Gulp Sass 自動化，讓同學輕鬆了解如何客製化元件。
1. 300 分鐘精實課程從概念到實作，Bootstrap 各項功能精準掌握！
跟著六角學院一起學習，你會發現，這門課程不單單是帶著你認識元件的基礎課程而已 — 在課程中會提供完整的操作概念、框架教學以及元件應用。讓你不只知道該怎麼做，還能明白為什麼要這樣做，能夠成為得心應手的 Bootstrap 專家！
2.跨平台常見網頁切版教學，不同裝置介面也不慌張！
Bootstrap 能輕鬆完成相容於手機、平板、PC 等的響應式網站，課程中會提供這三種常見的切版運用，帶著你實際操作，讓同學們往後面對各種多螢設計需求，也能自信面對不慌亂！
3. 大專案版型手把手帶著做，讓你充分練習、聰明架構！
在課程中，老師將分享多種業界常用的範例版型，學習的同時也讓你獨自實作設計，如果在練習時有遇到的問題，六角團隊也會即時給提供修正建議，讓你越做越熟悉，讓學習框架不再只是依循著文件內容而已。除了基礎運用及範例外，課程中還會介紹到如何進階開發屬於品牌、產品專屬的元件庫，讓使用 Bootstrap 不再一成不變！
4. 課程不斷更新，不害怕跟不上最新資訊！
六角學院是 Bootstrap 繁體中文版的翻譯者，且獲得官方認證，所以課程學習上不用擔心看不懂英文文件，中文版本已經幫您備妥妥！
前端新手到老手皆適用
新手：
- 想要快速建立網頁的同學
- 對於 Bootstrap 有興趣的同學
- 想要更精進 CSS 的同學
老手：
- 網頁設計師：透過此框架，打造能夠與後段協作的 UI
- 後段開發者：掌握元件的操作邏輯，透過這套框架輕鬆建立具美感的網頁
- 專業的前端開發者：輕鬆建構大型網頁所需的視覺元件，不再被自己過去的 important 牽絆
我將從這堂課程學到什麼？
- 學會如何使用 Bootstrap 建立網頁及元件
- 了解 Bootstrap 的開發模式
- 使用 Bootstrap 尋找合適的工作
- 更強大的前後段工程協作
- 掌握元件的操作邏輯、輕鬆建構大型網頁所需的視覺
上課前的注意事項
因這是學習途徑的第四步，如果你還沒有上其他前端課程，建議先確保自己是否已具備以下條件，來評估這堂課程適不適合你喔！
- 對於 HTML、CSS 有基礎的了解
擔心自己不具備以上條件嗎？看看六角系列課程中更基礎的課程：
第一堂課程 | 使用 HTML、CSS 開發一個網站
第二堂課程 | 使用 jQuery 打造互動性網頁動畫效果
第三堂課程 | 一變應萬變的響應式網頁設計
從講解基本觀念和學習資源開始，帶你輕鬆入門
如果你完全沒有接觸過 Bootstrap 4 也沒有關係，課程將從基本概念帶著你一起學習，包括 Bootstrap 4 與前一版的差異、透過 Boootstrap 框架能夠達到的優勢與成效，手把手的帶著你認識 Boootstrap 的各種文與元件資源、內容說明，為你建立一個紮實知識架構！
章節 1 | 課前說明章節 2 | 課程概觀章節 3 | 快速上手 Bootstrap章節 4 | 基礎內容文件要點說明手把手的教你如何運用各式 Bootstrap 元件
Bootstrap 4 的核心優勢之一便是提供了開發者許多多元且方便的元件。課程將帶著你認識各種元件結構，例如：導覽列、下拉選單、麵包屑、警告訊息、按鈕等等，皆是在現代網頁中時常運用到的網頁元素喔！除了讓你了解紮實的程式觀念，在課程中，老師也會提供了許多實際範例講解，讓你能夠將延伸知識，清楚了解各種應用方式。
章節 5 | Flex 、網格系統 及相關的排版概念章節 6 | Bootstrap 通用類別 (Utilities)章節 7 | Bootstrap 元件 (Components)帶你實際演練，不只做得出來，還做得漂亮！
當你了解更多元件功能後，我們便可以開始做實際的練習。在後續章節中，老師會帶著你練習不同網站版型，例如：部落格、landing page、購物網站、dashboard 等。在各類網頁版型的介紹中，老師更是會帶著你認識所有的圖表版型、介面排版、組建安排等與技巧。除了帶給前端框架中必備技能之外，也會貼心的從 UI 視角出發，提醒你在設計介面排版、顏色配置等排版技巧。讓你不只是做得出來，還做得漂亮！
章節 8 | 實作練習： Blog 網站版型章節 9 | 形象首頁版型介紹章節 10 | 後台版型介紹 上線章節 11 | 購物網站介面上線跳脫框架，教你如何編譯屬於自己的客製化 Bootstrap
當你對於 Bootstrap 4 的框架以及元件有更深入的理解後，在後續的章節中，老師將讓你了解如何客製化自己的 Bootstrap，讓你不再需要仰賴既有的元件打造網頁。老師會帶著你認識文件中各種必要資源，除了會讓你知道如何在 Bootstrap 中使用 Sass 開發屬於自己的元件之外，也會交付給你不同元件的套用方式，讓你更好的掌握不同的 Boootstrap 版型開發，成功將更多元的技術與資源整合在自己的前端網頁中。
章節 12 | Bootstrap 與 Sass章節 13 | 更好的 Bootstrap 版型開發章節 14 | Bootstrap JavaScript 元件補充說明章節 15 | Bootstrap 最終挑戰前端新手老手皆適合，是完整課程也是一套實用的工具書！
⭐️ 如果你是有經驗的前、後端開發者：
建議可以從 「章節 4 - Flex 、網格系統 及相關的排版概念」中具有星號的還是看喔！
在 Utilities 以及 components 章節中，也建議可以優先看有星號的部分，依照自己的需要找尋合適的工具。➢ 有打星號的章節為使用率和重要性都較高的部分，其後新增的章節都是以實際案例為主，進階的同學可以依據自己的選擇做規劃。
在這門課程中，六角團隊設計了兩種作業給你練習！
單元作業：部落格作業
這堂課程將會有一項單元作業，能夠讓你實際應用與驗證該單元所學是否正確。在課程單元列表中會有詳細關於該單元建議完成的作業項目和指引！
【最終試煉】使用 Bootstrap 開發甜點電商網站
在這堂課程中，除了學會行動版網頁設計外，課程中還包含大量的實戰技巧及業界絕妙手法，讓你學完課程馬上進入實戰也不慌忙！完成這樣課程的「最終作業」意味著你已成功達成課程目標囉！
🚩 點我看最終作業設計稿，一起看著設計稿融合最新學習的技術實作看看把！
透過六角助教的批改與回饋，達成以下條件才算是完成任務喔！
條件 1 | 以 Bootstrap 為基礎結合 Sass 完成甜點電商❗️ 貼心提醒：如果打算將此作品放入作品集，因為這個作業已有許多學員作為作品集使用，如果持續使用這個作品來求職並不會有加分效果。
建議欲作為作品集使用者，可另外思考主題 (如服飾、3C、日常用品等)並另外搜集該主題的圖片置換到甜點電商的版型上
建議置換的內容：
1. 標題、主題、內文文字
2. 商品圖片
3. 配色 (另外選擇一個主色)
上傳後，老師一樣會檢視喔！在完成這堂課程的最終試煉任務後，你將獲得以下兩個重要技能！
- SASS 基本概念
- 使用 gulp 客製化 Bootstrap 樣式
要如何承接任務，並讓六角助教團隊批改我的作業呢？
作業相關資源在 Bootstrap 課程的『最終挑戰 - 使用 Bootstrap 開發甜點電商』章節提供。繳交方式請參考以下步驟：
步驟 1 | 註冊「程式勇者村」帳號
「程式勇者村平台」為六角專為學員設計的學習輔助平台，如果還沒有註冊過該平台帳號，在繳交作業之前記得先註冊專屬自己的「程式勇者村」帳號喔！
步驟 2 | 點進任務連結，承接專為課程設計的【最終試煉】任務
登入程式勇者村 後，可以回到 Hahow 課程中第 15 章「Bootstrap 最終挑戰」，點選作業 1 的內容後你將會有更詳細的說明和專屬作業的設計稿喔！
步驟 3 | 回報任務
完成作業後，可以在課程任務連結中的「回報任務」的留言系統，提交希望給助教檢視的任務內容，六角助教在完成批改後，將提供專屬回饋，確保你理解課程內容。 你還可以在同一頁面中的「任務對話欄」和助教討論繳交的內容喔！⚠️ 繳交作業的注意事項
提交作業檔時，請使用 Google Drive、Dropbox、GitHub Repo 任一來提供網頁壓縮檔，還請記得開啟公開權限，六角助教才能進行下載流程。傳送作業前，可先開 Chrome 無痕視窗，觀察是否能提供下載，確保六角助教能夠進行下載作業批改，才能夠提供給你回饋喔！ 作業批改與問題回覆
除了課程的【最終試煉任務】外，在課程中還會有單元作業提供給你更多練習的機會。
建議同學一定要完成單元作業，唯有透過實作的當下，才真正明白自己是否完整領會、吸收。如果作業太難也歡迎將遇到的困難與問題紀錄下來，向六角助教們發問、求救喔！
回覆問題：六角助教會以每週二次的頻率上來回覆大家的問題喔！同學們如果有疑問歡迎留言發問，等待助教的解答喔！批改作業：六角助教會以每週一次的頻率上來批改大家的作業，建議一定要繳交作業才可以得到助教的回饋，幫助你進步喔！❗️ 如時間有更動請參照 Hahow 公告為主喔！
六角學院的副校長：卡斯伯
- 前端設計師
- 前端工程師
大家好，我是王志誠 (Casper)，是由設計師轉為前端工程師，專長是視覺設計與前端整合、前端技術教育訓練、前端自動化，常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。
關於六角學院
六角學院，是一所結合各項國際教學資源的線上學院，迄今已獲得57個國家、超過 10,000 名學員的教學好評。我們致力於提供各項程式、網頁、設計等現代工程師、網頁設計師必備的專業課程。
面對全球最受矚目的網頁設計工具「Bootstrap 4」的重大升級，我們已先一步完成「 Bootstrap 4 中文手冊」，去除語言隔閡輕鬆學習 Bootstrap 4。點此開啟 Bootstrap 4 繁體中文手冊！
什麼是「合作優選」的課程？
「合作優選課程」為 Hahow 向外探尋、精心挑選進來的優質課程 ，讓渴望深度學習的你，在 Hahow 擁有更多選擇！
價格保證
「合作優選課程」讓你放心！只要你可以在其他網站以更低的價格購買到相同課程，我們將協助全額退費，詳細說明請參考相關政策
