完整的Web開發訓練營
資源
https://www.appbrewery.co/p/web-development-course-resources
專案
項目1：使用html創建的個人網站-https：//sdkdeepa.github.io/resume/
項目2：CSS介紹-https：//sdkdeepa.github.io/profile/
項目2決賽：html，CSS和Bootstrap -https：//sdkdeepa.github.io/udemy-bootstrap/
項目3：骰子遊戲-JS和DOM方法-https：//sdkdeepa.github.io/dice
項目4：鼓套件-JS鍵盤事件-https：//sdkdeepa.github.io/drumming/
項目5：Simon Game -JS和JQuery -https：//sdkdeepa.github.io/simon-game-jquery/
項目6：BMI計算器-Node.js and Express.js。該項目使用api方法（例如get和post）來計算BMI
- 項目7：天氣應用-Node.js and Express.js。該項目使用外部天氣API在發送發布請求後呼叫以獲取天氣數據。
項目8：新聞通訊註冊-HTML，CSS，Bootstrap，JS，Nodejs，Express，API，NPM，NPM，Nodemon，Body-Parser等-https：//shrouded-rivered-rivered-river-river-17694.herokuapp.com/
項目9和10：TODO LIST應用程序 - 持續TODO LIST應用程序V2。添加了獲取，發布和刪除路線。現在，您可以為今天和自定義列表創建和刪除TODO列表。可以將自定義列表添加到家庭路線（ex： /work）。使用MongoDB Altas雲數據庫收集數據。通過Heroku託管了申請。查看：https：//tranquil-earth-77166.herokuapp.com/
項目11：乘法個人博客網站 - 使用HTML，CSS，Bootstrap，JS，Node.js，Express.js，Body -Parser，API，EJS，EJS，Heroku，Mongoose，Mongoose，Mogodb Altas Cloud Cloud Cloud cloud cloud Cloud cluster創建了一個多頁面個人博客應用程序。結帳：https：//morning-brook-32061.herokuapp.com/
線框項目的示例
涵蓋了主題
HTML, CSS, JavaScript, Bootstrap 4, DOM & DOM Manipulation, jQuery, Node.js, Express, React EJS, body-parser, nodemon, lodash, MongoDB, MongoDB Atlas, mongoose, mongoose-encryption, dotenv, md5, bcrypt, passport, passport-local, passport-local-mongoose, Passport-Google-Path20，Mongoose-FindorCreate，Express-Session，API，JSON，AUTHERTICATION，MAILCHIMP API，HEROKU從頭開始構建REST API。
第9節：JavaScript ES6簡介
- 116-117：挑戰：更改文本中的套管
- 118：JavaScript中的基本算術和Modulo操作員
- 121-122：功能第1部分：挑戰 - 卡雷爾機器人
- 124：功能第2部分：參數和參數
第10節：中級JavaScript
- 131：JavaScript中的隨機數：構建愛情計算器
- 132：控制語句：使用IF-ELSE條件和邏輯
- 編碼練習5：BMI計算器高級（如果/其他）
- 編碼練習6：leap年
- 138：添加元素和中間陣列技術
第12節：老闆級挑戰1-戴西遊戲
- 創建外部JS文件
- 添加骰子圖像
- 創建一個隨機數
- 將兩個IMG更改為隨機骰子
- 更改兩個IMG元素
- 更改標題以展示獲勝者
第13節：高級JavaScript和DOM操縱
第14節：鼓工套件
- 171：將事件列表者添加到按鈕
- 174：如何在網站上播放聲音
- 176：如何在JavaScript中使用開關語句
- 179：使用鍵盤事件聽眾檢查鍵按
- 181：將動畫添加到網站
第15節：老闆級挑戰2-西蒙遊戲
- 添加JS和jQuery
- 創建一個新模式
- 通過動畫和聲音向用戶顯示順序
- 檢查按下哪個按鈕
- 將聲音添加到按鈕點擊
- 將動畫添加到用戶點擊
- 開始遊戲
- 檢查用戶對遊戲順序的答案
- 遊戲結束
- 重新啟動遊戲
第19節：帶有node.js的express.js
- 241：使用Express創建第一台服務器
- 242：處理請求和響應：獲取請求
- 244：理解和使用路線
- 246：計算器挑戰設置
- 248：響應HTML文件的請求
- 249：帶有人體解析器的處理後請求
- 250：BMI路由挑戰
第20節：API-應用程序編程接口
- 258：通過節點HTTPS模塊進行獲取請求
- 259：如何解析JSON
- 260：使用Express渲染具有實時API數據的網站
- 261：使用身體解析器將郵政請求解析到服務器項目：天氣項目
第21節：新聞通訊註冊
- 263：設置註冊頁面
- 264：通過其API將數據發佈到MailChimp的服務器
- 265：添加成功和失敗頁面
- 266：用Heroku部署服務器
項目：https：//shrouded-river-17694.herokuapp.com/
第22節：EJS
- 282：模板？為什麼我們需要模板？
- 283：創建您的第一個EJS模板
- 284：在EJS模板中運行代碼
- 285：將數據從您的網頁傳遞給服務器
- 287：將預製的CSS樣式表添加到您的網站
- 288：了解模板與佈局
- 289：了解節點模塊導出：如何傳遞文件之間的功能和數據
第23節：老闆級挑戰3-博客網站
- 獲取家庭路線並添加內容到home.ejs
- 將數據從homestartingcontent傳遞到home.ejs
- 將標題和頁腳局部添加到home.ejs
- 將標題和頁腳移到了Partials文件夾
- 添加並聯繫路線，將內容傳遞到about and Contact.ejs
- 將NAV HREF添加到標題
- 添加撰寫形式和郵政路線
- 添加文本字段以組合形式並使用Bootstrap
- 創建JS對象的發布
- 將帖子推入帖子陣列
- 將帖子添加到渲染數組
- 循環遍歷所有帖子
- 用於使用foreach的循環的重構器
- 將每個帖子渲染到家裡
- 添加Express路由參數 /帖子 /：Blogpost
- 循環通過帖子數組檢查它是否與URL中的標題匹配
- 添加lodash並在標題上使用_。
- 每個博客文章的單獨頁面
- 首頁上的截斷帖子主體可截斷100個字符
- 添加更多閱讀到帖子
第27節：詞彙
- 357：蒙古概論
- 358：用貓鼬從數據庫中讀取
- 359：用貓鼬的數據驗證
- 360：使用Mongoose更新和刪除數據
- 361：使用Mongoose建立關係並嵌入文檔
第28節：將所有內容放在一起
- 364：將Todolist Project提升到一個新的水平，並將其與Mongoose聯繫起來
- 365：將數據庫項目渲染到Todolist應用程序中
- 366：向我們的Todolist數據庫添加新項目
- 367：刪除我們的Todolist數據庫的項目
- 368：使用快速路由參數創建自定義列表
- 369：將新項目添加到自定義訓練學家中
- 370：重新訪問lodash和刪除從自定義待辦事項列表中刪除項目
第29節 - 部署您的Web應用程序
- 374：如何使用數據庫部署Web應用程序
- 374：如何設置MongoDB地圖集
- 375：用數據庫部署應用程序到Heroku
文件夾：項目9和10：待辦事項清單https：//tranquil-earth-77166.herokuapp.com/
第30節 - 老闆級挑戰4-博客網站升級
- 381：與MongoDB一起保存編寫帖子
- 382：獲取主頁渲染帖子
- 383：save（）完成後，重定向到主頁，沒有錯誤
- 384：根據帖子_id渲染正確的博客文章
文件夾：項目11：博客網站完成https：//morning-brook-32061.herokuapp.com/
第31節 - 從頭開始構建自己的靜止API
- 389：設置服務器挑戰
- 391：獲取所有文章
- 392：發布一篇新文章
- 393：刪除所有文章
- 394：使用Express的鎖鏈路線處理程序
- 395：獲取一篇特定的文章
- 396：放一篇特定的文章
- 397：補丁特定的文章
- 398：刪除特定文章
文件夾：Wiki-api
第32節 - 身份驗證和安全
- 403：設置
- 404：1級 - 註冊用戶用戶名和密碼
- 406：2級 - 數據庫加密
- 407：使用環境變量確保秘密安全
- 408：3級 - 哈希密碼
- 410：4級 - 鹽和哈希密碼與bcrypt
- 412：5級 - 使用Passport.js添加餅乾和會話
- 413A：6級-OAUTH 2.0＆如何與Google實施登錄
- 413B：6級-Oauth 2.0與Facebook
- 414：讓用戶提交秘密
文件夾：秘密
第33節 - react.js
- 422：JSX代碼練習
- 423：JSX和ES6模板文字中的JavaScript表達式
- 424：JSX練習中的JavaScript表達式
- 425：屬性和样式反應元素
- 426：反應元素的內聯樣式
- 427：反應造型練習
- 428：反應組件
- 429：反應組件練習
- 431：JavaScript ES6導入，導出和模塊練習
- 434：飼養員應用程序項目 - 第1部分
- 436：React Props
- 437：React道具實踐
- 438：react devtools -https：//990sq.csb.app/
- 439：將數據映射到組件-https：//0lrqy.csb.app/
- 440：將數據映射到組件練習-https：//1kzup.csb.app/
- 441：JavaScript ES6地圖/過濾器/減少
- 442：JavaScript ES6箭頭功能
- 443：守護者應用程序項目 - 第2部分
- 444：與三元操作員和操作員的有條件渲染
- 445：條件渲染練習-https：//pr7ow.csb.app/
- 447：React Hooks -Usestate
- 448：Usestate Hook練習
- 449：JavaScript ES6對象和數組破壞
- 450：JavaScript ES6破壞挑戰
- 451：事件處理中的事件處理
- 452：反應形式
- 454：改變複雜狀態
- 455：改變複雜的國家實踐
- 456：JavaScript ES6傳播操作員
- 457：JavaScript ES6傳播操作員實踐
- 458：管理組件樹
- 459：管理組成樹實踐
- 460：守門員應用項目 - 第3部分
- 461：React依賴和样式守護者應用-https：//pbt9b.csb.app/
使用的工具
- codepen
- 原子
- 郵差
- 超級終端
- Visual Studio代碼
- https://codesandbox.io/
