Masterclass課程目錄
*2.0版課程更新 (己全部更新完畢！)
- 新增AI (人工智能)篇
- Vue 2 -> Vue 3的課程更新
- Nuxt 2 -> Nuxt 3的課程更新
- 新增Nodejs + Express + MongoDB 後台開發。Phase 3的放租平台，會由Strapi轉到以Expres作為後台開發
- 新增Git Deployment
新增AI (人工智能)篇的原因大家都知道。AI技術一定會不斷高速地發展，幫助你開發的能力會愈來愈大，一定要學。
Vue 2 ＋ Nuxt 2 上了第3代的版本，也要更新。而後台開發，我們會轉為用Express 代替Strapi，原因是使用Express開發更加靈活。
至於Wordpress/PHP/jQuery，我依舊會放在課程。始終現網絡上，40%的網站還是Wordpress。你接Freelance總不能收客萬多元，然後給他們一個Wix網站吧？ (Wix之類還不能好好Customize後台給客人) Wordpress現在還是接Template Based Freelance Project的首選。
就是這樣了！課堂上見吧 ＝）加油！
| 基本概念 | |||
|---|---|---|---|
| 第1星期 | 歡迎你的報名 ( 序 ) | ||
| 第1星期 | 主頁結構 ( 製作「超專業」的銷售網站 ) | ||
| 第1星期 | 設計 ( 製作「超專業」的銷售網站 ) | ||
| 第1星期 | 文案 ( 製作「超專業」的銷售網站 ) | ||
| 第1星期 | 開發方法 ( 製作「超專業」的銷售網站 ) | ||
| 第1星期 | 分析軟件 ( 製作「超專業」的銷售網站 ) | ||
| 第1星期 | 網頁設計 - 基本概念 ( Frontend, Backend, Responsive, CMS, WWW ) | ||
| HTML | |||
| 第1星期 | HTML基本概念 ( 開發環境 ) | ||
| 第1星期 | HTML基本概念 ( Opening Tag/ Closing Tag ) | ||
| 第1星期 | HTML基本概念 ( Attribute ) | ||
| 第1星期 | HTML 練習1 | 練習 | |
| 第1星期 | HTML 練習1 - 答案 | 答案 | |
| 第1星期 | 進階HTML ( div, span, iframe, 放相, 頁面結構, table, form ) | ||
| 第1星期 | HTML 練習2 | 練習 | |
| 第1星期 | HTML 練習2 - 答案 | 答案 | |
| CSS | |||
| 第2星期 | CSS Selector | ||
| 第2星期 | CSS Selector 練習 | 練習 | |
| 第2星期 | CSS Selector 答案 | 答案 | |
| 第2星期 | CSS 文字篇 | ||
| 第2星期 | CSS 文字篇 - 練習 | 練習 | |
| 第2星期 | CSS 文字篇 - 答案 | 答案 | |
| 第2星期 | CSS 實用篇 | ||
| 第2星期 | CSS 實用篇 - 練習 | 練習 | |
| 第2星期 | CSS 實用篇 - 答案 | 答案 | |
| 第2星期 | CSS Box Model | ||
| 第2星期 | CSS Box Model 練習 | 練習 | |
| 第2星期 | CSS Box Model 答案 | 答案 | |
| 第2星期 | CSS Display | ||
| 第2星期 | CSS Position | ||
| 第2星期 | CSS Float | ||
| 第2星期 | CSS 文字轉State | ||
| 第2星期 | CSS 左右置中 | ||
| 第2星期 | CSS 跟隨次序 | ||
| 第2星期 | Responsive CSS | ||
| HTML Template | |||
| 第3星期 | HTML Template - 基本概念 | ||
| 第3星期 | HTML Template - 實戰 ( 建立alanwithsophie.com ) | 實戰 | |
| WORDPRESS | |||
| 第3星期 | Wordpress基本概念 | ||
| 第3星期 | 前期設置 - 購買網址 ( godaddy / hkdnr ) | ||
| 第3星期 | 前期設置 - 購買伺服器 + 安裝WP ( Google Cloud ) | ||
| 第3星期 | 前期設置 - 連結網址和伺服器 | ||
| 第3星期 | Wordpress基本操作 ( Page, Post, Menu, Widgets, Themes, Plugins, Users, Settings ) | ||
| 第3星期 | 簡單主題安裝示範 ( 使用主題Neila，建立簡單新聞網站 ) | ||
| 第4星期 | 選擇WP Template | ||
| 第4星期 | 尋找WP Template | ||
| 第4星期 | Reset WP ( 建立hr-page.com ) | 實戰 | |
| 第4星期 | WP架站11部 ( 建立hr-page.com ) | 實戰 | |
| 第4星期 | Foundry進階應用 ( 建立hr-page.com ) | 實戰 | |
| 第4星期 | 建立網店 ( 建立v-toilet.com ) | 實戰 | |
| 第4星期 | 建立Spam Free Email ( 使用Amazon SES ) | 實戰 | |
| 第4星期 | 使用Shortcode ( 建立v-toilet.com ) | 實戰 | |
| 第4星期 | Kalium進階，常用Plugins ( 建立v-toilet.com ) | 實戰 | |
| 分析軟件 | |||
| 第4星期 | 安裝Google Analytics | ||
| 第4星期 | 使用Google Analytics | ||
| 第4星期 | 安裝Google Webmaster Tools | ||
| 第4星期 | 使用Google Webmaster Tools | ||
| 人工智能篇 (Bonus課堂) | |||
|---|---|---|---|
| 完成品介紹 + 課堂源碼/Prompt 下載 | |||
| Large Language Model (LLM) 解說 | |||
| Frameworks | |||
| AI Model比較 | |||
| 第1個指令 （建立外觀） | 實戰 | ||
| 第2個指令 -（建立互動性） | 實戰 | ||
| 第2個指令 - 延伸 （建立互動性） | 實戰 | ||
| 什麼是API? | |||
| Programming 基本概念 - Variables | |||
| Programming 基本概念 - Functions | |||
| Programming 基本概念 - If else | |||
| Programming 基本概念 - Array Object | |||
| Calling API | |||
| 第3個指令 -（API Call） | 實戰 | ||
| Debug | 實戰 | ||
| 第3個指令 - 延伸 （API Call） | 實戰 | ||
| 第4個指令 -（完成軟件） | 實戰 | ||
| 源碼導讀 | |||
| Go Live - Netifly | 實戰 | ||
| Github Copilot + ChatGPT 4 使用教學 | |||
| 做Research - 開Party酒精計算器 | 練習 | ||
| 我的Research過程 | 答案 | ||
| Prompt 1 - 建立外觀 | 實戰 | ||
| 修改Layout | 實戰 | ||
| 建立你的功能 Prompt | 練習 | ||
| 2nd prompt - 加入功能 | 實戰 | ||
| 第5星期 | 歡迎來到階段二：進階 | ||
| BOOTSTRAP | |||
|---|---|---|---|
| 第5星期 | Bootstrap實戰 ( 建立ko-party.com ) | 實戰 | |
| 第5星期 | Background Src ( 補充 ) | 實戰 | |
| 第5星期 | Doctype / charset ( 補充 ) | 實戰 | |
| 第5星期 | Bootstrap實戰練習 ( 建立ko-party.com ) | 練習 | |
| 第5星期 | Bootstrap實戰答案 ( 建立ko-party.com ) | 答案 | |
| Javascript | |||
| 第6星期 | JS 變數 | ||
| 第6星期 | JS 變數練習 | 練習 | |
| 第6星期 | JS 變數答案 | 答案 | |
| 第6星期 | JS Function | ||
| 第6星期 | JS Function練習 | 練習 | |
| 第6星期 | JS Function答案 | 答案 | |
| 第6星期 | JS Functions - Return | ||
| 第6星期 | JS if else | ||
| 第6星期 | JS if else 練習 | 練習 | |
| 第6星期 | JS if else 答案 | 答案 | |
| 第7星期 | JS While | ||
| 第7星期 | JS For Loop | ||
| 第7星期 | JS For Loop 練習 | 練習 | |
| 第7星期 | JS For Loop 答案 | 答案 | |
| 第7星期 | JS Array | ||
| 第7星期 | JS Array練習 | 練習 | |
| 第7星期 | JS Array答案 | 答案 | |
| 第7星期 | JS Object | ||
| 第7星期 | JS Object 練習 | 練習 | |
| 第7星期 | JS Object 答案 | 答案 | |
| 第7星期 | JS Callback Function | ||
| 第7星期 | JS Redirection | ||
| 第7星期 | JS String | ||
| 第7星期 | JS Debug ( Console Log ) | ||
| jQuery | |||
| 第8星期 | jQuery基本 | ||
| 第8星期 | jQuery練習 | 練習 | |
| 第8星期 | jQuery答案1 | 答案 | |
| 第8星期 | jQuery答案2 ( 使用class ) | 答案 | |
| 第8星期 | jQuery Plugins | ||
| 第8星期 | jQuery Plugins實戰 ( ko-party.com ) | 實戰 | |
| Server (Bonus課堂) | |||
| 第8星期 | Domain + Email進階設定 | ||
| 第8星期 | 安裝及使用Vesta ( 安裝Vesta到Google Cloud ) | ||
| 第8星期 | 補充：Linode上安裝Vesta | ||
| 第8星期 | 使用FTP連入Server | ||
| 第8星期 | 手動安裝Wordpress | ||
| 第8星期 | 安裝SSL（Part 1） ( 使用Let's Encrypt ) | ||
| 第8星期 | 安裝SSL（Part 2） ( Redirect到https（Wordpress） ) | ||
| 第8星期 | 補充：WP Backup/轉Server/轉Domain ( Wordpress Backup/轉Server/轉Domain ) | ||
| PHP | |||
| 第9星期 | PHP Setup | ||
| 第9星期 | PHP 變數 | ||
| 第9星期 | PHP 變數練習 | 練習 | |
| 第9星期 | PHP 變數答案 | 答案 | |
| 第9星期 | PHP Function | ||
| 第9星期 | PHP Functions 練習 | 練習 | |
| 第9星期 | PHP Function 答案 | 答案 | |
| 第9星期 | PHP if else | ||
| 第9星期 | PHP if else 練習 | 練習 | |
| 第9星期 | PHP if else 答案 | 答案 | |
| 第9星期 | PHP for | ||
| 第9星期 | PHP For 練習 | 練習 | |
| 第9星期 | PHP for 答案 | 答案 | |
| 第10星期 | PHP Array | ||
| 第10星期 | PHP Array練習 | 練習 | |
| 第10星期 | PHP Array答案 | 答案 | |
| 第10星期 | PHP Object | ||
| 第10星期 | PHP Object 練習 | 練習 | |
| 第10星期 | PHP Object 答案 | 答案 | |
| Form Submission | |||
| 第10星期 | Form Submission基本 | ||
| Database | |||
| 第10星期 | MYSQL基本 | ||
| 第10星期 | Reset WP 用戶密碼 | ||
| WORDPRESS開發 | |||
| 第11星期 | WP主題開發 - 基本 | 實戰 | |
| 第11星期 | WP主題開發 - 練習 | 練習 | |
| 第11星期 | WP主題開發 - 答案 | 答案 | |
| 第12星期 | Blog Post | 實戰 | |
| 第12星期 | Custom Post Type | 實戰 | |
| 第12星期 | WP Form Submission | 實戰 | |
| 第12星期 | AJAX FORM | 實戰 | |
| 第12星期 | 自動轉Titile Tag | 實戰 | |
| 第12星期 | 進入「階段三」前 ( 建立你的Project ) | ||
| 商業(BONUS課堂) | |||
|---|---|---|---|
| 如何開展網頁設計的職業生涯 | |||
| Freelance Project的種類 ( 接Freelance ) | |||
| 如何找客戶 ( 接Freelance ) | |||
| Proposal, Sales, Contract, Invoice Template ( 接Freelance ) | |||
| 定價 ( 接Freelance ) | |||
| 項目流程 ( 接Freelance ) | |||
| 心得分享 ( 接Freelance ) | |||
| 找工作 ( 找工作 ) | |||
| 建立你的平台 ( 建立你的平台 ) | |||
| 網上創業示範 ( 建立一家活動公司 ) | |||
| Animation | |||
| CSS Transition | |||
| 4種常見的Animation | |||
| CSS Animation | |||
| Background Kenburn Effect | |||
| Loading Animation | |||
| CSS Animation練習 | 練習 | ||
| CSS Animation答案 | 答案 | ||
| GSAP - Opening Animation | |||
| GSAP - Click Animation | |||
| GSAP 練習 | 練習 | ||
| GSAP 答案 | 答案 | ||
| Advanced Javascript | |||
| ES6 javascript 介紹 ( JS Framework, Headless CMS ) | |||
| let/const | |||
| Arrow Function | |||
| Arrow Function練習 | 練習 | ||
| Arrow Function答案 | 答案 | ||
| export/import | |||
| 進階Array用法 ( Map，Filter ) | |||
| Array練習 | 練習 | ||
| Array答案 | 答案 | ||
| Command Line | |||
| 基本Command Line | |||
| Advanced Javascript (Part 2) | |||
| Spread Operator | |||
| Destructuring | |||
| NodeJS 基本 | |||
| Nodejs簡介 | |||
| Nodejs 安裝 | |||
| 第一個Nodejs Program | |||
| Modules | |||
| NPM Package Manager | |||
| Semantic Versioning | |||
| 安裝特定版本Package/Uninstall | |||
| Nodemon | |||
| Environmental Variable | |||
| Nodejs Express基本 | |||
| 基本API 概念重溫 - API？CRUD？Restful API? | |||
| 第1個Express Program | |||
| 使用Postman模擬API Call | |||
| Restful API: Get All | |||
| Restful API: Get Single | |||
| Request (Query) | |||
| Restful API: Create | |||
| Restful API: Update Single | |||
| Restful API: Delete Single | |||
| Express練習 | 練習 | ||
| Express練習 - 答案 | 答案 | ||
| Middleware | |||
| 放租平台 後台開發 (Nodejs + Express + MongoDB) | |||
| 放租平台 後台開發 簡介 | |||
| MongoDB 安裝 - Mac / Window | |||
| MongoDB Compass 安裝 | |||
| MongoDB Compass 操作 | |||
| 放租平台 後台 簡介 | |||
| 後台結構：Model | 實戰 | ||
| 後台結構：Controller, Route | 實戰 | ||
| Restful API: CreatePost | 實戰 | ||
| Async（非同步） Javascript | |||
| Restful API: getPosts | 實戰 | ||
| Restful API: GetPost | 實戰 | ||
| Restful API: UpdatePost | 實戰 | ||
| Restful API: DeletePost | 實戰 | ||
| Restful API: 建立整個Property API | 實戰 | ||
| 建立Product API | 練習 | ||
| 建立Product API - 答案 | 答案 | ||
| 用戶管理系統 （Nodejs + Express + MongoDB） | |||
| 用戶管理系統 - 簡介 | |||
| 申請Email Server | |||
| 使用Email Server | 實戰 | ||
| 註冊 Register API | 實戰 | ||
| 確認電郵 Verify Email API | 實戰 | ||
| 登入 Login API | 實戰 | ||
| 忘記密碼 Forgot Password API | 實戰 | ||
| Protected Route - 基本Login | 實戰 | ||
| Protected Route - 特別Role | 實戰 | ||
| Vue 3 | |||
| Vue 3簡介 | |||
| VS Code Plugin - Volar | |||
| Reactive Data | |||
| v-if v-for v-html | |||
| Vuejs基本練習1 | 練習 | ||
| Vuejs基本練習1 - 答案 | 答案 | ||
| Attribute Binding | |||
| v-model | |||
| methods | |||
| computed | |||
| onMounted | |||
| Vue 基本練習2 | 練習 | ||
| Vue 基本練習2 - 答案 | 答案 | ||
| 總結 | |||
| Nuxt 3 - 放租平台Frontend | |||
| 安裝NuxtJS | 實戰 | ||
| Nuxt放上HTML | 實戰 | ||
| Components | 實戰 | ||
| Title Template | 實戰 | ||
| Nuxt 3基本頁面 - 練習 | 練習 | ||
| Nuxt 3基本頁面 - 答案 | 答案 | ||
| useFetch | 實戰 | ||
| FormatDate, RuntimeConfigs | 實戰 | ||
| Composables | 實戰 | ||
| Pagination 分頁 | 實戰 | ||
| 建立Property頁面 - 練習 | 練習 | ||
| 建立Property頁面 - 答案 | 答案 | ||
| Image Attribute Binding | 實戰 | ||
| Single Property頁 | 實戰 | ||
| 整理Menu | 實戰 | ||
| 用戶管理系統 (放租平台) - Nuxt 3 | |||
| 用戶管理系統 Nuxtjs 加上 HTML | 實戰 | ||
| Register 註冊頁 | 實戰 | ||
| Verify Email 確定電郵頁 | 實戰 | ||
| Login 登入頁 | 實戰 | ||
| 儲存JWT到 state (useState) | 實戰 | ||
| Forgot Password 忘記密碼頁 | 實戰 | ||
| Reset Password 重設密碼頁 | 實戰 | ||
| Middleware 保護 | 實戰 | ||
| 用JWT授權API | 實戰 | ||
| Github 版本控制 Version Control | |||
| Github 註冊及安裝 | |||
| 設立Personal Access Token | |||
| 開展新Github Project | |||
| 更新Github Project (Push) | |||
| Git Pull | |||
| Live Server (Nuxtjs, Nodejs, MongoDB) | |||
| 基本Server - 前期設置 - 放租平台Go Live | |||
| 安裝 Nginx, nodejs, npm, git, pm2 | |||
| Push Backend 源碼到 Github | |||
| MongoDB 設置 | |||
| Push Frontend Code去Github | |||
| Live Backend - HTTP | |||
| Live Backend - SSL | |||
| Live Frontend - HTTP | |||
| Live Frontend - SSL | |||
| 日常更新操作 | |||
| 進階課題 - 放租平台 | |||
| 用戶建立Property - 基本介面 | 實戰 | ||
| 用戶建立Property - API & Frontend - 利用AI協助開發 | 實戰 | ||
| 用戶 - 我的Property - 利用AI協助開發 | 實戰 | ||
| 用戶 - 更新我的Property - 利用AI協助開發 | 實戰 | ||
| 使用Cookies 代替localStorage - 避免XSS攻擊 | 實戰 | ||
| 使用Slug | 實戰 | ||
| 相片上傳功能 （Amazon S3） - 前期設置 | 實戰 | ||
| 相片上傳功能 （Amazon S3） - 實戰 | 實戰 | ||
| 信用卡收錢功能 （Stripe） - Create Session | 實戰 | ||
| 信用卡收錢功能 （Stripe） - webhook | 實戰 | ||