Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aszx87410/frontend-intermediate-course
It's a free online course about some frontend tech including Ajax, CORS, gulp, webpack and so on.
https://github.com/aszx87410/frontend-intermediate-course
Last synced: about 1 month ago
JSON representation
It's a free online course about some frontend tech including Ajax, CORS, gulp, webpack and so on.
- Host: GitHub
- URL: https://github.com/aszx87410/frontend-intermediate-course
- Owner: aszx87410
- Created: 2017-04-06T14:03:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-08-22T06:16:13.000Z (over 2 years ago)
- Last Synced: 2024-10-31T08:30:38.274Z (3 months ago)
- Language: HTML
- Homepage:
- Size: 5.76 MB
- Stars: 266
- Watchers: 17
- Forks: 88
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 從新手到中手：前端工程加強班
## 前言
**此一系列課程已經在 2017 年五月正式結束**，而結束之後我認為這些資源依舊對初學者有幫助，所以整理之後把它開源出來。建議的學習方式是自己先把作業完成，寫完以後看作業講解影片再來修正作業。我自己認為這堂課的重點其實是在作業，因此不推薦把這堂課當作傳統線上課程那樣只看影片。
因為已經結束的緣故，下列說明所提到的：「直播」或是「交作業」皆為過去式，作業講解已經直播完畢並且存成影片檔放在 Youtube，下方有連結。作業的話我也不會繼續改了，有問題的話建議你至相關社團發問或是找朋友求救。
若是你對課程筆記有興趣，可以參考兩位已經修完的同學的筆記，卡關或是碰到問題的時候應該很好用：
1. [Peggy's Learning Notes](http://peggyloveslearning.blogspot.sg/search/label/Frontend-intermediate-course)
2. [Dez.tw](https://dezchuang.github.io/archive/)
如果你對這課程背後的故事有興趣，可以參考：[一場三十人的免費程式教學實驗：成果與檢討](http://huli.logdown.com/posts/1913623-frontend-tutorial-experiment)
若是你做作業碰到問題想要參考其他同學的，可以在這邊找到所有那時候上課的同學交的作業：[交作業一覽表](https://github.com/aszx87410/frontend-intermediate-course/issues?q=is%3Aissue+is%3Aclosed)。
寫完作業之後想要參考其他人的答案的話，可以看看已經完成這堂課的同學們的 GitHub：
1. https://github.com/clingoram/frontend-intermediate-course/tree/master/answers
2. https://github.com/gogogohuang/frontend-intermediate-course/tree/master/answers
3. https://github.com/miau715/frontend-intermediate-course/tree/master/answers
4. https://github.com/zack1030/frontend-intermediate-course/tree/master/answers
5. https://github.com/lucreciaLin/frontend-intermediate-course/tree/master/answers
6. https://github.com/DezChuang/frontend-intermediate-course/tree/master/answers
7. https://github.com/pychiang/frontend-intermediate-course/tree/master/answers
8. https://github.com/yuanyu90221/frontend-intermediate-course/tree/master/answers
雖然這個課程已經結束，但如果你修了之後有些心得或是想跟大家分享你的成果，也歡迎開一個 Issue 或是寄信通知我。
## 這是什麼
這是一系列循序漸進的課程，從最基本的 HTML, CSS 開始，經由各種實際案例慢慢講到與前端有關的其他知識例如 Ajax, CORS, gulp, webpack 等等。
最初的構想來源可以參考這篇：[[情報] 免費程式教學(前端)](https://www.ptt.cc/bbs/Soft_Job/M.1488469002.A.E34.html)。
這系列的課程需要的基礎為以下五項：
1. HTML
2. CSS
3. JavaScript
4. jQuery
5. Git
如果沒有上述基礎，可以參考下列學習資源：
超強懶人包：[高雄前端社群：前端資源懶人包](https://docs.google.com/document/d/13nK_XY9u5uIleTpSCw88lMupzgCSwXd6j6je44eLhMQ/edit?pli=1)
### HTML, CSS
1. [html & css is hard(But it doesn’t have to be)](https://internetingishard.com/html-and-css/)
2. [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/)
3. [A free HTML & CSS tutorial](http://marksheet.io/)
### JavaScript, jQuery
1. [我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理](http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx)
1. [從 js 到 jQuery](https://www.facebook.com/groups/javascript.tw/permalink/190266371074709/)
### Git
1. [Got 15 minutes and want to learn Git?](https://try.github.io/levels/1/challenges/1)
2. [30 天精通 Git 版本控管 (02)：在 Windows 平台必裝的三套 Git 工具](http://ithelp.ithome.com.tw/articles/10132333)
3. [連猴子都能懂的 Git 入門指南](https://backlogtool.com/git-guide/tw/)
## 課程大綱
1. 基本 HTML/CSS 練習：以 Twitch 為例
2. 讓畫面變得更動態：神奇的 CSS transition
3. 寫 CSS 必備神器：CSS 預處理器
4. 從假資料到真資料：Ajax 與 API 串接
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll
6. 返璞歸真：vanilla js
7. 走向國際：i18n
8. 當我們包在一起：Webpack
9. 節省 Request 的極致：一為全，全為一
10. 改掉你的壞習慣：ESLint 與 standard
## 課程說明
課程進行的模式是這樣的，每週會出一次作業並且附上學習資源，讓學生能夠自學。過一週以後，我會在 Youtube 上面開直播統一講解這次的作業內容並且進行教學。
簡單來說呢，就是讓學生自己先學一遍，並且以寫作業來驗證自己有沒有學會。然後我再重新教一遍，幫他們理解一些自學時疑惑的點。
從 4/18 開始，每週二晚上九點半（如果有更動會在 Slack 上面公告）為講解課程以及疑難雜症解惑時間。
作業沒有限定完成時間，可以按照自己的步調走，只有講解是固定每週一次。
## 時程表
|課程名稱| 講解時間 | 作業說明 | 影片連結 |
|---|---|---|---|
| 1. 基本 HTML/CSS 練習：以 Twitch 為例 |4/18 | [hw1](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw1.md) | https://youtu.be/-UEWWzWaGeg |
| 2. 讓畫面變得更動態：神奇的 CSS transition | 4/25 | [hw2](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw2.md) | https://youtu.be/0g300SMd3rI |
| 3. 寫 CSS 必備神器：CSS 預處理器 | 5/2 | [hw3](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw3.md) | https://youtu.be/KOpmpAUap60 |
| 4. 從假資料到真資料：Ajax 與 API 串接 | 5/9 | [hw4](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw4.md) | https://youtu.be/PNGRPYFcAms |
| 5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll | 5/16 | [hw5](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw5.md) | https://youtu.be/mhnWXCMBiC4 / https://youtu.be/Ch7XGJNissc |
| 6. 返璞歸真：vanilla js | 5/23 | [hw6](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw6.md) | https://youtu.be/gf_BmuzP2i8 |
| 7. 走向國際：i18n | 5/30 | [hw7](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw7.md) | https://youtu.be/IVGwsAbPYMU |
| 8. 當我們包在一起：Webpack | 6/6 | [hw8](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw8.md) | https://youtu.be/L7myBJg5kkE / https://youtu.be/X6f1pGMzj1s |
| 9. 節省 Request 的極致：一為全，全為一 | 6/13 | [hw9](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw9.md) | https://youtu.be/ZXRNwZ4MjRo |
| 10. 改掉你的壞習慣：ESLint 與 standard | 6/20 | [hw10](https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw10.md) | https://youtu.be/RVU4uoX-CIw |
## 如何交作業
1. 請先 fork 一份這個 project 到自己的帳號底下並且 clone 下來，然後在 `answers/` 資料夾底下相對應的子目錄撰寫作業，例如說 homework 1 就在 `answers/hw1` 裡面寫作業即可。
2. 寫完作業後記得 commit 然後 push 上去。
2. 把這個 fork 後的 project 弄成 [Github Page](https://pages.github.com/#project-site)，才可以直接看到 `index.html` 等等的靜態檔案。
3. 開一個新的 [Issue](https://github.com/aszx87410/frontend-intermediate-course/issues/new)。會有預設的交作業格式出現，照著格式打即可。可參考：[交作業範例](https://github.com/aszx87410/frontend-intermediate-course/issues/1)。
標題範例： [作業] 作業五
## 提問
請至 [Issues](https://github.com/aszx87410/frontend-intermediate-course/issues) 區塊直接開一個 Issue。
範例：[問題] 請問我該怎麼垂直置中一個區塊
提問前請先參考：[提問的智慧](https://www.gitbook.com/book/ryanhanwu/how-to-ask-questions-the-smart-way/details)。
## 建議
有任何建議的話，歡迎到 [Issues](https://github.com/aszx87410/frontend-intermediate-course/issues) 開一個 Issue，標題開頭請打：[建議]。
範例： [建議] 有關於作業三...