(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

• 1_課程介紹

• 1美元伺服器

• 網絡與伺服器

• 2_本課程需要用到的工具

• 課程使用工具替代方案

• 創建第一個網頁HelloWorld

• 如何上傳網頁到伺服器

• 如何解決Cyberduck沒有Atom選項

• 如何解決FileZilla無法默認使用VSCode打開

• HTML簡介

• 網頁結構

• 標題與段落標簽

• 文字標籤

• 超鏈接

• Funny Question 1: 絕對路徑與相對路徑

• 如何在網頁放入圖片

• 列表

• 表格Table(1)

• 表格Table(2)

• 表單Form(1)

• 表單Form(2)

• 表單Form(3)

• 表單Form(4)

• 字符實體HTML Entity

• 實作1: 製作第一個網站_主頁框架

• 實作1: 製作第一個網站_網頁腳製作

• 實作1: 製作第一個網站_無意義元素

• 實作1: 製作第一個網站_製作簡介頁面

• 實作1: 製作第一個網站_製作表格頁面

• 實作1: 製作第一個網站_製作課程目錄

• HTML總結

• CSS簡介

• 行內CSS Inline CSS

• 內部CSS Internal CSS

• 外部CSS External CSS

• Class 選擇器 Class Selector

• ID 選擇器 ID Selector

• Funny Question 2: Selector CSS優先級

• Funny Question 3: Inline Internal External CSS優先級

• Combine Selectors合併選擇器

• Pseudo Class 虛擬類別

• Pseudo Class 虛擬元素

• Attribute selector 屬性選擇器

• Box model 盒子模型

• CSS 單位 ：Pixel Percent Vw Vh

• CSS 單位 ： Rem Em Percent

• Flexbox彈性盒子模型_橫向佈局

• Flexbox彈性盒子模型_縱向佈局及其他屬性

• Grid網格佈局模型_columns&rows

• Grid網格佈局模型_areas&span

• 小挑戰一：Flex和Grid的應用

• 第1題

• 小挑戰一解決_第1題

• 小挑戰一解決_第2題

• 小挑戰一解決_第3-4題

• Position位置屬性

• Font字體設定&如何導入GoogleFont

• Calc()數值運算

• 如何編寫代碼比別人快2倍

• 如何在VSCode中使用Emmet

• 實作2_克隆Youtube網站首頁

• 實作2: 克隆Youtube_網頁框架

• 實作2: 克隆Youtube_Flex與Grid應用

• 實作2: 克隆Youtube_搜索欄目合併輸入框與按鈕

• 實作2: 克隆Youtube_Sidebar HTML結構製作

• 實作2: 克隆Youtube_製作按鈕效果

• 實作2: 克隆Youtube_單一視頻模板製作

• 實作2: 克隆Youtube_Flex模型嵌套

• 實作2: 克隆Youtube_content屬性

• 實作2: 克隆Youtube_auto-fill columns

• 實作2: 克隆Youtube_video section title製作(項目完結)

• Auto-fill與Auto-fit的關係和區別

• Media Query 媒體查詢

• Transition 轉場效果

• Animation CSS動畫效果

• CSS Variables 變數

• 內在首選寬度(max-content) 與 內在最小寬度(min-content)

• 疊放順序問題

• Overflow溢出

• 實作3：實作介紹

• 實作3: 側邊欄動畫效果_標題欄的製作

• 實作3：側邊欄動畫效果_側邊欄框架動畫

• 實作3: 側邊欄動畫效果_側邊欄內部元素外觀設定

• 實作3：側邊欄動畫效果_修正及添加激活樣式

• 實作3：側邊欄動畫效果_MediaQuery製作

• Gradient 漸變效果

• 實作4：地球軌道動畫效果_項目介紹

• 實作4：地球軌道動畫效果_添加宇宙星空太陽

• 實作4：地球軌道動畫效果_添加地球軌跡_月亮軌跡_地球與月亮

• 實作4：地球軌道動畫效果_添加動畫效果

• 實作4：地球軌道動畫效果_項目優化

• 小挑戰二_克隆eBay首頁介紹

• 小挑戰二_克隆eBay_左右header固定外觀設定

• 小挑戰二_克隆eBay_header media query設定

• 小挑戰二_克隆eBay_Search Bar三級容器設定

• 小挑戰二_克隆eBay_輸入框重構

• 小挑戰二_克隆eBay_Select Tag重新構造

• 小挑戰二_克隆eBay_導航欄選項外觀設定

• 小挑戰二_克隆eBay_固定間距與可調整邊距

• 小挑戰二_克隆eBay_控制範圍放大圖片

• 小挑戰二_克隆eBay_Collection部分

• 小挑戰二_克隆eBay_其他元素響應Hover

• 小挑戰二_克隆eBay_設定半徑可變的圓

• 小挑戰二_克隆eBay_設定7環佈局動畫

• 小挑戰三_動畫Sign in form製作簡介

• 小挑戰三_動畫Sign in form製作

• SCSS簡介與環境設定

• VSCode設定支援Scss文檔

• SCSS變數使用

• SCSS嵌套Nesting

• SCSS導入@import

• SCSS重複使用屬性@mixin

• SCSS繼承@extend

• 實作5_克隆AirPods網頁簡介

• 實作5_克隆AirPods網頁_導航欄製作

• 實作5_克隆AirPods網頁_Home部分製作

• 實作5_克隆AirPods網頁_details部分製作

• 什麼是JavaScript

• 什麼是內部Javascript

• JavaScript如何訪問網頁元素

• DOM的屬性以及方法

• 小挑戰四_用JS聯動按鈕與文字

• 小挑戰五_如何修改元素的CSS樣式

• 變數

• 數組及其運用

• 條件判斷語句

• 小挑戰六_猜個隨機數

• JS循環語句

• break 和 continue

• HTML作圖

• Function

• Object

• getComputedStyle vs Style

• 固定範圍取隨機數

• 小挑戰七_考反應遊戲_HTML與外觀

• 小挑戰七_考反應遊戲_JS部分思路(1)

• 小挑戰七_考反應遊戲_JS部分思路(2)

• 小挑戰七_考反應遊戲_面向對象編程改造

• 使用Var定義變數會出現的問題已經解決

• 作用域 Scope

• Const常變數

• Event 觸發事件

• 箭頭Function

• Class類

• This 呼叫者

• Static method 靜態方法

• 繼承 extends & super

• 對象 & 數組的For loop處理

• Polymorphism 多型

• 小挑戰八_如何將Class綁定網頁Element

• 小挑戰九_追蹤滑鼠軌跡簡介

• 小挑戰九_追蹤滑鼠軌跡 HTML&SCSS部分

• 小挑戰九_追蹤滑鼠軌跡 addEventListener傳遞數據

• 小挑戰九_追蹤滑鼠軌跡requestAnimationFrame與setInterval的區別

• 小挑戰九_追蹤滑鼠軌跡 function與Object的協作

• 小挑戰九_追蹤滑鼠軌跡 Object屬性初始化及迴力鏢效應製作思路

• 小挑戰九_追蹤滑鼠軌跡 光環效果製作思路

• 小挑戰九_追蹤滑鼠軌跡 function轉method

• Bind的作用

• getBoundingClientRect

• querySelector

• Object destructuring 物件解構賦值

• Call & apply方法

• 擴展語法&數組

• 擴展語法&對象

• 實作5_克隆Tesla網站_目標畫重點

• 實作5_克隆Tesla網站_導航欄HTML

• 實作5_克隆Tesla網站_導航欄SCSS編寫

• 實作5_克隆Tesla網站_Media Query如何使用SCSS變數

• 實作5_克隆Tesla網站_多session設定

• 實作5_克隆Tesla網站_標題位置設定

• 實作5_克隆Tesla網站_按鈕適應多種設備寬度設定

• 實作5_克隆Tesla網站_滾動定位效果

• 實作5_克隆Tesla網站_Intersection Observer

• 實作5_克隆Tesla網站_Intersection Observer修改元素內容

• 實作5_克隆Tesla網站_滾動漸顯&漸隱效果

• 125_jQuery開篇

• 126_集成jQuery

• 127_使用jQuery發現用戶點擊

• 128_使用jQuery改變網站內容

• 129_使用jQuery改變CSS樣式

• 130_使用jQueryFade網頁元素

• 131_使用jQuery使元素動畫化

• 132_使用AJAX加載網站數據(1)

• 133_使用AJAX加載網站數據(2)

• 134_正則表達式RegularExpression

• 135_第七個網頁_驗證表單_HTML部分(1)

• 136_第七個網頁_驗證表單_HTML部分(2)

• 137_第七個網頁_驗證表單_CSS部分(1)

• 138_第七個網頁_驗證表單_CSS部分(2)

• 139_第七個網頁_驗證表單_jQuery表單輸入內容(1)

• 140_第七個網頁_驗證表單_jQuery表單輸入內容(2)

• 141_第七個網頁_驗證表單_jQuery表單輸入內容(3)

• 142_jQuery總結

• 143_jQuery UI開篇

• 144_jQueryUI介紹

• 145_縮放功能

• 146_放入功能

• 147_分頁與排序功能

• 148_第八個網頁_代碼播放器-Menu(1)

• 149_第八個網頁_代碼播放器-Menu(2)

• 150_第八個網頁_代碼播放器-動畫按鈕製作(1)

• 151_第八個網頁_代碼播放器-動畫按鈕製作(2)

• 152_第八個網頁_代碼播放器-Accordion HTML部分

• 153_第八個網頁_代碼播放器-Accordion CSS部分(1)

• 154_第八個網頁_代碼播放器-Accordion CSS部分(2)

• 155_第八個網頁_代碼播放器-如何收起Accordion(1)

• 156_第八個網頁_代碼播放器-如何收起Accordion(2)

• 157_第八個網頁_代碼播放器-設置被選項容器寬度(1)

• 158_第八個網頁_代碼播放器-設置被選項容器寬度(2)

• 159_第八個網頁_代碼播放器-添加結果iframe(1)

• 160_第八個網頁_代碼播放器-添加結果iframe(2)

• 161_第八個網頁_代碼播放器-如何把代碼接入iframe裡面(1)

• 162_第八個網頁_代碼播放器-如何把代碼接入iframe裡面(2)

• 163_第八個網頁_代碼播放器-修復iframe高度BUG

• 164_jQueryUI總結

• 165_BS開篇

• 166_什麼是Bootstrap

• 167_Bootstrap的第一個應用

• 168_Grid系統(1)

• 169_Grid系統(2)

• 170_導航欄(1)

• 171_導航欄(2)

• 172_Bootstrap的表單(1)

• 173_Bootstrap的表單(2)

• 174_Bootstrap_carousel(1)

• 175_Bootstrap_carousel(2)

• 176_BootstrapModals組件

• 177_第九個網頁_導航欄(1)

• 178_第九個網頁_導航欄(2)

• 179_第九個網頁_大標題部分(1)

• 180_第九個網頁_大標題部分(2)

• 181_第九個網頁_軟體優點部分

• 182_第九個網頁_網頁腳部分

• 183_BS總結

• 184_WP開篇

• 185_WordPress簡介

• 186_如何在真實伺服器安裝WordPress

• 187_WordPress後台界面

• 188_創建一個論壇(1)

• 189_創建一個論壇(2)

• 190_創建一個網上商店(1)

• 191_創建一個網上商店(2)

• 192_WP總結

• 193_PHP開篇

• 194_什麼是PHP

• 195_編寫第一個PHP網頁

• 196_如何顯示PHP錯誤訊息

• 197_PHP變量(1)

• 198_PHP變量(2)

• 199_PHP 數組(1)

• 200_PHP 數組(2)

• 201_PHP If語句

• 202_PHP For語句和Foreach語句

• 203_PHP While循環

• 204_如何使用PHP發送郵件

• 205_$_GET變量(1)

• 206_$_GET變量(2)

• 207_$_POST變量(1)

• 208_$_POST變量(2)

• 209_第十個網頁_網站聯繫表單-如何使用AJAX傳遞數據到PHP文件(1)

• 210_第十個網頁_網站聯繫表單-如何使用AJAX傳遞數據到PHP文件(2)

• 211_第十個網頁_網站聯繫表單-如何在PHP驗證表單內容

• 212_第十個網頁_網站聯繫表單-高亮錯誤輸入內容(1)

• 213_第十個網頁_網站聯繫表單-高亮錯誤輸入內容(2)

• 214_第十個網頁_網站聯繫表單-使用伺服器發送郵件

• 215_第十一個網頁項目簡介

• 216_第十一個網頁項目_天氣預報網頁-HTML部分(1)

• 217_第十一個網頁項目_天氣預報網頁-HTML部分(2)

• 218_第十一個網頁項目_天氣預報網頁-CSS部分

• 219_第十一個網頁項目_天氣預報網頁-jQuery部分(1)

• 220_第十一個網頁項目_天氣預報網頁-jQuery部分(2)

• 221_第十一個網頁項目_天氣預報網頁-PHP部分(1)

• 222_第十一個網頁項目_天氣預報網頁-PHP部分(2)

• 223_第十一個網頁項目_天氣預報網頁-BUG修復

• 224_第十一個網頁項目_天氣預報網頁-什麼是JSON

• 225_第十一個網頁項目_天氣預報網頁-接入API(1)

• 226_第十一個網頁項目_天氣預報網頁-接入API(2)

• 227_PHP總結

• 228_MSQL開篇

• 229_如何創建mySQL數據庫(1)

• 230_如何創建mySQL數據庫(2)

• 231_如何連接mySQL數據庫

• 232_如何提取數據庫紀錄

• 233_如何添加及更新數據紀錄(1)

• 234_如何添加及更新數據紀錄(2)

• 235_如何在數據庫搜索紀錄(1)

• 236_如何在數據庫搜索紀錄(2)

• 237_解決查詢內容有特殊符號的狀況

• 238_SESSION變量

• 239_設定Cookies

• 如何在數據庫保存密碼更安全

• 第十一個網頁我的秘密日記(1)

• 第十一個網頁我的秘密日記(2)

• 第十一個網頁我的秘密日記(3)

• 第十一個網頁我的秘密日記(4)

• 第十一個網頁我的秘密日記(5)

• 第十一個網頁我的秘密日記(6)

• 第十一個網頁我的秘密日記(7)

• 第十二個網頁項目_登錄系統_網頁頭HTML(1)

• 第十二個網頁項目_登錄系統_網頁頭HTML(2)

• 第十二個網頁項目_登錄系統_主頁CSS部分(1)

• 第十二個網頁項目_登錄系統_主頁CSS部分(2)

• 第十二個網頁項目_登錄系統_主頁CSS部分(3)

• 第十二個網頁項目_登錄系統_註冊頁面製作

• 第十二個網頁項目_登錄系統_創建mySQL數據庫

• 第十二個網頁項目_登錄系統_連結mySQL數據庫

• 第十二個網頁項目_登錄系統_驗證用戶輸入(1)

• 第十二個網頁項目_登錄系統_驗證用戶輸入(2)

• 第十二個網頁項目_登錄系統_防止黑客破壞數據庫

• 第十二個網頁項目_登錄系統_添加紀錄到數據庫(1)

• 第十二個網頁項目_登錄系統_添加紀錄到數據庫(2)

• 第十二個網頁項目_登錄系統_驗證用戶登錄信息(1)

• 第十二個網頁項目_登錄系統_驗證用戶登錄信息(2)

• 第十二個網頁項目_登錄系統_多頁面傳遞數據

• 第十二個網頁項目_登錄系統_如何實現退出登錄功能

• 第十二個網頁項目_登錄系統_處理錯誤信息

• 第十三個網頁項目_雙Token重設密碼系統_重設密碼頁面

• 第十三個網頁項目_雙Token重設密碼系統_CSS部分

• 第十三個網頁項目_雙Token重設密碼系統_雙Token 設定

• 第十三個網頁項目_雙Token重設密碼系統_創建重設密碼數據庫表

• 第十三個網頁項目_雙Token重設密碼系統_刪除重複紀錄

• 第十三個網頁項目_雙Token重設密碼系統_插入用戶重設密碼紀錄

• 第十三個網頁項目_雙Token重設密碼系統_發送重設密碼郵件

• 第十三個網頁項目_雙Token重設密碼系統_創建重設密碼頁面(1)

• 第十三個網頁項目_雙Token重設密碼系統_創建重設密碼頁面(2)

• 第十三個網頁項目_雙Token重設密碼系統_驗證重設密碼頁面內容

• 第十三個網頁項目_雙Token重設密碼系統_根據Selector查找紀錄

• 第十三個網頁項目_雙Token重設密碼系統_核對Token

• 第十三個網頁項目_雙Token重設密碼系統_更新新密碼

• 第十三個網頁項目_雙Token重設密碼系統_響應GET變量回傳