[第四期程式導師計畫] 第二次複習周回顧

楊智堯 ( Kevin Yang )
凱文的日常點滴
8 min readAug 26, 2020

--

大概就是一個每五周一次的複習步驟,在這次真的有很大幅度地感受到自己的進步,雖然同時也深深地知道自己的不足,但希望透過文字也好好記錄一下這些日子的感受。(如果想認識第四期程式導師計畫可以回去看第一周的回顧)

一、學習內容

附註一下,照理來說應該是五周五周結算,但真的自己沒有跟上進度 QQ ,所以只好很誠實地打下這次的學習進度。第一次撰寫: 08/26 完成到第七周
第二次更新: 09/04 完成到第十周

第四周:網路基礎

其實到這都還在 Node.js 的部分。這周學得更多是 HTTP 的 request / response 是什麼概念,或是認識 「TCP 三次握手」之類的內容

同時也透過串 API 的狀態去認識 API 是什麼之外,同時也去熟悉 HTTP status code 。這周雖說乏味了一些,但真的是對於網路的來來回回算是多一層理解!

(延伸閱讀:從傳紙條輕鬆學習基本網路概念

第六周:前端基礎 HTML 與 CSS

終於開始進入前端的一周,原本想說不過是 HTML 跟 CSS ,一定可以輕鬆 KO ,殊不知光這裡就卡了一個月QQQ

後來回過頭發現原因是,剛好大四下修了計算機程式設計,發現前三周就只是把 C 的那套語法改成 JavaScript 而已,語法相對容易之外,OJ 上的內容甚至比清大資工系老師出得作業都要簡單許多。

而這周最困難(或者說最麻煩的就是),第一次認真碰 CSS 切版,真的是太多屬性跟標籤了,除了字面上簡單易懂的 Box model 相關的屬性之外,display 跟 position 什麼的真的是弄的一個頭兩個大

好得部分是說終於在最後把 CSS 摸得還 OK ,基本上遇到排版就 flex(原本想學其他的但真的進度太落後了QQ,有機會回來補),最後終於算是有了課程的第一個作品

而且也在各種搜尋的時候認識了兩個不錯的節目,可以在寫 Code 的時候當 Podcast 放在背景聽。

第七周:前端基礎 Javascript

之前學過 Node.js 之後,就可以更認識何謂跑在網頁上的 Javascript。同時更去認識 DOM 的觀念、使用 eventListener、認識 event delegation,並且認識冒泡跟捕獲的內容是什麼。

以前都會聽到人家說 HTML 是內容、 CSS 是美工、Javascript 是互動,學到這周才算是真的瞭解這是什麼意思。

最後呢就是再練習切之前的版之外,再多用了一個會展開跟合併的 FAQ 頁面、一個表單必填驗證還有 To-do List。

做完以上差不多就過完這五周了 …,接下來要挑戰用網頁的 JS 串 API,再來就是碰後端的 PHP ,才算跟上這次的進度 ><

(以下 0904 更新)

第八周:前端基礎串 API

主要是第四周的延伸,從 Node.js 到 Web Javascript 去抓 API,

第一個作業是去 API 抓一個 JSON 格式的抽獎內容,然後跳出對應結果

抽獎前
抽獎後

第二個就是再戰 Twitch API,導覽列的五個遊戲是動態前五名的遊戲,底下串流則是前二十個人數最多的頻道。

第九周:後端基礎 PHP 與 MySQL

主要是用 PHP 做了一個留言版,並且有註冊跟新增會員的功能。並且多學了Cookie 跟 Session 的概念。

點擊這裡傳送到留言板:連結

二、時間投入狀況

三、個人心得

大概就是在下班之後盡量擠一些時間出來,只能說 CSS 學到很崩潰,在把第六周作業交出去的當天,直接把那段時間的心情寫在留言板上。現在大概可以比較有自信把版切出來,回頭看雖然覺得很好笑,但那陣子又工作又切不好的心情真的很苦QQ

算是很投機的把第六周的作業寫完了,分享個辛酸血淚史QQ。 在這裡卡了快一個月,花了大約一周看前導影片跟各種影片,兩周刻 HW1 加各種影片、一周刻 HW2 然後兩個作業都有參考同學的內容再回去重刻。覺得對於語法看了快一個月好像很熟悉,但真得下去刻的時候還是遇到好多問題。 譬如刻到一半不知道為什麼不能往下滑、或是 display 跟 position 亂湊一通就成功把畫面弄出來但其實背後的邏輯不敢保證完全理解。從 MTR 前導片開始看,再去 FE101 接著先去看了 google chrome 除錯,大概看了三部,後來發現幾乎沒用到就先停住。 又去看金魚系列,對於 CSS 有更多了解(這邊真的看了好多時間) 回來看老師的影片跟著刻,又更有挖我好像學會了的感覺 直到自己要刻 HW1 最後的部分,突然又覺得被打回原形...(上面三個部分真的會誤以為自己好像都懂了) 卡了一下子後再看到助教第六周的 display 跟 position 的講解,突然有種任督二脈打通的感覺 回去再寫 HW1 , 結果又卡住了。圖片雖然看起來絕對位置對了,但相對位置跑到 RWD 就又出錯。於是崩潰底下決定看看之前同學繳交的作業。並且照著打一輪,算是硬凹過去成功 再來直接進入 HW2,原本刻的都很順利,突然畫面到了原先的瀏覽器高度之後,底下都被裁掉了。一個不知所措底下又去參考了同學的做法。照著做發現可能是自己一開始把高度寫死(?)所以畫面下不去,但其實還是不知道問題在哪裡...跟著刻之後最後成功把畫面做出來。 但有種跟著老師 HW1 一樣的感覺,好像有人帶跟著做都會,自己要開始好像就被打回原形。第六周真的遇到滿滿的挫折。眼看著一周過一周進度越來越慢,心裡也慢慢急了起來。 最後到了這個作業寫完的階段,心情上大概就是第一個版出來覺得超開心,因為那個版我覺得超難所以刻出來就 PASS。再看到第二個版覺得超有信心肯定可以全部靠自己刻出來。但最後還是卡卡卡然後又參考了人家的作業。整個結束後沒有特別開心,甚至有些難過。彷彿看了一個月覺得 HTML 跟 CSS 都是老朋友了,第六周的那些自我檢討也覺得回答得出來,但作業給我自己的回饋彷彿又是如此的陌生。總之還是先走下去好了,未來如果有機會再回來練習切版的部分。希望可以在未來幾周重拾一點自信QQQ補一個,覺得這周學習最多的是一開始真的要把當周學習順序列好,像我自己就是在一堆教材裡面繞圈圈,像 chrome 那個肯定是有用的,但放在那個學習位置就不太對。或者說助教的補充影片後來才更新但一開始沒放進課綱直到後來不小心看到才回去看,發現真的是大補丸。把這周的經驗跟心情銘記在心,希望之後不要再犯這樣的錯誤><

後來繼續串 API 遇到的問題也沒這麼多,甚至在學 PHP 也比學 CSS 還順一點,然後一下子就也把 PHP 這邊的作業寫完了!(但其實我覺得也是老師的教材都很完整,卡關也可以先過去再回來看。)

四、第二次複習周結語

這次真的是太小看 HTML + CSS 所以被教訓了一番。回頭看為了讓進度推展,幾乎沒有關心 RWD 的部分,雖然會寫但就是把版不要太難看就放自己過了,尤其是最後 JS to-do list 真的有玩到 eventListener ,美術部分就放行。

然後目前還是覺得自己弱弱的,第一步都會卡住,很多都要跟著老師走過回來看才能理解。要從零開始想實在是不行,學越多越覺得自己不懂的東西好多,前端真的是漫漫長路!

但往好的一面來看,五次複習周就結訓,現在已經第二次了!完成度 40% 也快一半了!期待之後的學習歷程!

謝謝你讀完這篇文章,如果你有一感覺希望回饋給我--
「1下」拍手:既然看過了,就來簽個到吧。
「2-5下」拍手:表示你喜歡這篇文章!
「5-15下」拍手:希望未來我能寫更多這類主題的文章。
「15-50下」拍手:看來你很想湊滿50下對嗎,那就順著你的心去做吧!

--

--

楊智堯 ( Kevin Yang )
凱文的日常點滴

從電商及科技業務跳船的資訊研究生|期許在不同領域激起的浪花點綴成最美的一副人生圖。嘗試讓文字承載一些能量, 讓這世界或自己都因分享而更加勇敢。LinkedIn: https://www.linkedin.com/in/yangchihyao/