Day39 刻不容緩

簡單小語

這個樣板算是目前最大挑戰，看似簡單但細節超級多，中間又卡了一個出遊因此進度落後，趕快補起來，許多地方並沒有樣板這樣如此細膩及滑順，漸漸感受到當專案越大，程式碼越多，要維護的地方也就更多，所以不管是結構或是class命名，都非常重要，不然光找一個按鈕就花費大把時間，若是命名直觀且結構寫得好，彈性高，後續維護修改就可以省下許多時間，自我挑戰接近尾聲，最後就來寫個餐廳網站(誤!!!改寫別的)吧，終極試煉。

筆記分享

1. 結構結構結構，這次練習後發現HTML結構太重要了，思考樣式變化及定位父子層的關係，才能讓結構多變化，彈性運用。
2. 命名命名命名，這次也發現命名的重要性，每次都要找半天，若是命名直觀，就可以輕易判斷此樣是該尋找哪個class了。
3. 這次的Logo排列方式不好，導致我在運用時時常卡卡的要去推移位置，沒辦法讓他可用定位或Flex方式，準確找尋位置，後續微調免強可看。
4. 這次難度大多在JQuery的使用，腦袋清楚知道點擊後什麼class需要做什麼事情，思路釐清後開始撰寫，一步步完成點擊事件。
5. 因為要釐清點擊事件，所以JQuery使用的class又臭又長，小魯功力尚未精通，只能一切手刻並清楚釐清。
6. Home是靠Flex的觀念及方式再利用絕對定位將標題定住，但未考慮到RWD因次標題在小尺寸中位置難喬。
7. About是靠Flex跟hover觸擊事件帶出標語，然後點擊愛心加入css，樣板還有做點擊事件後彈出視窗，小魯的HTML已眼花撩亂，就沒做那個樣式了。
8. Menu是靠Flex跟位置判斷及位移，相同樣式用相同class就可以事倍功半，那個點點點的虛線可是花了我一點時間思考完成的(好弱，難過ing)。
9. Order Menu最複雜最難搞，Flex及點擊事件又還要文字切換變化，小魯腦筋差點轉不過，寫程式思路清晰很關鍵啊，一個亂就亂掉了。
10. Contact留最後寫有點一塊蛋糕，Flex跟iframe使用一下就可以完成，應該是難在表格驗證，好幾天沒碰JavaScript，小魯要趕緊跟上。

持續練習

Practice(200914 Day 39)

樣板來源

城市烘焙坊

2020 iT邦幫忙鐵人賽 Day39 網頁前端-持續練習(刻不容緩)