決定邁向前端工程師的第一個網站實作
目標網站：https://www.tshirtstoreonline.com/en/men/basic-t-shirts
專案作品：https://codepen.io/tinahung126/full/vYxZzMK
為何會選擇這個專案？
在開始第一個專案時，第一個就會問自己最想做什麼網站，答案就是電商網站！在我認知中，這是最需要使用者體驗的網站，因為不論是桌機或是行動版網頁，都會因為網頁的不流暢而導致使用者印象變差，甚至會因此而退出網站減少客源，因此我給自己的目標就是希望自己能打造幫助公司好的門面！
使用了什麼技術？
- 在 Navbar 及服飾列表中都是使用CSS Grid排版，透過 grid-template 中的 auto-fit 屬性自動創造新的 row ，因此就不需要另外數桌機版需要幾列，換成手機版又需要改成每行要擺放幾個商品。
- 在漢堡選單，這次選擇透過 CSS 的 input checked 搭配 CSS的偽元素創造出三條橫線的漢堡選單效果。
花費最多和最有能掌握的部分？
- 在運用Grid 和 Flex 排版上最不習慣的就是過去都使用 Bootstrap 排版，很多屬性都已經被預設好了，導致像訂閱的欄位＋按鈕想了一陣子和查了很多文件資料才做出來；以及很多屬性並不是沒效，只是因為打錯字就要 debug 超久。
- 最能掌握的話就是自己很喜歡調整一些字的大小和排版的閱讀舒適度，把字型、大小都排得跟設計稿一樣讓我很有成就感！
過程中碰到什麼困難？及如何克服？
最大的困難是不知道要下什麼關鍵字去找到我的問題解答，但照著設計稿做的好處就是可以稍微看一下原網站怎麼處理自己的問題，先看著他們CSS怎麼寫，再套用到自己專案中就可以解決約一半的問題，至於剩下一半我覺得可以在每次搜尋stack overflow中，觀摩其他人的問題標題，在改善自己關鍵字的下法！
印象最深的就是 border-radius，一直都沒注意到他其實可以放入四個屬性去調整四個角，透過看原網站才赫然發現這個用法，後來順利把上面圖片得輸入框打造成只有右邊有圓角的設計。
border-radius: 0 25px 25px 0;
// 依序是上左、上右、下右、下左過程中你有對哪個前端技術有特別深刻的學習？
對 CSS Grid 的操作讓我印象最深刻，過去學的基礎 Grid 主要是針對大區塊化網格排版，但最近的專案操作中，使用 Grid 可以做到更深入的排版，如自動產生row column 的屬性，完成這項作業後，會再找更多關於 Grid 技術文件參考學習的！
