網頁程式設計自學清單 (for 大一國文)

# 網頁程式設計自學清單

這邊所列出來的是我曾經用過，且覺得收穫豐富的自學資源。以下涵蓋兩種，Tutorial 和 Reference，前者會有順序性的教學，後者則在寫程式過程中提供許多有用的參考。

對於要完成下學期的作業，其實只要把底下提到的 Codecademy 的部份課程上完即可，但對於想要更進一步創造出更棒效果或更堅固框架的同學，其他學習資源都會讓你收穫良多。


## Tutorials
教學類型的資源，分主題，提供漸進式的教學影片或互動教學。

### [Codecademy](https://www.codecademy.com/learn/all)
Codecademy提供許多語言的基礎教學，有關卡制，每一關都會教一個小小的概念，很適合沒有程式基礎的人從頭學起。

我依據重要性將各位可能需要的課程列在下面，大家可依據自己的需要和時間斟酌
1. [HTML & CSS](https://www.codecademy.com/learn/web): 網頁的內容和裝飾
2. [JavaScript](https://www.codecademy.com/learn/javascript): 網頁的功能和互動性
3. [Git](https://www.codecademy.com/learn/learn-git): 跟別人協作寫 code 的必備工具
4. [Deployment](https://www.codecademy.com/learn/deploy-a-website): 把寫好的網頁丟上伺服器，讓別人連的到。~~但我之後會教大家用  github-pages 五分鐘解決~~

### [EggHead](https://egghead.io/courses)
有了基本的網頁程式設計基礎之後，可以到 Egghead 上面學一些近年來比較熱門的一些框架，比如說 [React](https://egghead.io/courses/react-fundamentals), [Redux](https://egghead.io/courses/getting-started-with-redux), [Angular2](https://egghead.io/technologies/angular2), 等等。我自己使用的框架是 React + Redux，

### [DevTips](https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ)
一位很酷的大叔的各種網頁設計教學影片，之後作業可能會用到的[背景影片](https://www.youtube.com/watch?v=7S0X0OWMu_k)，[視差效果](https://www.youtube.com/watch?v=STwoa-9jxi0&list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk)他都有提供實際的教學


## Reference
以下的資源是一些
- [MDN](https://developer.mozilla.org/zh-TW/)： 最重要的 HTML, CSS, JS 
- [codepen](http://codepen.io/)： 世界各地工程師和設計師展示各種網頁技術的地方。這裡通常可以找到自己想要的效果的實做方法，比如說課堂上展示的[視差效果](http://codepen.io/zabielski/pen/MyoBaY)
- [Learn X in Y minutes](https://learnxinyminutes.com/)： 各種程式語言的語法速查
- [caniuse](http://caniuse.com/)： 拿來查某種語法或API在各種瀏覽器相容的程度
- [Google](https://www.google.com.tw/)： 大學四年的好夥伴，有求必應