iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 39

Day39 網頁前端-持續練習(刻不容緩)

Day39 刻不容緩

https://ithelp.ithome.com.tw/upload/images/20201008/201291618IjYQB2U6e.png
https://ithelp.ithome.com.tw/upload/images/20201008/20129161lliJMpXVue.png

簡單小語

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

筆記分享

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

持續練習

Practice(200914 Day 39)

樣板來源

城市烘焙坊


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


上一篇
Day38 網頁前端-持續練習(隨點隨到)
下一篇
Day40 網頁前端-持續練習(終極試煉)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言