自動播放
自動完成
上一堂課程
完成並繼續課程
1713908
【公益程式體驗營】擺脫動亂學前端， 掌握技能保平安
直播錄影
開學典禮 (71:30)
第一週 - 打造最強前端開發環境 (121:33)
第二週 - FLEXBOX 多欄式排版全攻略 (117:43)
第三週 - RWD 一點都不難，手把手打造手機版網頁 (131:00)
第四週 - jQuery 增添介面使用者互動揪甘心 (126:08)
第五週 - 網站上線全攻略 (154:05)
CSS - VS Code 網頁編輯器、HTML 基礎教學
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:27)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
HTML 標籤教學 - 小節作業 (3:55)
CSS - CSS常用語法
HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:43)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
小節練習 - 使用 CSS 優化網頁 (2:50)
補充章節：CSS 權重 (15:48)
CSS - 使用 CSS 變更 HTML 標籤特性
網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:11)
小節練習 (3:04)
CSS - Flex 網頁排版技巧
Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
flex-direction - 決定 flex 軸線 (6:16)
justify-content - 決定主軸對齊方式 (11:45)
設計一個 Flex 並排選單吧！ (8:10)
flex-wrap - 決定換行屬性 (4:29)
align-items - 交錯軸對齊方式 (7:07)
透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
Flex 練習前置作業 (9:26)
Flex 小節作業 (16:50)
CSS - Flex 精神時光屋
Flex 裡頭還可以包 Flex - 圖解教學 (9:46)
Flex 裡頭還可以包 Flex - 程式碼開發 (13:34)
Flex column 運用 (7:42)
相對定位與絕對定位技巧
相對定位與絕對定位技巧 (17:25)
切版任務作業一
切版任務作業一 - 產品列表排版
jQuery - 2 小時基礎教學
jQuery - 2 小時基礎教學
RWD - 伸縮自如的 RWD 排版術
伸縮自如的 RWD 排版術(上)
伸縮自如的 RWD 排版術(下)
SCSS - 環境建立、基礎語法教學
何謂 Sass？ (3:28)
Sass 與 CSS 的不同之處 (7:11)
SCSS 與 Sass 格式差異 (3:32)
SCSS 格式教學 (7:15)
Sass 格式教學 (7:14)
Sass 編譯方式 (5:22)
prepros 教學 (5:22)
VS CODE 編譯 Sass 教學 (5:58)
& 連結詞教學 (2:57)
Sass、SCSS 小試身手
SCSS - Sass 變數常用語法一鍵設定
為什麼要學變數？ (3:53)
變數教學 (5:20)
常見變數編譯錯誤 - 讓你不害怕各種錯誤訊息 (3:52)
變數搭配加減乘除好方便 (2:43)
字串管理，將常見字串統一整合的小技巧 (2:22)
調出想要的顏色，藉由 darken、lighten 顏色功能就能輕鬆達到 (2:57)
從基礎到進階的變數管理技巧 (7:08)
SCSS - import 切版檔案好工具，維護管理更方便
import - 要將 Sass 學得淋漓盡致，你不能不會 import (3:19)
import + 變數雙向管理 (3:52)
主要 CSS 拆開管理 (3:17)
常見問題解析 (3:08)
CSS Reset - 你知道 meyerweb 與 Normalize 的差異嗎？ (5:58)
整合 Reset 流程 (4:46)
import 總結 (3:24)
SCSS - Sass/CSS 設計模式 - 教您最實用的網頁收納術
Sass/CSS 模組化簡介 - 打破你對設計模式的無限想像 (7:16)
SMACSS - 最好入門的設計模式介紹 (2:20)
SMACSS - 教您用 Base 打好地基 (上) (4:44)
SMACSS - 教您用 Base 打好地基 (中) (4:24)
SMACSS - 教您用 Base 打好地基 (下) (4:55)
SMACSS - Layout 佈局管理 (上) (3:36)
SMACSS - Layout 佈局管理 (下) (8:05)
為何 CSS/Sass 需要模組化？ (3:48)
SMACSS - 模組化核心語法 (8:49)
SMACSS - 元件觀念講解 (3:15)
SMACSS - 載入按鈕模組流程 (3:51)
SMACSS - HTML 標籤優化 (3:20)
OOCSS - 讓結構更加乾淨 (5:18)
OOCSS - 容器與內容分離 (5:13)
OOCSS - 容器與內容分離 - 以格線系統設計為例 (5:51)
OOCSS - 樣式與結構分離 (6:44)
設計模式小試身手 (2:39)
Bootstrap5
Bootstrap5 - 環境建立(上)
Bootstrap5 - 環境建立(下)
Bootstrap5 - 格線系統+元件整合(上)
Bootstrap5 - 格線系統+元件整合(下)
Bootstrap5 - 元件與常用 JS 效果介紹(上)
Bootstrap5 - 元件與常用 JS 效果介紹(下)
Bootstrap5 - SCSS 客製化(上)
Bootstrap5 - SCSS 客製化(下)
JS - JavaScript 課前知識與環境介紹
安裝 Chrome 網頁瀏覽器 (3:01)
安裝 VSCode 程式編輯器 (6:55)
JS - 變數與資料型別
變數大綱簡介 (6:40)
透過 Chrome 開發人員工具來寫 JavaScript (4:57)
如何宣告變數 (6:06)
設定變數，如同在 excel 設定欄位般容易！ (6:06)
number 型別 - 讓您擁有簡易計算機功能 (5:43)
number 型別 - 各種數字的支援程度大解密 (2:20)
number 型別 - 變數如何帶變數 (6:27)
變數與資料型別 (8:12)
JS - let、const、var 介紹
let 變數詳細介紹 (3:56)
const 詳細介紹 (6:56)
var 歷史的眼淚詳細介紹 (3:04)
宣告變數一次讓你知！ (6:24)
JS - 網頁與 Code 環境建立流程教學
VSCode 撰寫 JS 環境建立 (8:23)
console.log 印出你想顯示的資訊！ (3:47)
如何撰寫優雅的註解 (5:22)
Codepen - 透過它來提交您的程式碼 (6:24)
JS - 數字型別與賦值運算子
賦值運算子+=、-= (5:56)
a++、a-- 一次搞懂！ (3:45)
JS - 字串型別詳解
宣告字串流程 (3:42)
一次搞懂字串相加 (5:34)
透過 typeof 瞭解當前變數型別 (2:39)
數字與字串相加 (5:21)
NaN 產生時機 (5:20)
字串處理實用方法 (5:04)
變數記憶體指向講解 (7:26)
樣版字面值教學 (4:54)
JS - 變數：布林、undefined、null
布林介紹 (5:01)
undefined 介紹 (3:54)
null 介紹 (5:10)
字串轉數字方法 (5:34)
數字轉字串方法 (3:57)
JS - 比較與邏輯運算子
比較與邏輯運算子簡介 (2:31)
比較運算子： >、=、<= (5:45)
比較運算子搭配變數方法 (5:54)
=、== 差異講解 (2:46)
==、=== 差異講解 (4:23)
邏輯運算子介紹 (5:11)
邏輯運算子範例情境 (5:01)
邏輯運算子增加多條件作法 (2:53)
JS - 流程判斷 - if、else if、else
為什麼要理解流程判斷？ (7:53)
if、else、else if 講解 (7:12)
if 詳細講解 (一) (5:56)
if 詳細講解 (二) (10:29)
JS - if 流程圖規劃流程
if 圖表介紹 (4:43)
圖表服務註冊流程 (2:08)
流程圖符號簡介 (1:48)
流程圖 let code 講解 (12:44)
流程圖 if code 講解 (15:26)
JS - if 中階運用
if 包 if 腰圍判斷流程圖設計 (10:10)
if 包 if 腰圍判斷 Code 設計 (13:24)
看圖說故事 - if 練習一 (4:34)
看圖說故事 - if、else if 練習二 (1:51)
看圖說故事 - if、else if 練習三 (9:59)
JS - 陣列教學
為什麼要學陣列物件？ (4:04)
筆刷工具介紹 (1:01)
陣列寫法教學 (4:29)
陣列不只能放字串，也能放數字與混合資料 (4:02)
陣列讀取教學 (3:25)
讀取陣列資料，並賦予新變數流程 (4:21)
length 讀取陣列長度流程 (2:13)
陣列預設寫入資料 (5:18)
push 寫入資料流程 (4:18)
unshift 寫入資料流程 (2:10)
pop 與 shift 刪除資料 (3:21)
splice 刪除指定資料 (4:56)
其他陣列總結 (1:08)
JS - 物件教學
為什麼要有物件 (1:21)
物件格式教學 (6:58)
如何讀取物件的值 (5:47)
新增物件屬性 (3:14)
修改物件值 (3:36)
刪除物件資料 (2:13)
另一種讀取物件屬性方法 (2:11)
物件讀取資料判斷時間 (2:36)
JS - 陣列與物件整合運用
陣列與物件混合應用 (5:57)
一次搞懂陣列與物件混合讀取教學 (6:45)
JSON 格式介紹 (2:29)
安裝 JSON 檢視 Chrome 套件 (2:03)
下載 JSON 格式資料 (7:12)
JSON 讀取方式教學 - 以充電站為例 (5:25)
物件裡面還能包物件 (4:02)
物件包物件讀取流程 - 以活動公告 open data 為例 (10:03)
如何篩選出自己想要的資料格式，並賦予到特定變數上 (3:53)
小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？ (6:29)
物件搭配 if 練習 (4:29)
陣列物件搭配 if 流程判斷練習 (5:02)
JS - 函式 function
為什麼需要學函式？ (1:48)
函式寫法教學 (4:32)
註冊多組函式流程 (4:23)
函式裡面仍可以執行函式 (4:47)
函式參數介紹 (5:24)
參數寫法-參數只存活在大括號 (2:31)
參數寫法-兩個數字相加工具 (3:25)
輸入跟輸出的重要性 (3:09)
return 寫法教學 (6:47)
return 宣告 let (2:40)
return 可以有多個 (2:26)
return 可以有多個-範例Code (5:11)
判斷是否為偶數 - 畫流程圖 (6:45)
判斷是否為偶數-寫Code流程(上) (12:19)
let 全域與區域變數邏輯 (4:13)
判斷是否為偶數-寫Code流程(下) (3:59)
JS 補充資源 - 迴圈
為什麼需要學習迴圈？ (3:59)
for 寫法 (9:09)
for-array 寫法 (8:52)
for if 寫法 (6:42)
for - i++ 寫法 (3:12)
for - 加總 (5:15)
for 與 break 運用 (8:59)
JSON 格式介紹 (3:16)
JSON VIEW chrome 插件 (4:25)
擷取 JSON 格式流程 (4:56)
for - opendata 範例 (上) (5:55)
OPEN DATA 範例 (下) (12:01)
Flex 精神時光屋
Flex 裡頭還可以包 Flex - 圖解教學 (9:46)
Flex 裡頭還可以包 Flex - 程式碼開發 (13:34)
Flex column 運用 (7:42)
Markman 章節補充
Markman 軟體教學 (4:23)
Flex 修煉時光屋 (39:33)
Flex 修煉時光屋圖片
Flex 修煉時光屋自我檢核
切版任務作業二 - chatTalker AI 機器人
切舨任務作業二 - chatTalker AI 機器人
延伸後端知識：Node.js + Express Web 應用程式教學
線上講義
環境建置 (12:04)
開啟 web 伺服器 (17:10)
將網站部署到 Heroku 主機 (4:12)
NPM 套件管理教學 (5:28)
Express Web 框架環境建立 (12:32)
常見網址、路徑、參數介紹 (13:59)
學員練習 - YouTube 路由設定 (6:06)
學員練習 - IT鐵人邦 (6:17)
常見 QA (8:57)
延伸後端知識：如何判斷後端工程師用得是 Server Side Render 還是 Client Side Render
如何判斷後端工程師用得是 Server Side Render 還是 Client Side Render (81:04)
團戰加碼任務(6/12 任務未達 1000 份將下架)
團戰任務規則
5/25- 洧杰加碼直播 - 切版任務二背景圖案與絕對定位教學
6/1 - 洧杰加碼直播 - 切版任務二版型講解
6/8 - 結業典禮 & 如何分配時間，逐步成為軟體工程師？
ES6, 7, 8, 9, 10, 11 中，用一次就上癮的語法 (82:56)
程式編輯器演化史 (80:32)
GitHub Pages 免費架站空間教學
架設網站神器簡介 - GitHub Desktop (2:52)
註冊 GitHub 服務 (4:21)
部署網站(Mac 版)：GitHub Desktop 部署網站流程 (17:59)
部署網站(Windows 版)：GitHub Desktop 部署網站流程 (14:36)
Mac、Win：如何更新網站、再新增一個網站空間 (10:28)
團戰加碼原創課程 - 雅佳蜜美容網站上架流程(6/12 任務未達 1000 份將下架)
前言介紹
網址介紹 - 我可以買哪種類型的網址？ (6:18)
註冊 Godaddy 跟 cloudflare 服務 (3:01)
確認網站文案 (3:01)
購買網址流程 (3:46)
cloudflare託管網址流程 (8:31)
GitHub Pages 新增網站空間流程 (6:52)
指向網址到 GitHub Pages (10:18)
新增多個網站流程 (8:19)
5/25- 洧杰加碼直播 - 切版任務二背景圖案與絕對定位教學(6/12 任務未達 1000 份將下架)
calc 單位介紹 (5:46)
backgound-image 背景語法介紹 (3:18)
background-position 語法 (4:46)
background-size 使用時機 (3:18)
background 多重背景設計 (6:55)
首頁圓球處理方案一：背景圖案處理 (16:03)
首頁圓球處理方案二：相對絕對定位處理圓球 (18:18)
學生作業講解 (20:16)
作業合格規範講解 (8:21)
背景圖案原始檔
一鏡到底直播錄影 (100:40)
6/1 洧杰加碼直播 - 切版任務二 - 攻略影片(6/12 任務未達 1000 份將下架)
切版任務二 - 攻略影片(90分鐘) (77:59)
6/6 加碼 Swiper 輪播動畫效果(6/12 任務未達 1000 份將下架)
Swiper - 輪播效果 (上) (11:05)
Swiper - 輪播效果 (上)-課程補充
Swiper - 輪播效果 (中) (13:24)
Swiper - 輪播效果 (下) (3:22)
Swiper - 補充備註 (1:57)
切版任務二 - 輪播助教攻略 - @Izumi 泉 助教設計
6/9 加碼 結業典禮 & 如何分配時間，逐步成為軟體工程師？(6/12 任務未達 1000 份將下架)
結業典禮 & 如何分配時間，逐步成為軟體工程師？ (111:33)
6/1 - 洧杰加碼直播 - 切版任務二版型講解
本課程將於 6/1(三) 12:15~13:15 提供加碼直播，並於隔天將直播錄影上傳
當天授課請前往
ZOOM 直播室
完成並繼續課程