หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

bootcamp พัฒนาเว็บที่สมบูรณ์

Alt text

ทรัพยากร

https://www.appbrewery.co/p/web-development-course-resources

โครงการ

  • โครงการที่ 1: การใช้เว็บไซต์ส่วนบุคคลที่สร้างขึ้น html - https://sdkdeepa.github.io/resume/

  • โครงการที่ 2: Intro to 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: Drum Kit - JS คีย์บอร์ดกิจกรรม - https://sdkdeepa.github.io/drumming/

  • โครงการ 5: เกม Simon - JS และ JQuery - https://sdkdeepa.github.io/simon-game-jquery/

  • โครงการ 6: BMI Calculator - Node.js และ Express.js โครงการนี้ใช้วิธี API เช่น GET และ POST เพื่อคำนวณ BMI

  • โครงการที่ 7: แอพอากาศ - Node.js และ Express.js โครงการนี้ใช้ API สภาพอากาศภายนอกเพื่อโทรหาข้อมูลสภาพอากาศหลังจากส่งคำขอโพสต์

  • โครงการที่ 8: จดหมายข่าวลงทะเบียน-HTML, CSS, Bootstrap, JS, NodeJS, Express, API, NPM, Nodemon, Body-Parser ฯลฯ-https://shrouded-river-17694.herokuapp.com/

  • โครงการ 9 และ 10: แอพรายการสิ่งที่ต้องทำ - ความต่อเนื่องของแอพ TODO List V2 เพิ่ม Get, Post และลบเส้นทาง ตอนนี้คุณสามารถสร้างและลบรายการ TODO สำหรับวันนี้และสำหรับรายการที่กำหนดเอง สามารถเพิ่มรายการที่กำหนดเองไปยังเส้นทางบ้าน (เช่น: /งาน) การใช้ฐานข้อมูล MongoDB Altas Cloud ข้อมูลจะถูกรวบรวม โฮสต์แอปพลิเคชันผ่าน Heroku ตรวจสอบ: https://tranquil-earth-77166.herokuapp.com/

  • โครงการที่ 11: เว็บไซต์บล็อกส่วนบุคคลหลายมัลติ - สร้างแอปพลิเคชันบล็อกส่วนบุคคลหลายหน้าโดยใช้ HTML, CSS, Bootstrap, JS, Node.js, Express.js, Body -Parser, API, EJS, Heroku, Mongoose, Mogodb Altas Cloud Cluster ชำระเงิน: https://morning-brook-32061.herokuapp.com/

ตัวอย่างของการจัดทำโครงการ

  • โครงการ 2. wireframing tindog.png

หัวข้อที่ครอบคลุม

HTML, CSS, JavaScript, Bootstrap 4, การจัดการ DOM & DOM, jQuery, node.js, Express, React EJS, Body-Parser, Nodemon, Lodash, MongoDB, MongoDB Passport, Mongoope Passport-google-Path20, Mongoose-Findorcreate, Express-Session, API, JSON, การตรวจสอบ, Mailchimp API, Build REST API จากศูนย์, Heroku

ส่วนที่ 9: บทนำสู่ JavaScript ES6

  • 116-117: ความท้าทาย: การเปลี่ยนปลอกเป็นข้อความ
  • 118: ผู้ดำเนินการเลขคณิตและโมดูโลพื้นฐานใน JavaScript
  • 121-122: ฟังก์ชั่นส่วนที่ 1: ความท้าทาย - หุ่นยนต์ Karel
  • 124: ฟังก์ชั่นส่วนที่ 2: พารามิเตอร์และอาร์กิวเมนต์

ส่วนที่ 10: จาวาสคริปต์กลาง

  • 131: การสร้างตัวเลขแบบสุ่มใน JavaScript: การสร้างเครื่องคิดเลขรัก
  • 132: คำสั่งควบคุม: การใช้เงื่อนไขและตรรกะ IF-ELSE
  • แบบฝึกหัดการเข้ารหัส 5: BMI Calculator ขั้นสูง (ถ้า/อื่น ๆ )
  • แบบฝึกหัดการเข้ารหัส 6: ปีกระโดดปี
  • 138: การเพิ่มองค์ประกอบและเทคนิคอาร์เรย์ระดับกลาง

