今天是鐵人賽的第十天，要來開始說說大叔的前端之路
並且說明我都看那些教學文件或影片
我是去年中才開始想重新學習網頁前端的部分
之前學Python 有用過Django跟Flask的框架
但只是打打書上的範例，CSS跟JS都不太懂
現在的網頁複雜度真的高出大叔那個用PhotoShop切版的年代太多太多了...
現在如果說要學網頁前端應該很少會拿Dreamweaver來當編輯軟體(另一款FrontPage好像GG了)
應該就回歸用編輯器打html標籤套上CSS與JavaScript來製作網頁
所以現在想要寫一個網頁要懂得知識要比以前多很多...
(當然也有極端特例...如前幾天提過的暗黑2的資料網站易牙居...極簡? 但有用 XD)
Amos大大在2019 iT 邦幫忙鐵人賽的金魚都能懂的網頁設計入門
是我重新學習網頁前端的入門磚
以下是我學習的順序:
2019 iT 邦幫忙鐵人賽
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎
第 11 屆 iT 邦幫忙鐵人賽
金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
第 12 屆 iT 邦幫忙鐵人賽
金魚都能懂的Bootstrap5網頁框架開發
Amos的教學影片不只上面所列的3個系列，其他的可以參考 Amos大大歷屆鐵人賽的連結
這3個系列看下來，真是獲益良多，內容主要是偏向CSS切版的部分，當年學不會的CSS...終於有了開端
如果Amos的金魚系列...還是看不懂的話...那應該考慮學別的...
網頁三要素:HTML、CSS、JavaScript
Amos的金魚系列已經幫我解決了前兩個HTML、CSS
剩下的JavaScript 是Google的演算法推薦給我
在YT上看金魚系列，有天YT的推薦頻道有一個叫 Alex 宅幹嘛
才發現居然有人開寫程式的直播!!!
從此我就開始看Alex 大大的之前舊的直播存檔學JS跟Vue
大叔自從2010年去了菲律賓跟澳洲一直到2016年末回到台灣
由於長時間處在沒有網路吃到飽的國家(菲律賓跟澳洲都是)
有網路大部分都是用來看臉書或PTT
需要高流量的YouTube幾乎都沒在用，就算回到台灣的前兩年也是這樣
所以YouTube上面的生態很陌生...虧我是資深的網路鄉民 XD
自從我開始看了Amos跟Alex在YT上面的教學影片後
YouTube的演算法開始推薦一些跟程式教學有關的影片
這時才發覺...現在學程式也太幸福了吧!!!
YouTube上面有關程式教學滿山滿谷(絕大部分是英文)
這邊我就不推薦看那部，而是說一下如何挑選教學影片避免踩到坑
這邊舉例，我要看網頁切版的教學
這個版型蠻喜歡的，就點進去看影片
影片有沒有提供完整的程式碼最重要!!!
如果影片有做時間軸 (Timestamps) 是加分項目 !
YouTube的教學影片，一開始我就踩了不少坑
有碰過看完影片，影片中的範例做不出來，問頻道主能不能提供source code?
結果source code要花錢買
後來才知道有些影片只是要來賣課程(code)的，當時太菜不知道有這招
所以之後我看YouTube的教學影片，除非不用看原始碼，也可以自己完成的
不然不附source code的，畫面做得再漂亮我都不會點來看
這部分如果有人敲碗...再做補充
接下來的鐵人賽，都會用1-2天來講一個小範例 :)
以上就是鐵人賽第10天的內容 :)
iThome鐵人賽
看影片追技術