Udemy線上課程 2023 網頁全端開發 講師:Wilson Ren 影音教學 中文發音 繁體中文版(5DVD)
超過75小時的重量級課程,包辦網頁前端到後端的必備知識,手把手帶你從頭開始學習寫程式。
課程內容包含基本語法、物件導向的程式架構、解決問題的邏輯思路、遇到問題狀況的處理、Debug技巧,建立扎實的程式開發必備知識。網頁開發分為前端與後端部分。網頁全端開發課程前半段著重HMTL, CSS, JavaScript三大網頁開發基石,透過實作四個專案、兩個遊戲來鞏固所學基礎。後半部分著重於後端開發工具,包含業界常見的MongoDB, Node.js等後端程式設計工具。課程最後會統整前端React框架與後端API連結系統,製作出網頁開發中非常熱門的MERN專案系統!
你不需要有任何的程式設計經驗,也不需要有相關的背景知識。此課程包含網頁前端與後端所需內容,帶你學會成為網頁全端工程師的必備技巧。
當課程結束時,你會有能力使用:
HTML5
CSS3
JavaScript
Flexbox and SCSS
ES6 語法
了解DOM, Hoisting, Scope, Closure, Prototype Inheritance, execution context, callbacks, this keyword等進階JS觀念與運用
Bootstrap
Unix Command, Git, and GitHub
Node.js
Express.js
EJS (Embedded JavaScript Templating)
Git, GitHub, Version Control
SQL
MongoDB
Mongoose
Restful API
Authentication
Cryptography
React
JSON Web Token (JWT)
MERN Project
Next.js
跟2022網頁全端攻略課程相比,這堂課程當中新增了:
六個全新的專案,包含兩個新遊戲(貪食蛇遊戲、彈跳球遊戲),充實更多作品及內容。
動態網頁的部屬教學,包含MongoDB Atlas的使用以及Heroku雲端。
所有課程皆有PowerPoint中文投影片,筆記更方便。
Next.js的教學。Next.js是業界最常用的React.js框架,於架設網站與搜尋引擎優化(Search Engine Optimization)上面有非常強勢的優點。
每個章節最後有測驗題目,可以快速做重點整理。
MVC模式的圖解分析與應用範例。
新增Blowfish演算法、Signed Cookies, HMAC, JWT簽名與驗證演算法、OAuth完整流程與安全驗證等等資訊安全流程詳細解說。
新增HTTP協議內容、Race Condition處理、Node.js Event Loop規則、Canvas-Nest網頁效果、CSS泡沫製作、GSAP動畫製作等等內容。
之後會視情況新增TypeScript等內容。
Quiz(wilson-full-stack-web-development).html
01 - Chapter 0 - 課程準備
001 如何最好的使用這堂課?.mp4
002 Notion, Debug技巧.mp4
003 (Windows系統) 下載vscode.mp4
004 (macOS 系統) 下載vscode.html
005 Extensions下載.mp4
006 Course Resource_ All of them.html
006-Web+PPTs.zip
02 - Chapter 1 - 網路基本原理
007 www, HTTP.mp4
008 伺服器與用戶端.mp4
009 DNS, 瀏覽器比較.mp4
010 W3C.mp4
03 - Chapter 2 - HTML
011 HTML簡介.mp4
012 第一個網頁製作.mp4
013 p, h1, h2標籤與html validator.mp4
013-2-3 故宮檔案.zip
014 物件導向 Object-Oriented.mp4
015 HTML Skeleton.mp4
016 HTML Skeleton 2.mp4
017 head標籤.mp4
018 h1-h6.mp4
019 anchor tag.mp4
020 img, 絕對路徑與相對路徑.mp4
021 ul, ol標籤.mp4
022 block and inline.mp4
023 基本表格製作.mp4
024 基本表單製作.mp4
025 GET, POST.mp4
026 checkbox、email、file.mp4
027 number, password.mp4
028 radio、range.mp4
029 button, selection, option, datalist, textarea.mp4
030 br, hr, comment.mp4
031 index.html, html entity.mp4
032 favicon.ico.mp4
032-2-22 favicon.ico
033 Final Code.html
033-2-23 html final code.zip
04 - Chapter 3 - CSS
034 CSS簡介.mp4
035 CSS放置位置.mp4
036 CSS顏色設定.mp4
037 Selectors 1.mp4
038 Selectors 2.mp4
039 Pseudo class, element.mp4
040 CSS重點概念.mp4
041 CSS 單位.mp4
042 font 設定1.mp4
043 font設定 2.mp4
044 背景設定.mp4
045 Box Model基本認識.mp4
046 Height設定與overflow屬性.mp4
047 content-box and border-box.mp4
048 border-box示範.mp4
049 inline-block.mp4
050 Position 1.mp4
051 Position 2.mp4
051-3-17 position.zip
052 Stacking Context, Cursor, Table.mp4
053 Transition.mp4
054 Transform.mp4
055 Animation.mp4
05 - Chapter 4.1 - 進階HTML, CSS
056 Semantic Elements.mp4
057 RWD 設計.mp4
058 flex direction, flex-wrap.mp4
059 justify-content, align-items.mp4
060 flex grow, shrink, basis.mp4
061 align-self.mp4
06 - Project 1 - 圍棋網站
062 資源包下載.html
062-p1-0.zip
063 圍棋網站簡介.mp4
064 導覽列製作.mp4
065 首頁文字與圖片.mp4
066 首頁樣式設定.mp4
067 韓國棋院製作.mp4
068 日本棋院製作.mp4
069 日本棋院樣式設定.mp4
070 canvas-nest套用.mp4
071 Final Code.html
071-project1 圍棋網站.zip
07 - Chapter 4.2 - 進階HTML, CSS
072 Media Query.mp4
073 Bootstrap.mp4
074 User Snippet.mp4
075 免費圖片.mp4
076 免費圖形與圖案.mp4
077 HTML Bookmark.mp4
078 Local Font設定.mp4
079 Sass.mp4
08 - Project 2 - 日本旅遊網站
080 資源包下載.html
080-p2-0資源包.zip
081 日本旅遊網站簡介.mp4
082 網站導覽列製作.mp4
083 圖片轉換功能.mp4
084 圓圈圖片效果.mp4
085 透明背景設定與Google地圖.mp4
086 Footer設定.mp4
087 Final Code.html
087-p2-7 final code.zip
088 Accessibility.mp4
089 Sticky header.mp4
090 Scrollbar設定.mp4
091 部屬靜態網頁.mp4
09 - Project 3 - Portfolio Website
092 資源包下載.html
092-p3-0資源包.zip
093 網站介紹.mp4
094 Figma照片製作.mp4
095 首頁製作.mp4
096 個人能力值.mp4
097 履歷製作.mp4
098 RWD設定.mp4
099 泡沫動畫設定.mp4
100 Final Code.html
100-p3-8 Final Code.zip
10 - Chapter 5 - JavaScript Basics
101 JS簡介.mp4
102 Lexical Structure.mp4
103 變數與賦值.mp4
104 數字運算.mp4
105 String基本介紹.mp4
106 Number Methods.mp4
107 String Attributes and Methods.mp4
108 Boolean, Undefined, Null.mp4
109 logical, comparison operator.mp4
110 Bitwise Operators.mp4
111 公式轉換解釋.mp4
112 if statement.mp4
112-5-12app.js
113 Truthy and Falsy Values.mp4
114 Logical Operator與其他資料類型處理.mp4
115 Coding Convention and Restrictions.mp4
11 - Chapter 6 - JavaScript Basics 2
116 認識函式.mp4
117 return關鍵字.mp4
118 Array陣列.mp4
119 Reference Data Type 比較.mp4
120 Array Methods.mp4
121 Function的時間複雜度.mp4
122 Object語法.mp4
123 For loop, while loop.mp4
124 Nested Loop, break, continue.mp4
125 For loop跑Array.mp4
126 Math Object.mp4
127 終極密碼.mp4
127-6-11app.js
128 小試身手練習題.html
129 反轉陣列解答.mp4
130 找大最大值解答.mp4
130-6-13.xlsx
131 加總數值解答.mp4
12 - 程式練習題
132 題目連結.html
133 練習題介紹.mp4
134 簡單練習題第一部分 1-4.mp4
135 簡單練習題第一部分 5-7.mp4
136 簡單練習題第一部分 8-10.mp4
137 簡單練習題第二部分 1-2.mp4
138 簡單練習題第二部分 3-4.mp4
139 簡單練習題第二部分 5-7.mp4
140 初階題目 1-3.mp4
141 初階題目 4-5.mp4
142 中階題目1-3.mp4
143 中階題目 4-5.mp4
144 N皇後問題解答.mp4
145 解答程式碼.html
13 - Chapter 7 - Document Object Model (DOM)
146 DOM與window object.mp4
147 get element by id or class.mp4
148 querySelector.mp4
149 Note.html
150 差別比較.mp4
151 Function Expression.mp4
152 Arrow Function Expression.mp4
153 forEach method.mp4
154 forEach in NodeList.mp4
155 Element Objects 1.mp4
156 Element Objects 2.mp4
157 Inheritance.mp4
158 JS事件.mp4
159 Event Bubbling.mp4
160 Storage講解.mp4
161 JSON與Storage.mp4
14 - Project 4 - 成績計算網站
162 資源包下載.html
162-math.jpg
163 Project介紹.mp4
164 開場動畫製作.mp4
165 改變select顏色.mp4
166 計算成績.mp4
167 新增form.mp4
168 垃圾桶製作.mp4
169 排序演算法比較.mp4
170 排序程式碼.mp4
171 剩餘問題處理.mp4
172 Final Code.html
172-4-10 final code.zip
15 - Chapter 8 - Advanced JavaScript I
173 JS引擎、無限大.mp4
174 Spread Syntax and Rest Parameters.mp4
175 Primitive Coercion.mp4
175-8-3範例.js
176 JavaScript String Comparison.mp4
177 進階Array Methods.mp4
177-8-5範例.js
178 JS內建排序函式.mp4
179 for in loop, for of loop.mp4
16 - Chapter 9 - Advanced JavaScript II
180 Execution Context.mp4
181 Hoisting.mp4
182 Scope and Closure.mp4
183 Call Stack and Recursion.mp4
184 費波那契數列.mp4
185 Constructor Function.mp4
186 Inheritance and the Prototype Chain.mp4
187 Function Methods.mp4
188 Prototype Inheritance in Constructors.mp4
189 Class.mp4
189-9-10.js
190 Circle範例.mp4
190-9-11.js
17 - Project 5 - 貪食蛇遊戲
191 遊戲介紹.mp4
192 CSS設定.mp4
193 蛇製作.mp4
194 移動蛇.mp4
195 控制蛇的方向.mp4
196 設定蛇穿牆功能.mp4
197 果實設定.mp4
198 遊戲結束設定.mp4
199 紀錄遊戲最高分.mp4
200 Final Code.html
200-project5 貪食蛇遊戲.zip
18 - Project 6 - 彈跳球遊戲
201 基本設定.mp4
202 彈跳球功能設定.mp4
203 地板彈跳設定.mp4
204 製作磚塊.mp4
205 磚塊邏輯設計.mp4
206 系統性能優化.mp4
207 Final Code.html
207-project6 彈跳球遊戲.zip
19 - Chapter 10 - Advanced JavaScript III
208 default parameters, backtick, ternary operator.mp4
209 JS語言類型.mp4
210 IIFE, destructuring assignment.mp4
211 Switch Statement.mp4
211-10-4.js
212 錯誤處理.mp4
213 客製化錯誤訊息.mp4
20 - Chapter 11 - Version Control
214 版本控制.mp4
215 Command Prompt 常用指令.mp4
216 Unix作業系統.mp4
217 下載Git (Windows).mp4
218 下載Git (macOS).mp4
219 Unix 指令.mp4
220 Git and GitHub.mp4
221 Git 指令.mp4
222 branch, checkout and merge.mp4
223 Push到GitHub.mp4
224 remote Support for password authentication was removed on August 13, 202.mp4
225 Git Pull.mp4
21 - Chapter 12 - Node.js
226 靜態與動態網頁.mp4
227 網頁開發工具.mp4
228 Module Wrapper.mp4
229 Self-made Modules.mp4
230 Node內建Module.mp4
231 IP, DNS, Port.mp4
232 HTTP Request and Response Header.mp4
233 網頁伺服器製作.mp4
233-12-8.js
234 NPM與nodemon.mp4
235 Note for -g.html
22 - Chapter 13 - Express.js
236 ExpressJS.mp4
237 HTTP Request Methods.mp4
238 Express Routing與Response Object.mp4
239 Request object常用屬性.mp4
240 Express Middleware.mp4
241 Static Files.mp4
242 HTTP Status Code.mp4
23 - Chapter 14 - EJS
243 EJS 基本介紹.mp4
244 EJS 語法.mp4
245 EJS應用示範.mp4
246 MVC 模式.mp4
24 - Chapter 15 - MySQL
247 資料庫管理系統 DBMS.mp4
248 增刪查改 CRUD.mp4
249 Keys.mp4
250 SQL.mp4
251 SQL 下載.mp4
252 PopSQL下載.mp4
253 SQL表格設定.mp4
254 增加資料.mp4
255 刪除、查詢、修改資料.mp4
255-15-8 example.sql
256 Join 表格.mp4
257 SQL 與 NoSQL 比較.mp4
25 - Chapter 16 - Ajax
258 Ajax.mp4
259 同步與異步.mp4
259-16-2app.js
260 Promise物件.mp4
260-16-3app.js
261 Response.json() 補充.html
262 Catching Errors.mp4
263 Combining Multiple Promises.mp4
263-16-5app.js
264 Async and Await.mp4
265 Node.js Event Loop.mp4
265-16-7app.js
266 Race Condition.mp4
266-16-8app.js
267 Promise Based API.mp4
267-16-9app.js
268 連接到外部API.mp4
26 - Chapter 17 - MongoDB
269 (Windows) 安裝MongoDB與Mongo Shell.mp4
270 (macOS) 安裝mongoDB與mongo shell.mp4
271 JSON and BSON.mp4
272 mongosh 與數據新增.mp4
273 數據查詢.mp4
274 修改與刪除數據.mp4
27 - Chapter 18 - Mongoose
275 Mongoose介紹.mp4
276 Mongoose套件下載.mp4
277 Model and Schema.mp4
278 Mongoose資料查詢.mp4
279 更新資料.mp4
280 刪除資料.mp4
281 Schema Validators.mp4
282 Static method, instance method.mp4
283 Mongoose Middleware.mp4
284 Final Code.html
284-18-10mongoose practice.zip
28 - Chapter 19 - RESTful API
285 Restful API.mp4
286 GET 學生資料.mp4
287 POST 新增學生資料.mp4
288 PUT, PATCH 更新資料.mp4
289 DELETE 移除資料.mp4
290 Restful API Final Code.html
290-19-5Restful API.zip
291 cors套件介紹.mp4
292 透過網頁瀏覽學生資料.mp4
293 透過網頁新增學生資料.mp4
294 透過網頁更新學生資料.mp4
295 網頁系統Final Code.html
295-19-9透過網頁操作數據.zip
29 - Chapter 20 - Middlewares, Cookies, Sessions
296 Express Middlewares.mp4
297 express Router().mp4
297-20-2express router.zip
298 Cookies簡介.mp4
299 Cookie簽名.mp4
300 (進階課程) Signing Cookies.mp4
301 (進階課程) 伺服器怎麼取得value?.html
302 Cookies and Storage 差別.mp4
303 Session設定.mp4
304 dotenv.mp4
305 flash.mp4
306 Final Code.html
306-20-9cookie and session practice.zip
30 - Chapter 21 - Authentication
307 Authentication and Authorization.mp4
308 密碼學導論與密碼加鹽.mp4
309 Bcrypt密碼處理.mp4
310 登入系統.mp4
311 (進階課程) Blowfish演算法.mp4
312 Final Code.html
312-21-4bcrypt.zip
31 - Chapter 22 - Oauth and Project 7 - Google登入網站
313 OAuth 流程.mp4
314 OAuth 流程2.mp4
315 Google client id與secret.mp4
316 Google登入頁面.mp4
316-22-4資源包.zip
317 儲存使用者資訊.mp4
318 顯示使用者資訊.mp4
319 註冊本地使用者.mp4
320 登入本地使用者.mp4
321 製作Post.mp4
322 Final Code.html
322-22-10 project7 登入系統網站.zip
323 (進階課程) RFC 6749 導讀與詳細說明.mp4
32 - Chapter 23 - React
324 SPA.mp4
325 Get Started with React.mp4
326 React專案環境設定.mp4
327 JSX語法第一部分.mp4
328 JSX語法第二部分.mp4
329 Props.mp4
330 事件處理.mp4
331 State.mp4
332 State Lifting.mp4
333 useEffect.mp4
334 (進階課程) Class Component, Life Cycle.mp4
335 React Router.mp4
33 - Project 8 - 圖片網站
336 資源包下載.html
336-p8-0styles.zip
337 專案介紹.mp4
338 專案基本設定.mp4
339 展示圖片.mp4
340 搜尋圖片.mp4
341 更多圖功能.mp4
342 Final Code.html
342-p8-6 project 8.zip
34 - Chapter 24 與 Project 9 - MERN 專案
343 專案介紹.mp4
344 Model設定.mp4
345 註冊使用者.mp4
346 登入使用者並製作JWT.mp4
347 驗證JWT邏輯補充.html
348 驗證JWT令牌.mp4
349 課程routes設定.mp4
350 Axios 補充說明.mp4
350-9-6.5app.js
351 React設定.mp4
351-p9-7資源包.zip
352 React註冊使用者.mp4
353 React登入使用者.mp4
354 React課程頁面.mp4
355 React 搜尋課程.mp4
356 React註冊課程.mp4
357 Final Code.html
357-p9-13 project 9 final code.zip
358 Heroku免費託管服務終止.html
359 Heroku 部屬網站.mp4
35 - Chapter 25 - Next.js
360 Next.js.mp4
361 渲染方式.mp4
362 Routing and Link標籤.mp4
363 Layout與metadata.mp4
364 CSS Modules與App Component.mp4
365 Client-Side Rendering.mp4
366 Static Site Generation with Data.mp4
367 Static Generation with Dynamic Routes.mp4
368 Server-Side Rendering.mp4
369 Codes until Now.html
369-next-practice.zip
370 More Content.html
36 - 恭喜完成課程內容_
371 Bonus Lecture.html
|
|