完全門外漢的初階學習資源

在對於網頁前端領域完全陌生的情況下，要自己看懂教學文章是很吃力的(但也不是不可能，有人做得到，但對我來說真的很難。

以下是我在完全零基礎的情況下開始自學的資源：

• w3scool 相對w3.org跟MDN更簡單易懂的教學網站，而且可以翻譯成中文，適合入門學習。
• 六角學院 有中文線上課程，如果不習慣以英文教程為主的udemy，這會是一個很棒的平台。六角也有臉書社團可以發問，還有分享會可以聽。
• udemy 英文的課程比較多，選擇也相對多。我自己當時買的是 The web developer Bootcamp這堂課，雖然是英文，但是課程適合初學者，他從零基礎教到實作，也跨了一點點後端的部分。對於初學者認識整個網頁工程技術，是不錯的課程。
• google 遇到不懂的就google搜尋是個好習慣。

轉捩點：好想工作室的training

點圖看介紹：

我是先自學一個多月，對於前端有基本的認識，才進到好想工作室的web camp受訓的。training的方式基本上還是自學，但mentor會給予任務，任務會強迫我們遇到問題，藉以檢驗自己的學習是不是夠扎實。

在好想自學跟在家裡自學最大的不同，就是有人可以討論，分享我進好想之後建立的學習習慣與資源。

• 實作，一進到好想首先要切七個版，一開始切版就會發現自己前面所學的HTML、CSS馬上受到挑戰。實作是把自己所學的知識更扎實內化的過程。如果也想實作的話，推薦六角學院的 前端精神時光屋 有很多設計師的設計檔可以練習切版。
• codepen 可以快速試寫code的平台。邊學邊試做才能吸收。
• 進了好想以後，開始讀W3規範CSS specifiction、HTML standard。規範是W3組織為了改善過去網路定義不一致造成使用者跟開發者的困擾，而擬定的統一規範，開發網站的工程師，要參考最精準的資訊就是看它。
• MDN Mozilla團隊架設的網站，該團隊開發的瀏覽器就是Firefox，也是最遵循w3規範的瀏覽器，資料正確度盡量接近標準規範。
• CSS coke 前端大神Amos的網站教很多CSS技巧，可以學到很炫的東西。另外也有youtube頻道可以看。
• 盡量找英文的資源看，因為能得到比較新也比較完整的觀念，而且英文就是開發文件的原語言，很多用詞比較中性、接近原意，有助於建立概念與關鍵字系統。

標準規範看不懂怎麼辦？

我們可以先知道，CSS spec一點開來，左邊紅色圈圈是它的目錄，點了之後，右邊就會顯示該章內容。資料首頁是版本資訊，有連結可以點去最新版或舊版(不過當然是看新版的最好)。

一開始看不懂是很正常的，規範光是一個特性，會用很多專有名詞去解釋，不了解那些專有名詞就根本看不下去。我剛看的時候非常挫折，因為規範不是教你怎麼用，而是長篇理論。但在實作時，遇到輸入指令網頁卻不照你想的顯示時，spec就是很好的老師。當你看懂某一篇主題，往後用到它時，就能靠自己去找出問題在哪。

規範是透過學習經驗累積才能讀懂的，如果一開始看不懂，請先參考別的資源，不用太執著，先學會用HTML、CSS才是重要的，開始用才會開始需要看。

安裝文字編輯器

下一篇就開始要進入學習筆記了，文字編輯器要先裝起來～

首先寫HTML、CSS，或寫程式語言，都需要一個文字編輯器。好用的編輯器可以幫助開發，推薦Visual Studio Code，但VS code的功能很豐富，對初學者來說會太複雜，如果比較清爽的編輯器，也可以用Sublime Text。

*點圖可到VS code網站，黃色箭頭下拉可以選擇符合你作業系統的安裝檔。

VS code教學影片(轉自Progress Bar 進度條線上課程)：
第一集 第二集 (說明與安裝教學)
第三集 第四集(基礎使用教學)
第五集(插件安裝教學)

前三篇很囉唆，但這也是我自學前階段摸索的實況，不一定是最好的方式，但把這些跌跌撞撞的經驗分享出來，希望能給正在摸索的人一些參考。接下來就會進入我自學HTML跟CSS的筆記，也請不吝指教。

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