繼上次在九月底發文分享過上了一個月的網頁開發課成後的成果。
經過三個月，不同於上回只有程式碼可以看，這次是有畫面(?)的常見的電商網頁的切版練習。
電商網頁切版練習 CodePen 網址：https://codepen.io/tsouhare/pen/WNydGQJ
你為何會選擇這個專案？
電商網頁可以說是網頁開發避不了的一個主題，在網路購物普遍且電商平台競爭激烈的現在，不論是品牌官網還是一頁式網頁的製作都是相當有需求。
因此檢視自己是否熟悉且有能力快速完成一個電商網頁的切版會是一個很好的能力驗收。
你使用了什麼技術？
在還未開始上課前，因工作上有製作 RWD 網頁的需求，基礎能力不足卻又被趕鴨子上架時，向朋友詢問到了 Bootstrap 框架。
雖然快速滿足了我當時的需求，但因為 Bootstrap 的便利性讓我對它產生依賴，之後即使遇到不是那麼合用的情況，也就將就使用 Bootstrap 。
因此這次練習的大前提就是完全不使用 Bootstrap 或其他框架。純 CSS 依不同工具的特性，選擇適當工具來進行切版是本次的練習重點。
除了原本就會搭配 Bootstrap 使用的 box model、flexbox、position 外，因為沒有 Bootstrap grid 可用的關係，特別練習使用了 CSS grid 來進行商品 Category 的排版。
哪部分你相對能掌握？哪裡花了最多時間？
由於之前就會搭配 Bootstrap 使用的 box model、flexbox、position 等工具，所以在使用上相對能掌握，但在 CSS grid 上有很陌生，花了最多時間。
其次花時間的是 header 的部分，這也是因為過往都仰賴 Bootstrap 提供的基本樣式的關係，但因為結構大同小異，雖然自己手寫則花了一些時間，不至於造成問題。
不過也因為專案時間有限，只完成了專案練習的基本標準(完成電腦版nav)，若之後有時間會繼續完成手機版的 nav 和 手刻漢堡練習。
過程中碰到什麼困難？又如何克服？
因為沒有遇到想不到怎麼做的功能，所以與其說是遇到困難，不如說是承上題，因不熟悉的關係在 CSS grid 上花了最多時間。
CSS grid 有很多用法，因此也相對複雜，所以在不熟悉的情況下需要查找網路文件閱讀。
而在商品售完時的樣式上，因為希望是只要價格帶有 .sold-out-price 就可以有 SOLE OUT 字樣出現，不用每次都加在html裡。
所以使用偽元素 before 來完成，但沒有解決 SOLE OUT 字樣也有 .sold-out-price 的 text-decoration: line-through; 的問題。
有嘗試於 before 裡寫 text-decoration: none;(第161行)，但沒有作用。
雖然可以很直接的就不要使用 before，改寫成<span>Sold Out</span>分開即可，但還是想練習偽元素的使用，
所以我仍然將它保留在專案中，如同上題提到的手機版 nav 的部分，有時間會繼續將專案改善、完成。
過程中你有對哪個前端技術有特別深刻的學習？
最深刻的部分果然還是最花時間、從最不熟悉到能夠使用的 CSS grid 的部分吧！
以前不知道有 CSS grid 的排版，在用在 Bootstrap grid 的時候就會覺得都寫在 html 裡有時不太好維護，而 CSS grid 則沒有這個問題。
另外前面有提到 CSS grid 的用法很多，本此只使用了基本設定格數的和 auto-fit ，但還有 grid-area 的用法也很酷，未來如果有適合的排版也會想嘗試看看。