mona-loading Recently we have received many complaints from users about site-wide blocking of their own and blocking of their own activities please go to the settings off state, please visit： https://githubmemory.com/settings/account ，20 minutes to take effect。
16
Watch
253
Star
92
Fork
136
Issue

It's a free online course about some frontend tech including Ajax, CORS, gulp, webpack and so on.

16
HTML
aszx87410
aszx87410
aszx87410
aszx87410 master
pushedAt 4 years ago

aszx87410/frontend-intermediate-course

從新手到中手：前端工程加強班

前言

此一系列課程已經在 2017 年五月正式結束，而結束之後我認為這些資源依舊對初學者有幫助，所以整理之後把它開源出來。建議的學習方式是自己先把作業完成，寫完以後看作業講解影片再來修正作業。我自己認為這堂課的重點其實是在作業，因此不推薦把這堂課當作傳統線上課程那樣只看影片。

因為已經結束的緣故，下列說明所提到的：「直播」或是「交作業」皆為過去式，作業講解已經直播完畢並且存成影片檔放在 Youtube，下方有連結。作業的話我也不會繼續改了，有問題的話建議你至相關社團發問或是找朋友求救。

若是你對課程筆記有興趣，可以參考兩位已經修完的同學的筆記，卡關或是碰到問題的時候應該很好用：

  1. Peggy's Learning Notes
  2. Dez.tw

如果你對這課程背後的故事有興趣，可以參考：一場三十人的免費程式教學實驗：成果與檢討

若是你做作業碰到問題想要參考其他同學的，可以在這邊找到所有那時候上課的同學交的作業：交作業一覽表。

寫完作業之後想要參考其他人的答案的話，可以看看已經完成這堂課的同學們的 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 等等。

最初的構想來源可以參考這篇：[情報] 免費程式教學(前端)。

這系列的課程需要的基礎為以下五項：

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery
  5. Git

如果沒有上述基礎，可以參考下列學習資源：

超強懶人包：高雄前端社群：前端資源懶人包

HTML, CSS

  1. html & css is hard(But it doesn’t have to be)
  2. Learn to Code HTML & CSS
  3. A free HTML & CSS tutorial

JavaScript, jQuery

  1. 我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理
  2. 從 js 到 jQuery

Git

  1. Got 15 minutes and want to learn Git?
  2. 30 天精通 Git 版本控管 (02)：在 Windows 平台必裝的三套 Git 工具
  3. 連猴子都能懂的 Git 入門指南

課程大綱

  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://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

如何交作業

  1. 請先 fork 一份這個 project 到自己的帳號底下並且 clone 下來，然後在 answers/ 資料夾底下相對應的子目錄撰寫作業，例如說 homework 1 就在 answers/hw1 裡面寫作業即可。

  2. 寫完作業後記得 commit 然後 push 上去。

  3. 把這個 fork 後的 project 弄成 Github Page，才可以直接看到 index.html 等等的靜態檔案。

  4. 開一個新的 Issue。會有預設的交作業格式出現，照著格式打即可。可參考：交作業範例。

標題範例： [作業] 作業五

提問

請至 Issues 區塊直接開一個 Issue。
範例：[問題] 請問我該怎麼垂直置中一個區塊

提問前請先參考：提問的智慧。

建議

有任何建議的話，歡迎到 Issues 開一個 Issue，標題開頭請打：[建議]。
範例： [建議] 有關於作業三...

ucloud ads