It's a free online course about some frontend tech including Ajax, CORS, gulp, webpack and so on.
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github remove label Apr 12, 2017
answers/hw1 init Apr 6, 2017
homeworks fix typo Jun 6, 2017
.gitignore init Apr 6, 2017
README.md Update README.md Apr 8, 2018

README.md

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

前言

此一系列課程已經在 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,標題開頭請打:[建議]。
範例: [建議] 有關於作業三...