「預賽就要到了….讓我教你們必勝的秘訣吧！」
「秘訣就是 — 左右腳輪流向前跨出去」
《強風吹拂》 三浦紫苑
不知道該怎麼辦的時候，做就對了！
前言
這是 Alpha Camp 學期 2-3 的指定作業，要獨力完成單頁網站的切版，並透過影片或部落格簡述切版的過程，從 0.5 開始是因為我們已經有設計稿還有 AC 助教完成的網站了。
話不多說，先附上這次專案的成品 T-shirt Layout (CodePen)，這是某個電商網站的其中一個頁面，這個電商網站提供許多種產品，而此單一網頁就含有許多功能，包含搜尋商品、加入追蹤清單以及放入購物車；也可以在網頁下方的特定格子中輸入 email 啟用訂閱服務，會收到最新的通知。
成品的截圖：
專案介紹
以下會透過幾個問題介紹本次專案內容：
- 你為何會選擇這個專案？
- 你使用了什麼技術？
- 哪部分你相對能掌握？哪裡花了最多時間？
- 過程中碰到什麼困難？又如何克服？（例如：查找網路文件）
- 過程中你有對哪個前端技術有特別深刻的學習？
事先說明，這是一種面試的模擬練習，會包含一些想像的言論，無須過於認真。
選擇電商網頁為主題的原因
網購已然成為現代人的購物習慣，透過在網路上瀏覽商品並結帳下單，省略了實際出門的需求，既方便又快速。加上這兩年的疫情因素，越來越多店家開始採用「電商」的商業模式，再加上自己本身也很喜歡在網路上購買服飾，因此將專案的主題訂為以服飾為主的電商平台。
專案所使用的技術
這次的專案中主要使用三個排版的方式：position、flexbox 以及 grid。之前學習到用 auto-fit 搭配 minmax() 可以不需要透過 media query 做出響應式網站，因此這次電商網頁的主要部份「T-shirt」排版是利用 gird 的 auto-fit 完成響應式的網頁呈現。不過呢！後來出了一點問題，所以為了符合目標網頁 RWD 的設定：600px 以下 2個；600px – 960px以下 3 個；之後 4 個，CSS 的部份作了以下修正：
.store-products-panel {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width:600px) {
.store-products-panel {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width:960px) {
.store-products-panel {
grid-template-columns: repeat(4, 1fr);
}
}另外在 :hover 的效果中，為了想讓兩者之間有轉場的效果，也選擇使用 css opacity property 來做切換效果，而不是用 display:none 的作法。
專案技術的掌握程度
在進行本次專案，已經能用 position 相關功能做出特殊的排版效果，本次專案有多處使用這個效果。
之前在版面只有一維的情況下通常會使用 flexbox 做出垂直置中的效果，這次則是刻意練習，在需要作出垂直置中的地方，使用多種用法：boxmodel、position、flexbox、grid 等，最令我印象深刻的是當文字只有一行時候的時候，可以利用父層的 text-align:center 加上將目標元素的 line-height 設定成與父層高度相同，就能做出垂直置中的效果。
進行專案所遇到的困難
這次調整最久的地方有兩處：
- 首先，網頁上方讓用戶使用 size、color、sort 操作 filter 的地方。
我想用 css 的虛擬類別 (pseudo class) 做出箭頭向下的效果，也瀏覽許多相關的文章，有一說是利用背景圖片選擇綜合向量圖，來後再利用 position 定位的方式去選擇出你需要的圖案；第二說則是用 border 去疊加出箭頭的樣式，我原本採取第2種方式，原因是我對於圖片的設定上沒有太大的把握。然而，在嘗試第2種方法後，看不懂自己找到的資料，因此在流失了 30 分鐘後我決定放棄，直接在 HTML 用 icon 的方式完成。但在蒐集資料的過程中，看到許多css 的虛擬類別 (pseudo class) 的資料，我之後也想實際實現看看。 - 第二個則是網頁下方讓用戶留電子郵件地址訂閱網站消息的地方。
誠如前面所說，我對於圖片的調整仍然不夠熟習，我希望從 mobile-first 的角度來打造我的專業，然而所使用的 banner 圖片卻一直出問題，不是直接破版、就是等比例縮小、設定寬高後有失真。在打造這個區域的時候，除了前述背景圖片之外，我想讓輸入電子郵件的欄位符合 RWD 的設計，不能因為螢幕縮小就壞掉，所以已經花了一點時間。不能在圖片上浪費太多時間，畢竟背景圖片這個功能不是最重要的，因此最後呈現出來的結果，還有可以優化的空間。
這次的作品是希望能透過自己學習到的切版技術，實作出一個網站滿足現代人的需求，選擇一個自己熟悉的主題，在設計上也會更符合使用者的實際使用情境。
結束：面試情境結束
這次的專案練習，讓我能夠評估自己對於各種技術的掌握程度，也是第一次從設計稿的繪製框線到完成單頁式的網站，之前完成的頁面或功能都是有助教手把手的帶領大家，連 class 的命名方式都幫我們想好了，這次花費了6個小時才完成這個作品，第一次的體驗還不賴，看到成果也頗感欣慰。或許 1 個月後回首會覺得這是什麼爛東西…但至少在這個即將入冬的季節，我還是覺得自己棒棒噠！