ส่วนที่ 12: ความท้าทายระดับบอส 1 - เกม Dicee

  • สร้างไฟล์ JS ภายนอก
  • เพิ่มภาพลูกเต๋า
  • สร้างหมายเลขสุ่ม
  • เปลี่ยน IMG ทั้งสองเป็นลูกเต๋าแบบสุ่ม
  • เปลี่ยนองค์ประกอบ IMG ทั้งสอง
  • เปลี่ยนชื่อเพื่อแสดงผู้ชนะ

ส่วนที่ 13: JavaScript ขั้นสูงและการจัดการ DOM

  • 172: ความท้าทายฟังก์ชั่นการสั่งซื้อที่สูงขึ้น

ส่วนที่ 14: ชุดกลอง

  • 171: การเพิ่มนักข่าวเหตุการณ์ลงในปุ่ม
  • 174: วิธีเล่นเสียงบนเว็บไซต์
  • 176: วิธีใช้คำสั่งสวิตช์ใน JavaScript
  • 179: การใช้คีย์บอร์ดเหตุการณ์ฟังเพื่อตรวจสอบการกดปุ่ม
  • 181: การเพิ่มภาพเคลื่อนไหวลงในเว็บไซต์

ส่วนที่ 15: ความท้าทายระดับบอส 2 - เกม Simon

  • เพิ่ม js และ jQuery
  • สร้างรูปแบบใหม่
  • แสดงลำดับต่อผู้ใช้ด้วยภาพเคลื่อนไหวและเสียง
  • ตรวจสอบว่ากดปุ่มใด
  • เพิ่มเสียงลงในการคลิกปุ่ม
  • เพิ่มภาพเคลื่อนไหวในการคลิกผู้ใช้
  • เริ่มเกม
  • ตรวจสอบคำตอบของผู้ใช้กับลำดับเกม
  • เล่นเกม
  • รีสตาร์ทเกม

ส่วนที่ 19: Express.js กับ Node.js

  • 241: การสร้างเซิร์ฟเวอร์แรกของเราด้วย Express
  • 242: การจัดการคำขอและคำตอบ: คำขอรับ
  • 244: ความเข้าใจและการทำงานกับเส้นทาง
  • 246: การตั้งค่าการท้าทายเครื่องคิดเลข
  • 248: ตอบคำขอด้วยไฟล์ HTML
  • 249: ประมวลผลคำขอโพสต์ด้วยตัวแยกวิเคราะห์ร่างกาย
  • 250: BMI Routing Challenge

ส่วนที่ 20: API - อินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน

  • 258: การทำคำขอรับด้วยโมดูลโหนด HTTPS
  • 259: วิธีแยกวิเคราะห์ JSON
  • 260: การใช้ Express เพื่อแสดงผลเว็บไซต์ด้วยข้อมูล Live API
  • 261: การใช้ตัวแยกวิเคราะห์ร่างกายเพื่อแยกวิเคราะห์คำขอโพสต์ไปยังโครงการเซิร์ฟเวอร์: โครงการสภาพอากาศ

ส่วนที่ 21: การลงทะเบียนจดหมายข่าว

  • 263: การตั้งค่าหน้าลงทะเบียน
  • 264: การโพสต์ข้อมูลไปยังเซิร์ฟเวอร์ของ Mailchimp ผ่าน API ของพวกเขา
  • 265: เพิ่มหน้าความสำเร็จและความล้มเหลว
  • 266: ปรับใช้เซิร์ฟเวอร์ของคุณด้วย Heroku

โครงการ: https://shrouded-river-17694.herokuapp.com/

