從新手到中手:前端工程加強班
這是什麼
這是一系列循序漸進的課程,從最基本的 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
課程說明
課程進行的模式是這樣的,每週會出一次作業並且附上學習資源,讓學生能夠自學。過一週以後,我會在 Youtube 上面開直播統一講解這次的作業內容並且進行教學。
簡單來說呢,就是讓學生自己先學一遍,並且以寫作業來驗證自己有沒有學會。然後我再重新教一遍,幫他們理解一些自學時疑惑的點。
從 4/18 開始,每週二晚上九點半(如果有更動會在 Slack 上面公告)為講解課程以及疑難雜症解惑時間。
作業沒有限定完成時間,可以按照自己的步調走,只有講解是固定每週一次。
時程表
課程名稱 | 講解時間 | 作業說明 | 影片連結 |
---|---|---|---|
1. 基本 HTML/CSS 練習:以 Twitch 為例 | 4/18 | hw1 | https://youtu.be/-UEWWzWaGeg |
2. 讓畫面變得更動態:神奇的 CSS transition | 4/25 | hw2 | https://youtu.be/0g300SMd3rI |
3. 寫 CSS 必備神器:CSS 預處理器 | 5/2 | hw3 | https://youtu.be/KOpmpAUap60 |
4. 從假資料到真資料:Ajax 與 API 串接 | 5/9 | hw4 | https://youtu.be/PNGRPYFcAms |
5. 讓網頁變得更完整:加上 placeholder 與 infinite scroll | 5/16 | hw5 | https://youtu.be/mhnWXCMBiC4 / https://youtu.be/Ch7XGJNissc |
6. 返璞歸真:vanilla js | 5/23 | hw6 | https://youtu.be/gf_BmuzP2i8 |
7. 走向國際:i18n | 5/30 | hw7 | https://youtu.be/IVGwsAbPYMU |
8. 當我們包在一起:Webpack | 6/6 | hw8 | https://youtu.be/L7myBJg5kkE / https://youtu.be/X6f1pGMzj1s |
9. 節省 Request 的極致:一為全,全為一 | 6/13 | hw9 | https://youtu.be/ZXRNwZ4MjRo |
10. 改掉你的壞習慣:ESLint 與 standard | 6/20 | hw10 | https://youtu.be/RVU4uoX-CIw |
如何交作業
-
請先 fork 一份這個 project 到自己的帳號底下並且 clone 下來,然後在
answers/
資料夾底下相對應的子目錄撰寫作業,例如說 homework 1 就在answers/hw1
裡面寫作業即可。 -
寫完作業後記得 commit 然後 push 上去。
-
把這個 fork 後的 project 弄成 Github Page,才可以直接看到
index.html
等等的靜態檔案。
標題範例: [作業] 作業五
提問
請至 Issues 區塊直接開一個 Issue。
範例:[問題] 請問我該怎麼垂直置中一個區塊
提問前請先參考:提問的智慧。
建議
有任何建議的話,歡迎到 Issues 開一個 Issue,標題開頭請打:[建議]。
範例: [建議] 有關於作業三...