網頁前端工程入門自學資源整理
作者：yucj（nakts0123@gmail.com）
HTML & CSS
基礎
我覺得這本書讀完就大概瞭解 HTML 和 CSS 所有需要的基礎知識了：
- HTML&CSS：網站設計建置優化之道（中譯實體書）http://www.books.com.tw/products/0010546014 （舊版的選擇器表格內容有誤，可參考 W3C 或 MDN 的表格 ）
如果習慣看影片，可參考：
- HTML 基礎：我的第一份網頁（中文影片） https://www.youtube.com/watch?v=SRbewm2AUew
- CSS 基礎：幫網頁點綴一下（中文影片） https://www.youtube.com/watch?v=Jr7lwHnTK68
- JavaScript 網頁前端工程進階：CSS 3（中文影片） https://training.pada-x.com/online.htm
另外有參考資料方便查語法：
另外查語法用 Google 一定會看到這兩個網站，這兩個是必須要知道的工具：
- https://www.w3schools.com
- https://developer.mozilla.org/en-US/docs/Web
學完基礎的 CSS 語法，有讓你練習 CSS Selector 的網站：
- CSS Diner（練習 CSS Selector 的遊戲）https://flukeout.github.io/
CSS 有很多實務應用的技巧，這本書是個不錯的整理（以2017年來說），可以當補充書翻翻：
- CSS Secrets（中譯實體書）http://www.books.com.tw/products/0010702536
實務
學完基礎的 CSS 語法，實務上要會的是怎麼用 CSS 安排網站版面，這部分可參考：
- 學習 CSS 版面配置（中文網站） http://zh-tw.learnlayout.com/toc.html
Flexbox 和 Grid 是新的語法，通常專門用來排版，要進階可參考：
- Flexbox Froggy（玩遊戲學 CSS flexbox）http://flexboxfroggy.com/#zh-tw
- Grid Garden（玩遊戲學 CSS grid）http://cssgridgarden.com/#zh-tw
上面是關於 CSS 排版的程式語法和概念，想瞭解實務範例可參考像下面列舉的這種書，或是任何關於響應式網頁設計（responsive web design）的課程：
- 網頁就是這麼疊出來的（書）http://www.books.com.tw/products/0010732503
- HTML5+CSS3 網頁版型設計：Standard Layout‧Grid Layout‧Single Page Layout（書）http://www.books.com.tw/products/0010731482
HTML5 有些實用的新元素，主流瀏覽器大多都開始支援，可以開始多少知道一點：
- JavaScript 網頁前端工程進階：HTML 5（中文影片） https://training.pada-x.com/online.htm
開始補充前端技術的的相關電腦和業界知識
在對 HTML 和 CSS 有些許瞭解後，就可以開始一邊多學一些開發用的技巧、工具、職業要求和關於網路的知識了：
瀏覽器開發者工具
- https://www.youtube.com/watch?v=5hm_QkCXiFA&list=PLYrA-SsMvTPOxLwIScddysuA3DYEOVpe1
前端工程師作為一個職業
- 前端技能樹清單 http://www.hexschool.com/2018/04/16/2018-04-16-skill_tree
- 前端工程師養成手冊 http://idoc.hexschool.com/tobef2e/chapter1.html
其他零零碎碎的東西
- 可參考 Front-End Handnook 2018 https://frontendmasters.com/books/front-end-handbook/2018/learning.html
Javascript
入門：怎麼寫程式
在學基礎的時候，建議直接在瀏覽器跑你的 Javascript 程式就好。有的教學叫你安裝 NodeJS，請不用理他，不然安裝設定環境可能就浪費超多時間，你也不知道問題在哪。
書可參考：
- 專為中學生寫的 JavaScript 程式書（中文電子書） https://ccckmit.gitbooks.io/javascript/content/
- You Don’t Know JS（英文電子書）https://github.com/getify/You-Dont-Know-JS
影片可參考：
- JavaScript 動態網頁（中文影片）https://training.pada-x.com/online.htm
- You Don’t Know JS 作者的線上課程（英文影片課程，須付費，有促銷活動時可免費看）https://frontendmasters.com/courses/javascript-basics/
- JavaScript 入門篇 - 學徒的試煉（中文影片，須付費）https://www.udemy.com/javascript-learning/?couponCode=COUPON_2018
上面各教材講的主題應該都差不多，但老師解釋的方式可能不太一樣，自己挑自己能理解的。
Udemy 課程經常會有特價活動（但通常是英文課程才加入促銷），如果英文能力足夠又有經濟考量，可以在特價時購買英文課程。Udemy 課程品質落差很大，挑選課程可以看暢銷度和評分，通常英文課程評分 4.6 以上，而且評論人數超過數千人的課程，品質應該都還 OK。另外它的課程購買可以在期限內退款，所以建議買了要先趕快試聽。
要注意的是，有些標註「有中文字幕」的課程，其實是 Google 翻譯字幕，根本不能用。另外，中國或香港的中文課程，程式用語的翻譯和台灣的使用習慣不同（例如 object 台灣用「物件」，他們用「對象」）。
進階：Javascript 的新語法 ES6
Javascript 是一個還在發展的語言，有些新版本的語法是舊的課程不會講到的，可參考：
- Exploring ES6（英文電子書）http://exploringjs.com/es6.html
- ECMAScript 6 入门（簡體中文電子書）http://es6.ruanyifeng.com/
進階：怎麼寫更漂亮的程式
以下這些資料這是關於怎麼寫好程式的基礎：
- Speaking JavaScript（英文電子書，有中譯版實體書）http://speakingjs.com/es5/index.html
- Eloquent JavaScript（英文電子書）http://eloquentjavascript.net/
- JavaScript 勇者之路（中文網路文章）http://idoc.hexschool.com/tobejsfighter/2017-12-04-ironman-2017.html
- 面試用的線上程式能力測驗服務 https://app.codility.com/programmers/lessons/ https://app.codility.com/programmers/challenges/
在學完基礎的 Javascript 之後就可以一邊學怎麼用 Commend Line 和基礎的 NodeJS 了。之後就可以不只在瀏覽器上，也可以在電腦上跑你的 Javascript 程式。
（待補）
Git
開始要做專案或是要把東西發佈到免費空間上時，就可以順便開始學現在最流行的版本控制。
（待補）
Framework & Library
Framework 是套用別人寫好的東西來幫你更偷懶地有效率地進行工作，實務上常用所以找工作必須要至少學會一套。至於要學哪套框架，最好的建議就是挑用的人多的，還有就是看你想進哪些公司就學他們用的：
CSS Framework
CSS Framework 並沒有太困難，你如果已經熟悉 HTML、CSS 並且略懂一點點 Javascript，看官方的說明文件就應該可以懂怎麼使用。
- Bootstraps
- Semantic UI
- Bulma
Javascript Framework
在 2018 年你有幾個選擇，對初學者來說，就看你想去的公司最多用哪個就學哪個…
（資源待補）
Libraries
前端有些工作是躲不掉的，例如操作DOM、做動畫、起 frontend server 或 proxy server、或是一些常用但沒有內建的函式，有人寫好不用重複造輪子
- jQuery
- lodash, underscore
- Express, Koa
- Anime.js, Animate.css, Velocity
- axios, fetch
（資源待補）
Pre-Processing 和工作管理
因為現在網站越來越複雜，所以發展出一些前端工作的工具程式，幫你做掉必須手動重複的工作和更好的管理工作內容。
（資源待補）