限時挑戰：電商網頁切版

參考網站：Basic T-shirt Store

挑戰作品(CodePen)：T-shirt Store

你為何會選擇這個專案？

在這個環境裡，無庸置疑，電商絕對是最接近每一個人的生活日常，選擇從自己熟悉的電商開始練習是最直覺的想法，一個電商網站涵蓋了許多與使用者互動的多項功能，一個小小細節就能體現出工程師的細膩程度，以及各種必備的基礎技術

你使用了什麼技術？

這次的排版都是以手刻為主，

商品的排版主要靠 CSS grid-template 的 auto-fit，讓桌機與手機能互相適應視窗大小，調整商品數量顯示，並加上了 hover 的滑鼠滑過跳出照片與詳細文字的功能，讓右上角的愛心功能也有滑鼠指標點擊（pointer）的效果

Navbar 的手機版漢堡選單功能使用了 input checked 加上偽元素手刻出三條線漢堡效果，並且設定 position 為 fixed，固定住上列，不讓導覽列跑掉

哪部分你相對能掌握？哪裡花了最多時間？

在 grid 排版裡是花最多時間的，以往習慣了套用 bootstrap，直覺式操作許久，現在一個一個自己手刻，相對而言花了更多時間研究功能，也思考很久哪些部分可以使用 grid，而哪些地方可以不需要

較能掌握的地方是在調整使用者互動上，加入按鈕、文字大小、調整位置這些功能部分，因為有實際網站可以參考，所以相對而言較能掌握

過程中碰到什麼困難？又如何克服？（例如：查找網路文件）

在 grid 上面查了很多資料，光是選對資料來看就是一個很重要的事情，必須對症下藥，中間也一度卡在漢堡選單為什麼點了卻出不來選單，還有字為什麼老是對不準，是不是版型哪裡有問題等等，最後多方嘗試各種排版，調整 html 才找到正確答案

過程中你有對哪個前端技術有特別深刻的學習

還是 grid ! 雖然現今已有 bootstrap 可以使用，但還是需要理解詳細原理與細節，否則在修改細節方面不知如何下手，如果詳細了解後，今後也知道該怎麼修改與解決問題