Skip to content

Instantly share code, notes, and snippets.

@stegben

stegben/learn_web.md

Last active September 25, 2016 10:10
Show Gist options
  • Save stegben/9ea4b3bbeccc39ca9523303df5b1caf2 to your computer and use it in GitHub Desktop.
Save stegben/9ea4b3bbeccc39ca9523303df5b1caf2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
learn_web.md

網頁程式設計自學清單

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

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

Tutorials

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

Codecademy

Codecademy提供許多語言的基礎教學，有關卡制，每一關都會教一個小小的概念，很適合沒有程式基礎的人從頭學起。

我依據重要性將各位可能需要的課程列在下面，大家可依據自己的需要和時間斟酌

  1. HTML & CSS: 網頁的內容和裝飾
  2. JavaScript: 網頁的功能和互動性
  3. Git: 跟別人協作寫 code 的必備工具
  4. Deployment: 把寫好的網頁丟上伺服器，讓別人連的到。但我之後會教大家用 github-pages 五分鐘解決

EggHead

有了基本的網頁程式設計基礎之後，可以到 Egghead 上面學一些近年來比較熱門的一些框架，比如說 React, Redux, Angular2, 等等。我自己使用的框架是 React + Redux，

DevTips

一位很酷的大叔的各種網頁設計教學影片，之後作業可能會用到的背景影片，視差效果他都有提供實際的教學

Reference

以下的資源是一些

  • MDN： 最重要的 HTML, CSS, JS
  • codepen： 世界各地工程師和設計師展示各種網頁技術的地方。這裡通常可以找到自己想要的效果的實做方法，比如說課堂上展示的視差效果
  • Learn X in Y minutes： 各種程式語言的語法速查
  • caniuse： 拿來查某種語法或API在各種瀏覽器相容的程度
  • Google： 大學四年的好夥伴，有求必應
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment