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 |