參照figma設計圖製作電商網站結帳頁面
成品連結: https://yunimm.github.io/Alpha-Shop/
程式碼連結:https://github.com/yunimm/Alpha-Shop
專案要求:
- 導覽列：在小螢幕會收縮成漢堡排。
- stepper：標示「寄送地址、運送方式、付款資訊」三個操作階段。
- form：「寄送地址、運送方式、付款資訊」各自有對應表單，表單下方有「上一步」和「下一步」按鈕可切換，切換的時候僅部分板塊被抽換，不會有頁面轉跳情形產生。
- 購物籃：不論切到哪個操作階段，都會顯示有兩件商品的照片、單價、用費和總價，每項商品有「 ＋ 」和「 − 」按鈕可增減商品數量。
- footer：在小螢幕不顯示。
- RWD，行動版和桌機版板面切換
開發工具:
- HTML
- JavaScript
- SCSS
你為何會選擇這個專案？
練習由0到1獨立完成一個專案，模擬實戰中拿到設計師圖稿後，如何製作設計稿內的元件、繪製wirfram、使用JS撰寫功能、RWD變版等等，藉由這個專案驗收自己目前的技術還有什麼不足，需要額外去加強
你使用了什麼技術？
- 使用figma繪製版面
- 使用SCSS寫法搭配BEM命名方式，透過BEM的命名方式能夠知道每個class的相依性，透過SCSS的巢狀寫法能夠將同個區塊的元件寫在同一區，再搭配檔案架構去拆分不同區塊的SCSS檔案，對於後續修改檔案省時不少
- 使用SCSS的變數@mixin將重複的程式碼抽出成獨立的檔案做管理，例如常用的flex對齊、長寬設定、RWD
哪部分你相對能掌握？哪裡花了最多時間？
對於版面細節調整比較沒什麼問題，大部分時間都花在RWD設定上，例如桌機版和手機版的Navbar流動方式，這部分就反覆調整了HTML的架構數次
過程中碰到什麼困難？又如何克服？（例如：查找網路文件）
如先前所提到的navbar，一開始沒有考慮到桌機版的部分，秉持著mobile first的原則先製作手機版，但是當版面切換成桌機版時就遇到原本同一層級的nav-list__icons沒變法拆開排至版面左右兩側，因為不想靠手動對齊(例如margin、position強制定位的方式)去調整版面，於是修改了幾次HTML架構，過程中也有參考一些心得文，臨摹其他人是怎麼規劃版面的，後來決定用兩組logo的方式解決這個問題，因為logo流動性相較其他元件差異不大。
過程中你有對哪個前端技術有特別深刻的學習？
以往比較沒有多琢磨的HTML架構，在這次專案中顯得特別重要，就像房子的梁柱一樣，如果沒有正確的施工，後續再華麗的內裝還是掩蓋不了根本的缺陷。
