Day20 六角 Flex時光屋#2

簡單小語

自己切了這個版，才發現原來Bootstrap真的很好用，觸發的事件自己寫過才知道，要如何去撰寫，要如何設計架構，才能讓每次點擊時，右側的內容會更換，其實也是突發奇想的試做，做之前還在懷疑說我寫的出來嗎？後來幾番思考了一下，還真的做出來了，不過就是挺陽春就是，刻意練習也是訓練自己思考，訓練自己撰寫方式，慢慢感受刻意練習所帶來了踏實及進步，加油還有十天。

筆記分享

1. 再次強調padding及margin推移的距離需熟稔掌握，才能心有戚戚焉得切版。
2. 觸發事件使用不同的class做不同效果，分別為共同樣式設定的class及觸發事件所需呈現及消失的class。
3. JQuery的尺寸判斷還不熟悉，if ($(window).width < 768px) {…event…}。
4. JQuery觸發效果的掌握及使用，雖認為是基本功，但每次練習卻也還是會有不熟悉得時後。
5. JQuery觸發呈現樣式的使用，雖不知未來實用性但每增加一個效果，就是熟悉一次寫法的時候。
6. 內容物僅作flex的排版並無太多動畫及過場效果。
7. 已完售商品則是使用為元素製作“X”凸顯效果。
8. 結帳頁面是拿內容頁面做修改，可以精簡程式碼並減少重複撰寫的步驟。
9. RWD則是受限於空間使用，而讓一些樣式不顯示，手機觀看以舒適及適當的資訊量為主軸。
10. RWD須控制好寬度及高度，避免佔滿使用者畫面，第一觀感不佳。

刻意練習

Practice(200812 Day 20)

首次練習

Hex_Flex時光屋_9_訂單明細
Hex_Flex時光屋_10_產品列表

2020 iT邦幫忙鐵人賽 Day20 網頁前端-刻意練習(Flex時光屋#2)