close

這次電商切版挑戰選擇的是中等難度的Umart
完成品在這裡

https://codepen.io/pinkymini/pen/BaKQEZM

你為何會選擇這個專案?
選擇這個專案的原因,主要是因為自己本身是Umart的使用者,
所以想要試試看自己是否也能用現有的技術完成自己喜歡的電商平台切版。

 

你使用了什麼技術?
這次主要是使用Grid進行大區塊的切版,其他較小的細節部分,則是使用flex進行調整。
另外還有使用position,讓愛心icon能放在商品圖案的上層。

哪部分你相對能掌握?哪裡花了最多時間?
在category和footer的區塊,因為內容比較單純,也是自己比較熟練的部分,所以花的時間比較少。
product區塊則是為了正確呈現與原網頁相似的HTML架構,做了兩~三次的調整,一開始忘記要設定a標籤,
在加入我的最愛的愛心icon顯示的地方也稍微有點卡住。

過程中碰到什麼困難?又如何克服?(例如:查找網路文件)
在模仿電商網頁時,有發現一些自己沒學過的內容,像是搜尋欄位,所以有上網查資料參考其他人的做法,
在調整成自己可以理解的方式呈現。

過程中你有對哪個前端技術有特別深刻的學習?
主要還是grid的部分,因為在這次的專案中,大量地使用grid,所以使用上變得比較順暢,也比較能掌握grid要怎麼使用。

arrow
arrow
    創作者介紹
    創作者 文科少女寫程式 的頭像
    文科少女寫程式

    文科少女學程式

    文科少女寫程式 發表在 痞客邦 留言(0) 人氣()