# chatTalker AI 機器人 - 切版筆記

以下是這次六角學院 [ 2022 公益程式體驗營 ] 第二個切版作業的過程紀錄
作業網址(GitHub Repo)：https://github.com/tingjuanhuang/chat_talker
作業網址(GitHub Pages)： https://tingjuanhuang.github.io/chat_talker/index.html
洧杰老師的建議：https://chalk-freedom-ec6.notion.site/Stella-5cba900395494eada4cb5b9c64494c56

## 個人背景
我是設計背景已工作一段時間，在工作上會接觸到 HTML 和 CSS，也會使用 jQuery 製作基本的互動效果，以及會套前端常用的外掛，對於 SCSS 和 Bootstrap 較不熟悉，於是想趁這個機會嘗試這些方法與工具來協助自己切版。

## 切版過程
### 前置
我將 Adobe XD 設計稿先看過一遍，從外層往內切割，把每個區塊區分開來(如黑框)，再細分小區塊(如淡紅底)，思考該使用哪些 HTML 標籤和哪些 jQuery 效果，將需要的檔案都下載好，例如：Font Awesome、Google Fonts 和 Bootstrap 5 ...等。

### 順序
我從上 (header) 往下 (footer) 切版，並以「電腦版」為優先。
但若是要我再切版一次，我會選擇以「行動版」為優先開發！
原因一：既然我選擇 BS5，那要嘗試使用 `min-width` 來作練習，而非 `max-width`。
原因二：近年大多數使用者以行動裝置來瀏覽網頁，而 Google 也已宣布改採「行動優先索引」。



### 排版
排版全部仰賴 BS5 的網格系統，在設計稿內有「布局网格」功能，可以很清楚知道每個區塊佔了多少欄位。

### 背景
我使用 background 去處理，一開始都統一寫在網頁的最外層，經過洧杰老師的建議以後，改為將背景寫在每個區塊的最外層，這樣做的好處是：假設未來若新增區塊，不用再重新去推算 background-position ，會更好維護。

###

## 學習到什麼
* mobile first!!!!
* 不要暴力地調整斷點，需考慮到每個裝置的使用者體驗，可使用多個斷點讓畫面逐漸變化。
* CSS 階層不宜過長，盡量不要寫超過四層，太長會導致畫面顯示上過慢。
* 若是使用 BS5 可以嘗試 util 內建的 class，能大幅減少自定義 class ，讓 CSS 更簡潔。
* 盡量不要用編號式 class 命名，而是以「語意命名」，例如：area_01 可改為 area_intro。

## 結論
這次為了挑戰自己，一開始即選擇 **「Lv2：做所有 RWD 頁面，且 JS 效果都做，畫面不可顯示 x 軸」**，雖然有成功地繳交一次就通過，但是還有很多小細節需要再注意，整體性也要再改進，看了其他人的程式碼也學到不少。
很開心也有幸成為此體驗營第一位批改通過的學生，也很謝謝校長用心地給予建議，希望這篇心得能夠幫助其他同學通過體驗營，並順利取得證書。：）