/frontend-intermediate-course

這是一系列循序漸進的課程,從最基本的 HTML, CSS 開始,經由各種實際案例慢慢講到與前端有關的其他知識例如 Ajax, CORS, gulp, webpack, React 等等。

Primary LanguageCSS

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

這是什麼

這是一系列循序漸進的課程,從最基本的 HTML, CSS 開始,經由各種實際案例慢慢講到與前端有關的其他知識例如 Ajax, CORS, gulp, webpack, React 等等。

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

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

  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. 不一樣的思考方式:React

課程說明

課程進行的模式是這樣的,每週會出一次作業並且附上學習資源,讓學生能夠自學。過一週以後,我會在 Youtube 上面開直播統一講解這次的作業內容並且進行教學。

簡單來說呢,就是讓學生自己先學一遍,並且以寫作業來驗證自己有沒有學會。然後我再重新教一遍,幫他們理解一些自學時疑惑的點。

從 4/18 開始,每週二晚上九點(如果有更動會在 Slack 上面公告)為講解課程以及疑難雜症解惑時間。

作業沒有限定完成時間,可以按照自己的步調走,只有講解是固定每週一次。

時程表

課程名稱 講解時間 作業說明 影片連結
1. 基本 HTML/CSS 練習:以 Twitch 為例 4/18 hw1
2. 讓畫面變得更動態:神奇的 CSS transition 4/25 hw2
3. 寫 CSS 必備神器:CSS 預處理器 5/2 hw3
4. 從假資料到真資料:Ajax 與 API 串接 5/9 hw4
5. 讓網頁變得更完整:加上 placeholder 與 infinite scroll 5/16 hw5
6. 返璞歸真:vanilla js 5/23 hw6
7. 走向國際:i18n 5/30 hw7
8. 當我們包在一起:Webpack 6/6 hw8
9. 節省 Request 的極致:一為全,全為一 6/13 hw9
10. 不一樣的思考方式:React 6/20 hw10

如何交作業

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

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

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

  4. 開一個新的 Issue,並且在右側Label的地方選擇作業。會有預設的交作業格式出現,照著格式打即可。可參考:交作業範例

提問

請至 Issues 區塊直接開一個 Issue,Label 記得選擇問題

提問前請先參考:提問的智慧

建議

有任何建議的話,歡迎到 Issues 開一個 Issue,Label 選擇建議即可。