[FE210] 從新手到中手:前端工程加強班
從十項作業中累積經驗並加強你的前端技能
這堂課最初的構想來源可以參考這篇:[情報] 免費程式教學(前端)。
這是一系列循序漸進的課程,從最基本的 HTML, CSS 開始,經由各種實際案例慢慢講到與前端有關的其他知識例如 Ajax, CORS, gulp, webpack 等等。
原本規劃的課程進行方式是事前交作業搭配事後影片講解來學習,而現在你看到的這些影片就是當初的講解影片。在整個教學結束之後,我把影片跟作業內容都放來這邊,希望集中在一起讓大家比較好找。
但需要注意的是:這邊不會有人幫你改作業,所以你也不需要交作業,交作業跟改作業都是之前的課程才有,現在整個課程已經結束,所以沒有提供改作業的服務囉。
但儘管如此,你依然可以自己跟著課程進度寫作業,並且在寫完之後自行看著講解影片進行檢討。
這系列的課程需要的基礎為以下五項:
- HTML
- CSS
- JavaScript
- jQuery
- Git
如果沒有上述基礎,可以參考下列學習資源:
超強懶人包:高雄前端社群:前端資源懶人包
HTML, CSS
JavaScript, jQuery
Git
- Got 15 minutes and want to learn Git?
- 30 天精通 Git 版本控管 (02):在 Windows 平台必裝的三套 Git 工具
- 連猴子都能懂的 Git 入門指南
課程大綱
- 基本 HTML/CSS 練習:以 Twitch 為例
- 讓畫面變得更動態:神奇的 CSS transition
- 寫 CSS 必備神器:CSS 預處理器
- 從假資料到真資料:Ajax 與 API 串接
- 讓網頁變得更完整:加上 placeholder 與 infinite scroll
- 返璞歸真:vanilla js
- 走向國際:i18n
- 當我們包在一起:Webpack
- 節省 Request 的極致:一為全,全為一
- 改掉你的壞習慣:ESLint 與 standard
你的老師
寫過一點後端也寫過前端,還寫了一堆你應該看過卻不知道作者是我的技術文章,致力於推廣淺顯易懂的程式教學。在新加坡工作過兩年半,是專職的前端工程師。一直都對教學有很大的熱忱,相信把話講得清楚又明白是一種專業,相信分享與交流可以讓世界更美好。
我不喜歡把自己講的很厲害,也不喜歡用學經歷說明什麼——我都用作品說話。
底下是我寫過的幾篇文章:
1. 零基礎的小明要如何成為前端工程師?
2. 成為前端工程師的四週年回顧
3. 從拉麵店的販賣機理解什麼是 API
4. 紮實的網頁前端學習路線與資源推薦
5. 當我們在學程式時,要學的到底是什麼?
我在自己的 blog以及 Medium 上面,常常發表許多心得,也曾經免費提供程式教學,希望能幫助那些剛踏入程式界的初心者們。 如果你想更了解我,可以參考:自學、哲學、講學:我的程式之路以及一個工程師的履歷進化史。
在嘗試過許多教學方法之後,終於決定自己跳下來開一個為初學者而生的線上程式課程平台。