ส่วนที่ 22: EJS

  • 282: เทมเพลต? ทำไมเราถึงต้องการเทมเพลต?
  • 283: การสร้างเทมเพลต EJS แรกของคุณ
  • 284: การเรียกใช้รหัสภายในเทมเพลต EJS
  • 285: ส่งข้อมูลจากหน้าเว็บของคุณไปยังเซิร์ฟเวอร์ของคุณ
  • 287: เพิ่มสไตล์ CSS ที่ทำไว้ล่วงหน้าลงในเว็บไซต์ของคุณ
  • 288: ทำความเข้าใจกับ templating กับเลย์เอาต์
  • 289: การทำความเข้าใจการส่งออกโมดูลโหนด: วิธีการส่งฟังก์ชั่นและข้อมูลระหว่างไฟล์

ส่วนที่ 23: ความท้าทายระดับบอส 3 - เว็บไซต์บล็อก

  • รับเส้นทางที่บ้านและเพิ่มเนื้อหาไปที่บ้าน ejs
  • ส่งข้อมูลจาก homestartingContent ไปที่ home.ejs
  • เพิ่มส่วนหัวและส่วนท้าย partials ไปที่ home.ejs
  • ย้ายส่วนหัวและส่วนท้ายไปยังโฟลเดอร์ Partials
  • เพิ่มเกี่ยวกับและติดต่อเส้นทางส่งเนื้อหาไปที่เกี่ยวกับและติดต่อ ejs
  • เพิ่ม Nav Href ลงในส่วนหัว
  • เพิ่มรูปแบบการเขียนและเส้นทางหลัง
  • เพิ่มฟิลด์ข้อความเพื่อเขียนแบบฟอร์มและใช้ bootstrap
  • สร้างวัตถุ JS สำหรับโพสต์
  • กดโพสต์ลงในอาร์เรย์โพสต์
  • เพิ่มโพสต์ในการแสดงผลอาร์เรย์
  • วนซ้ำผ่านโพสต์ทั้งหมด
  • Refactor for Loop เพื่อใช้ foreach
  • แสดงแต่ละโพสต์ลงในบ้าน
  • เพิ่มพารามิเตอร์การกำหนดเส้นทางด่วน /โพสต์ /: blogpost
  • วนลูปผ่านอาร์เรย์โพสต์เพื่อตรวจสอบว่าตรงกับชื่อใน URL
  • เพิ่ม lodash และใช้ _.lowercase บนชื่อ
  • หน้าแยกต่างหากสำหรับแต่ละโพสต์บล็อก
  • ตัดทอนโพสต์ตัวบนหน้าแรกถึง 100 อักขระ
  • เพิ่มอ่านเพิ่มเติมในโพสต์

มาตรา 27: พังพอน

  • 357: เบื้องต้นเกี่ยวกับพังพอน
  • 358: อ่านจากฐานข้อมูลของคุณด้วยพังพอน
  • 359: การตรวจสอบข้อมูลด้วยพังพอน
  • 360: การอัปเดตและการลบข้อมูลโดยใช้พังพอน
  • 361: การสร้างความสัมพันธ์และเอกสารการฝังโดยใช้พังพอน

ส่วนที่ 28: รวบรวมทุกอย่างเข้าด้วยกัน

  • 364: นำโครงการ todolist ไปอีกระดับและเชื่อมต่อกับพังพอน
  • 365: แสดงรายการฐานข้อมูลลงในแอพ Todolist
  • 366: การเพิ่มรายการใหม่ในฐานข้อมูล Todolist ของเรา
  • 367: การลบรายการจากฐานข้อมูล Todolist ของเรา
  • 368: การสร้างรายการที่กำหนดเองโดยใช้พารามิเตอร์เส้นทางด่วน
  • 369: การเพิ่มรายการใหม่ให้กับนักโทโดลิสต์ที่กำหนดเอง
  • 370: กลับมาอีกครั้ง Lodash และการลบรายการจากรายการสิ่งที่กำหนดเอง

