Masterclass課程大綱

這是一套系統性,完整的網頁開發課程。讓你可以在短時間內,轉行加入科技界,自己接Freelance,或建立自己喜愛的平台!

基本概念
第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

第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答案 答案
Vuejs
Vuejs介紹
data()
Directive ( v-for, v-html, v-if )
練習 ( 顯示樓盤 ) 練習
答案 ( 顯示樓盤 ) 答案
v-bind
v-model ( 2 way Binding )
methods
Computed
練習 ( 新增數盤 ) 練習
練習 ( Filter樓盤1 ) 練習
練習 ( Filter樓盤2 ) 練習
Component
Props基本
Props傳Array/Object
Vuejs LifeCycle
Command Line
基本Command Line
NUXTJS
NuxtJS Basic
NuxtJS - Integrate HTML ( 建立threezero放租平台 ) 實戰
練習答案 ( 建立threezero放租平台 ) 答案
nuxt link與a ( 建立threezero放租平台 ) 實戰
優化NUXTJS
刪JS/ Bootstrap Vue ( 建立threezero放租平台 ) 實戰
Page Transistion ( 建立threezero放租平台 ) 實戰
Title Tag ( 建立threezero放租平台 ) 實戰
Strapi + Nodejs
Strapi Setup ( 安裝Nodejs + MongoDB ) 實戰
建立基本API Call ( Strapi 基本 ) 實戰
AXIOS
Async/await ( 使用Axios建立API Call ) 實戰
Single Post ( Endpoints/ Markdown Editor ) 實戰
Axios練習 練習
答案 答案
放租平台 - 基本功能
Pagination 實戰
Title, 租盤Filtering功能 實戰
租盤排序功能 實戰
Show More功能 實戰
Advanced Javascript (Part 2)
Spread Operator
Destructuring
Vuex
states
getters
mutations ( Commit mutations )
actions ( dispatch actions )
mapMutations ( map helper )
建立用戶管理系統
基本頁面 ( 用戶管理系統 ) 實戰
JWT/ Restful API 實戰
登入/登出功能 實戰
用戶註冊 實戰
用戶註冊 - 電郵確定 實戰
優化Form Submission 實戰
Custom Email Server 實戰
忘記密碼 實戰
放租平台 - 進階功能
middleware 實戰
用戶新增樓盤 ( Authorized API ) 實戰
用戶更改/刪除樓盤 ( PUT, DELETE ) 實戰
我的樓盤 實戰
Creator is owner policy ( Extend Controllers ) 實戰
自動send Email通知 實戰
建立slug system ( Extend Models ) 實戰
用戶更新自己資料 ( 我的帳號 ) 實戰
最後整理 實戰
建立Ecommerce系統
使用stripe收款
建立完整Ecommerce ( 產品,購物車,結帳 ) 實戰
Server(JAM Stack)
Deploy Nuxt及Strapi 實戰
SSL 實戰
Backup MongoDB