Coding RightNow

Q1：你完成了什麼？花了多少時間？為什麼會做這些事？ 　　 1.這次實作完成table row點擊check box時修改樣式及table body的部份可以上下捲動這兩個部份。           2.總共花了約1小時40分鐘左右。           3.依專案的需求把網頁優化。 Q2：碰到什麼困難？如何解決？           在實作過程中碰到要如何取得input父層元素，查了MDN的說明可以使用parentNode的方法取得，但如果要取得多層一上就不斷串接parentNode才能取到該層的元素。 Ｑ3：回頭檢視流程與成果時，哪些部分你覺得可能有改善的           程式碼的部份，使用parentNode取得多層以上的父元素必須用串接的方式應該會有個更好的寫法，目前查資料有另一個closest()的方法可以使用，但有一項限制就是該元素的class必須是單一的才有辦法取得，如果有多個使用相同class名稱的元素則無法使用，這部份還在尋找一個最好的方法來達到取得多層父元素的效果。            

          說到自學的案例，其實遇到蠻多次需要找資料或解決方案的狀況，因為幾乎每次在做(作業)實作練習的過程中，常遇到想要做的功能不知道語法、不知道怎麼下手或是遇到不會解的bug而卡關，只是碰到的狀況有些容易有些困難。          這學期讓我印象較為深刻的一次自學經驗是在實作(A13)毛小孩星球相片集的特效製作，在實作(A13)之前剛學完Grid排版及偽元素的應用，網頁排版上可能練習比較多次了所以沒有太大的問題，但使用偽元素做出特效的部份就是一項 挑戰，雖然前面教案也剛學過使用偽元素做漢堡排樣式及動畫特效，可是相片集是要實作邊框線條展開的特效，兩個特效呈現的方式是完全不同，頓時陷入不知道要如何下手的狀況，因此先查找教案的特效是如何實作，也一邊搜尋網路上相關的資料及類似的範例來參考，然後一步一步慢慢的嘗試把偽元素樣式做出來並搭配上動畫特效。          經過這次的經驗，發現偽元素及CSS動畫特效其實沒有想像中的難，有時候只是需要一點巧思，像這次在實作線條展開的動畫卡關，一部份的問題其實是我不知道如何用偽元素畫出邊框的樣式，進而影響動畫不知道要如何實作，後來是看了很多範例後才想到要怎麼製作邊框樣式，最後搭配上展開的特效才解決卡關的狀況。 透過每一次的自學不斷的累積經驗，相信寫程式的過程會越來越得心應手。

  1.你為何會選擇這個專案？    這個專案主要是透過Grid system 實作練習RWD網頁的切版過程。 2. 你使用了什麼技術？     主要使用Html 及 CSS ，沒有套用任何套件及框架。 3.哪部分你相對能掌握？哪裡花了最多時間？     使用基本的media query 實作排版的部份都還能完成，最花時間的是轉場動畫的實作，對於動畫的使用還不是那麼熟悉，所以還需要花較多的時間練習。 4.過程中碰到什麼困難？又如何克服？（例如：查找網路文件）      在實作轉場動畫及使用偽原素上都有遇到卡關的狀況，有搜尋相關的資料及範例來 參考，然後研究出解決的方法。 5. 過程中你有對哪個前端技術有特別深刻的學習？      偽元素的使用是這次學習過程最深刻的部份，之前有看過相關的資料但一直沒有搞 懂如何實作出偽元素，這次專案除了學習外還特別做練習。      專案codepen連結：https://codepen.io/mirageapache/pen/GRGajEK