ส่วนที่ 29 - การปรับใช้เว็บแอปพลิเคชันของคุณ

  • 374: วิธีการปรับใช้แอพเว็บด้วยฐานข้อมูล
  • 374: วิธีการตั้งค่า MongoDB Atlas
  • 375: ปรับใช้แอพด้วยฐานข้อมูลไปยัง Heroku

โฟลเดอร์: โครงการ 9 และ 10: รายการสิ่งที่ต้องทำ

ส่วนที่ 30 - ความท้าทายระดับบอส 4 - การอัพเกรดเว็บไซต์บล็อก

  • 381: บันทึกโพสต์ที่ประกอบไปด้วย MongoDB
  • 382: รับหน้าแรกเพื่อแสดงโพสต์
  • 383: เปลี่ยนเส้นทางไปยังหน้าแรกหลังจากบันทึก () เสร็จสมบูรณ์โดยไม่มีข้อผิดพลาด
  • 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: นิพจน์ JavaScript ในตัวอักษรเทมเพลต JSX & ES6
  • 424: นิพจน์ JavaScript ในการฝึก JSX
  • 425: คุณลักษณะและองค์ประกอบของการจัดแต่งทรงผม
  • 426: สไตล์อินไลน์สำหรับองค์ประกอบปฏิกิริยา
  • 427: การฝึกสไตล์การตอบสนอง
  • 428: ส่วนประกอบตอบสนอง
  • 429: การปฏิบัติส่วนประกอบของปฏิกิริยา
  • 431: การฝึกฝนการนำเข้า JavaScript ES6 การส่งออกและโมดูล
  • 434: โครงการ App Keeper - ตอนที่ 1
  • 436: เล่นอุปกรณ์ประกอบฉาก
  • 437: ตอบสนองอุปกรณ์ประกอบฉาก
  • 438: React Devtools - https://990sq.csb.app/
  • 439: การแมปข้อมูลกับส่วนประกอบ - https://0lrqy.csb.app/
  • 440: การแมปข้อมูลไปยังการฝึกซ้อมส่วนประกอบ - https://1kzup.csb.app/
  • 441: JavaScript ES6 แผนที่/ตัวกรอง/ลด
  • 442: JavaScript ES6 Arrow Functions
  • 443: โครงการ App Keeper - ตอนที่ 2
  • 444: ตอบสนองการเรนเดอร์ตามเงื่อนไขกับผู้ประกอบการและผู้ประกอบการและผู้ดำเนินการ
  • 445: การฝึกการแสดงผลตามเงื่อนไข - https://pr7ow.csb.app/
  • 447: React Hooks - useState
  • 448: การฝึกฝนการใช้เบ็ด
  • 449: JavaScript ES6 Object & Array Destructuring
  • 450: JavaScript ES6 Destructuring Challenge
  • 451: การจัดการเหตุการณ์ใน React
  • 452: แบบฟอร์มตอบสนอง
  • 454: เปลี่ยนสถานะที่ซับซ้อน
  • 455: การเปลี่ยนแปลงการปฏิบัติของรัฐที่ซับซ้อน
  • 456: ตัวดำเนินการสเปรด JavaScript ES6
  • 457: การปฏิบัติของผู้ประกอบการสเปรด JavaScript ES6
  • 458: การจัดการต้นไม้ส่วนประกอบ
  • 459: การจัดการการฝึกต้นไม้ส่วนประกอบ
  • 460: โครงการ App Keeper - ตอนที่ 3
  • 461: ตอบสนองการพึ่งพาและการจัดแต่งทรงผมแอพผู้รักษา - https://pbt9b.csb.app/

เครื่องมือที่ใช้

  • codepen
  • อะตอม
  • บุรุษไปรษณีย์
  • เทอร์มินัลไฮเปอร์
  • รหัสสตูดิโอภาพ
  • https://codesandbox.io/
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด