Changee Learning Path - 如何自學前端開發

在網路的時代，我們在開始學習新領域時，可以透過 Google 找到許多學習的「資訊」，然而過多的資訊反而無法判斷什麼才是適合自己的「資源」。現有的學習資源非常豐富，但卻散落在各處，使得「自我學習」時總是花費大量時間在搜尋適合自己的資訊。因此我們希望能夠建立 Changee Learning Path「學習路徑平台」，整合資源與資訊，透過「學習分類帽」、「學習軌跡」、「實體資源」三個主要項目，建立方便自學的「學習路徑平台」。

如何自學前端開發

從零開始，利用網路資源訓練成為前端工程師

Changee | Learning Path

前端開發簡介

什麼是前端？

  • 撰寫 HTML/CSS/Javascript (與網頁設計師的不同)
  • 多樣的專長（易用性、介面、流程、邏輯、效能、維護性）
  • PM、視覺設計師、後端工程師都會合作到

了解更多請看

撰寫 HTML/CSS/Javascript

(與網頁設計師的不同)

結構

HTML

樣式

CSS

行為

JavaScript

什麼都要會的前端

https://www.flickr.com/photos/mygoare/6165675554/sizes/l/in/photostream/

為什麼學前端

  • 為設計相關學系學生一個工作選擇
  • 視覺設計師、平面設計師、UX 研究員讓設計實現
  • 設計師、PM，預估時程更精準，不會被工程師討厭
  • Web 技術跨平台，開發 Smart TV 也用
  • 初期創業製作 Prototype 的能力
  • 後端有 Parse、firebase 現成後端可以使用
  • Javascript 統治世界 （Node.js、硬體）

自我介紹

吳自勝 Mark Wu

  • 天生反骨，不務正業，大學學土木，畢業後靠 CodeSchool 線上課程自學前端技能
  • 前端工程師@ Deansoft Inc.
  • 尋找汽車產業的創業夥伴
  • 因為還是程式開發新手，所以更能了解初學者的痛苦

關鍵字自我介紹

  • 別浪費時間講大家好
  • 怎麼稱呼
  • 背景
  • 這次課程想達成的目標
  • 其它想說的話

學習前端的慾望

如何教設計師前端技術

如何教設計師前端技術 by Even Wu @JSDC2013

避免嚇跑初學者守則

  • 把書跟文件收起來
  • 直接看最炫的效果

See the Pen Makisu by Justin Windle (@soulwire) on CodePen.

擬真的按鈕

See the Pen Squishy Toggle Buttons by Justin Windle (@soulwire) on CodePen.

CSS 畫出復仇者聯盟

See the Pen CSS The Avengers by mario sanchez maselli (@mariosmaselli) on CodePen.

需要更多的成就感

休息一下 Q&A

現在我們知道

線上學習資源

CodeSchool

GA DASH

  • 運用專案 step-by-step 學習
  • 上完課即完成網站，成就感大
  • 目前課程專案只有 5 個，適合初學者

codecademy

  • 最多人上的免費課程
  • 個人覺得課程較無趣 XD

tut+

  • 早期以視覺設計的課程較多，現在程式課程也多
  • 最近課程新增的速度很快，但是單堂 $25 USD
  • 吃到飽方案為 $180 USD/per year
  • 有幾個免費課程可以上

treehouse

  • 除了程式教學外，也有商業的教學
  • 用過一次，沒有很喜歡 XD

learnstreet

  • 適合初學者
  • 目前只有 Javascript, Ruby, Python

pluralsight

  • 課程很多，什麼都有
  • 不太適合初學者

Udacity

  • 進階課程很多
  • 跟前端有關的課程少
  • 不太適合初學者

推薦書籍

HTML&CSS：網站設計建置優化之道

  • 許多初學者的第一本書
  • 簡短的範例說明每個主題的實作

深入淺出 jQuery

  • 先別管 Javascript 了
  • 豐富的互動範例教學，不是程式教學

購書重點

  • 沒有那種從頭到尾看完就會的書
  • 實作才是進步的最快方法
  • 當一本書名有太多關鍵字，小心
  • 中文名字的作者，也小心
  • 歐萊禮的書比較保險，但是也有例外

休息一下 Q&A

初學資源

任何想補充？

需要追蹤的東西

Sidebar

  • 掌握全球設計最新動態
  • 每天五篇文章
  • 訂閱每天寄信給你
  • 強迫自己每天看

Awwwards

Behance

Dribbble

  • 從其他的作品裡尋找靈感創意

taobao UED

W3C plus

騰訊 ISUX

阿里巴巴 用戶體驗部

優設 UISDC

  • 英文看太累，有需多簡體資源

優質的部落格

Web Fundamentals

  • Google 最近推出的官方教學文件
  • 新東西持續發表中

實體課程

Changee Learning Path 與實體課程有何不同

Mokoversity

  • 直接動手從專案學習
  • 1 對 1 導師指導

AlphaCamp

  • 1 對 1 專業輔導
  • 產業合作，實例演練
  • 需要 Full-Time 參與

innovatist

  • 非營利組織
  • 推廣下一世代的免費科技教育
  • 大家自動自發參與

Changee Learning Path

  • 提供整理後的資訊與工具評測比較表
  • 解決使用者初學困境、培養自學能力
  • 著重線上資源的整理，實體課程僅為輔佐，非以教育訓練為核心

走出去參加活動

參與社團

Front-end Developer Taiwan

HTML5 與 CSS3

RGBA

Javascript.tw

參加 g0v

  • 寫程式改造社會
  • 黑客松
  • 教學松
  • 前端松
  • CCSP

三不五時去活動網站看看有什麼活動

規劃自己的網站

用手畫

用線上工具畫

用網站產生器

設置自己的環境

Sublime

瀏覽器＋開發者工具

  • Chrome + Developer tools
  • 遇到問題先去看開發者工具
  • Window 按 F12
  • Mac 按 Cmd + Opt + I

版本控制

  • 別再使用資料夾做版本控制了
  • 靜態網站直接架好，不用找網路空間了
  • 沒有 GitHub 帳號的工程師，就像沒有使用臉書的人

預處理工具

  • 開發一個網站需要按多少次重新整理
  • CSS 結尾忘記加分號
  • Fire.app
  • Web Starter Kit

    • Q&A

    Facebook 社團