切版專案實作 - t-shirt 電商網站

Fotis Fotopoulos on Unsplash

電商網站切版連結：
https://codepen.io/XavierHSIAO/pen/qBgvQyw

為什麼選擇這個專案？

電商已經是我們日常生活中不可或缺的一部份了，而前端市場也有不少相關產業的工作機會，加上最近學習了 CSS Grid 的用法，便挑戰看看這個切版任務。本次專案中著重的練習點如下：

• 依循設計稿畫出 wireframe
• 依情境選用 Flexbox 或 Grid 進行排版
• ::before 與 ::after 的實際運用
• 更熟練 position 定位
• transform 搭配 transition 的動作效果
• 利用 media query 實現 RWD

滑鼠移動到商品卡片上，會出現模特試穿圖

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

由於前陣子花了比較多時間學習 Grid，因此商品區的排版快速完成，此外，原先以為滑鼠 hover 所產生的模特試穿圖效果要不斷試錯，結果也比想像中更快實現。

至於花最多時間的地方，就是 navbar 了。由於本次專案提倡 Mobile First 的設計原則，因此我把注意力幾乎全放在手機版面上，導致 HTML markup 的部分沒有考量到 RWD 下的電腦排版。雖然最後有彌補回來，但著實花了不少時間調整。

明明有把兩種版面的 wireframe 畫出來，但還是採坑了 😑

這是次滿寶貴的經驗，期許自己往後能以更細膩的態度面對 HTML 架構。

768px 以下的 navbar

768px 以上的 navbar，點選漢堡排會展開 nav 內容

navbar 電腦版的搜尋 icon 需要移動到左半邊，原先以為會需要用到某些特殊的手法，結果在實作時，想到直接透過 position: absolute 讓它離開 document flow 再定位就好。

印象深刻的部分

• 由於漢堡排沒有使用 fontawesome 提供的 icon，因此是用 ::before 和 ::after 來添加上下兩條線。這麼做的好處，是避免在 HTML 寫入沒有內容的 markup。從前便耳聞過 ::before 和 ::after 能變化出許多效果，如今實際體驗過，有種恍然大悟的感覺。
• Flexbox 和 Grid 為現代 CSS 的排版兩大支柱，以往我都是 Flexbox 一路幹下去，如今透過此專案，認識到了 Grid 二維排版的滋味，和 Flexbox 相輔相成好不快活。其中 grid-template-areas 更提供了視覺化的語法，讓我們免去計算輔助線的麻煩，也著實讓我開了眼界。

針對 Grid，我整理了兩篇學習筆記，若有興趣的話，歡迎參考討論~

• CSS Grid 學習筆記 (一)
• CSS Grid 學習筆記 (二)

預計的下一步

• 針對 Grid 再進行一次專案練習
• 多認識 ::before 和 ::after 的使用方式，完成一些小專案