最後成品連結：GitHub Link、GitHub Pages Link

設計稿

原設計稿是使用 Photoshop 製作，在版面的範圍設定有超過邊，這裡是將畫面修過進行切版。
主要將課程的卡片區塊就可透過 flex 切版就可以了。

第一版固定版本的切版

一開始的想法，如果只是要處理交付，那不如把其他課程中的觀念刻意帶入結合使用，另外都要切版了那就多點功夫做完整點。

flex 切版的第一次規劃

針對 flex 小節作業，主要也只是針對中間的三門課程區塊使用 flex 來排版，有了解過整個課程中所提到的觀念，在加上實際使用過 BootStrap 4 的 utilities-Flex 工具類型的樣式包，也決定要使用這樣的方式由最單純的 CSS Reset 為基底，一步步來處理 CSS 命名與使用規劃與相關的內容。

透過要使用的 CSS 屬性拆分出來獨立成一個 class name 來重覆使用，為了更了解課程中所提的 flex 觀念，就一個個拆出用的到的 flex 屬性工具化，其實這樣的方式也是一種切版的開發模式。

不過在 HTML 的 Tag 上 class 裡成變的很肥，比較不直觀。

過程中也吧其他像是 utilities-spacing 也都獨立出成工具類樣式，參考的 Bootstrap 4 的文件來命名，就是只針對有用到的 CSS 屬性，一筆筆的加到對應的 BS4 的文件架構中。

第一次提交與後續的回饋

交付了，確實除了在 CSS 模式與命名上花了點時間，但更多的時間是處理畫面上精準比對 (理想是控在 +- 3 px 內)，像是字體、字串的斷行、字級等等…這些細節提升了整理頁面的精緻度。

這裡另外提一下，因為使用的系統是 MacOS ，有裝微軟的 Office 系列軟體，其中裡面會自帶微軟正黑體體，但這其實只能在 Office 系列軟體中使用，也覺得如果裝了字體了那為何在瀏覽器中吃不到字體的設定 '微軟正黑體', 'Microsoft JhengHei', 顯示在畫面呢？

找了半天到 MacOS 字體簿 (font book) APP 找不到，原來不是 Office 系列軟體有就是 MacOS 可以整個底下使用，這是包在 Office 系列軟體中才能使用。

針對這部份在開發時有需要，這字體設定在 PC 上是預設的系統字體，還是要將微軟正黑體字體另外裝進 foot book app 裡，這樣在 MacOS 才能讓微軟正黑體的設定顯示在瀏覽器上。

在提交後不久，六角的校長也在社團分享與中寫明了這些用力與努力的地方，這些觀念在大型的專案下很重要，在使用框架上或現有的架構需要擴充或是修改，也是都由這些觀念來延申才能改的動與達到更好的管理。

以下是校長回饋加強的地方

我這裡給你幾個額外精進建議，
– 嘗試導入 Sass (還是這已經有用了？
– 自行設計格線系統，像是 col-1~12，若有用 Sass，你在設計格線會更順
– 承 2，可以嘗試擺脫語意 class、例如 .header、.wrap、footer、banner 等等，因為當你導入格線系統或工具類 class，像是 header 的 class 你就可以用像是 <div class="col-12 mb-1"> 的方式來設計，在 code 的彈性也就更高，復用性也更好

第一次提交後的特別在 GitHub 中加一個 no_grid Tag 起來，針對在此製作階段保留一下記錄，另外在針對回饋的部份進行修改與調整。

其他資源

Flex

Flex 小節作業影片
深入解析 CSS Flexbox
圖解：CSS Flex 屬性一點也不難

格線系統 – Flex and Grid

Flex and Grid demo
my-flex-grid
Flex Grid with Spacing Between Cells & Rows