如何自學前端開發 – 從零開始，利用網路資源訓練成為前端工程師 – 前端開發簡介
如何自學前端開發 – 從零開始，利用網路資源訓練成為前端工程師 – 前端開發簡介
0 0
Changee-f2e-week1
前端基礎課程第一週簡報 - 如何自學前端On Github psdmac / Changee-f2e-week1
如何自學前端開發
從零開始，利用網路資源訓練成為前端工程師
前端開發簡介
什麼是前端？
- 撰寫 HTML/CSS/Javascript (與網頁設計師的不同)
- 多樣的專長（易用性、介面、流程、邏輯、效能、維護性）
- PM、視覺設計師、後端工程師都會合作到
了解更多請看
撰寫 HTML/CSS/Javascript
(與網頁設計師的不同)
結構
HTML
樣式
CSS
行為
JavaScript
什麼都要會的前端
https://www.flickr.com/photos/mygoare/6165675554/sizes/l/in/photostream/
為什麼學前端
自我介紹
吳自勝 Mark Wu
- 天生反骨，不務正業，大學學土木，畢業後靠 CodeSchool 線上課程自學前端技能
- 前端工程師@ Deansoft Inc.
- 尋找汽車產業的創業夥伴
- 因為還是程式開發新手，所以更能了解初學者的痛苦
關鍵字自我介紹
- 別浪費時間講大家好
- 怎麼稱呼
- 背景
- 這次課程想達成的目標
- 其它想說的話
學習前端的慾望
如何教設計師前端技術
如何教設計師前端技術 by Even Wu @JSDC2013
避免嚇跑初學者守則
- 把書跟文件收起來
- 直接看最炫的效果
擬真的按鈕
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.
需要更多的成就感
- Codepen.io - 從別人的作品學習
- TheCodePlayer - 從程式碼播放器來學習
- Codrops - 特殊效果集合
休息一下 Q&A
現在我們知道
- 追蹤 Even Wu 以及加入 RGBA 討論區
- 追蹤 Muki Wu 以及去 MUKI space* 點個讚
- 前端工程開發實務訓練 - f2eclass.com
線上學習資源
CodeSchool
- 循序漸進由淺入深，結合任務遊戲化。
- 一個月 $25 USD (折價後)
免費的課程
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
- 社群裡最多人使用的編輯器
- 許多 Package 可以使用
- 可以免費使用，要付錢也可以
瀏覽器＋開發者工具
- Chrome + Developer tools
- 遇到問題先去看開發者工具
- Window 按 F12
- Mac 按 Cmd + Opt + I
版本控制
- 別再使用資料夾做版本控制了
- 靜態網站直接架好，不用找網路空間了
- 沒有 GitHub 帳號的工程師，就像沒有使用臉書的人