ดาวน์โหลด Web Dev For Beginners - Web Dev For Beginners ดาวน์โหลดซอร์สโค้ด

Web Dev For Beginners

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

การพัฒนาเว็บไซต์สำหรับผู้เริ่มต้น - หลักสูตร

เรียนรู้พื้นฐานของการพัฒนาเว็บด้วยหลักสูตรที่ครอบคลุม 12 สัปดาห์ของเราโดย Microsoft Cloud Advocates บทเรียนทั้ง 24 บทจะเจาะลึกเกี่ยวกับ JavaScript, CSS และ HTML ผ่านโปรเจ็กต์ภาคปฏิบัติ เช่น สวนขวด ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีส่วนร่วมกับแบบทดสอบ การอภิปราย และการมอบหมายงานภาคปฏิบัติ พัฒนาทักษะของคุณและเพิ่มประสิทธิภาพการรักษาความรู้ของคุณด้วยการสอนตามโครงการที่มีประสิทธิภาพของเรา เริ่มการเดินทางเขียนโค้ดของคุณวันนี้!

คุณเป็นนักเรียนหรือไม่?

ไปที่ หน้า Student Hub ซึ่งคุณจะพบแหล่งข้อมูลสำหรับผู้เริ่มต้น ชุดนักเรียน และแม้แต่วิธีรับบัตรกำนัลใบรับรองฟรี นี่คือหน้าที่คุณต้องการบุ๊กมาร์กและตรวจสอบเป็นครั้งคราวเนื่องจากเราสลับเนื้อหาออกทุกเดือน

ประกาศ - หลักสูตรใหม่ เกี่ยวกับ Generative AI เปิดตัวแล้ว!

อย่าพลาดหลักสูตร 12 บทเรียนใหม่ของเราเกี่ยวกับ AI เชิงสร้างสรรค์!

แต่ละบทเรียนประกอบด้วยงานที่ต้องทำให้เสร็จ การตรวจสอบความรู้ และความท้าทายเพื่อเป็นแนวทางในหัวข้อการเรียนรู้ เช่น:

แจ้งและทันเวลาวิศวกรรม
การสร้างแอปข้อความและรูปภาพ
แอพค้นหา

ไปที่ https://aka.ms/genai-beginners เพื่อเริ่มต้น!

เริ่มต้นใช้งาน

คุณครู ทั้งหลาย เราได้รวมข้อเสนอแนะบางประการเกี่ยวกับวิธีใช้หลักสูตรนี้ไว้แล้ว เราชอบความคิดเห็นของคุณในฟอรั่มการสนทนาของเรา!

ผู้เรียน ในแต่ละบทเรียน เริ่มต้นด้วยแบบทดสอบก่อนการบรรยาย และตามด้วยการอ่านเนื้อหาการบรรยาย ทำกิจกรรมต่างๆ และตรวจสอบความเข้าใจของคุณด้วยแบบทดสอบหลังการบรรยาย

เพื่อปรับปรุงประสบการณ์การเรียนรู้ของคุณ เชื่อมต่อกับเพื่อนของคุณเพื่อทำงานในโครงการร่วมกัน! ขอแนะนำให้พูดคุยกันในกระดานสนทนาของเรา ซึ่งทีมผู้ดูแลของเราพร้อมที่จะตอบคำถามของคุณ

เพื่อต่อยอดการศึกษาของคุณ เราขอแนะนำให้สำรวจ Microsoft Learn เพื่อดูสื่อการเรียนรู้เพิ่มเติม

การตั้งค่าสภาพแวดล้อมของคุณ

หลักสูตรนี้มีสภาพแวดล้อมการพัฒนาที่พร้อมลุย! เมื่อคุณเริ่มต้น คุณสามารถเลือกรันหลักสูตรใน Codespace ( สภาพแวดล้อมแบบใช้เบราว์เซอร์ ไม่จำเป็นต้องติดตั้ง ) หรือในเครื่องคอมพิวเตอร์ของคุณโดยใช้โปรแกรมแก้ไขข้อความ เช่น Visual Studio Code

สร้างพื้นที่เก็บข้อมูลของคุณ

เพื่อให้คุณสามารถบันทึกงานของคุณได้อย่างง่ายดาย ขอแนะนำให้คุณสร้างสำเนาของที่เก็บนี้ของคุณเอง คุณสามารถทำได้โดยคลิกปุ่ม ใช้เทมเพลตนี้ ที่ด้านบนของหน้า สิ่งนี้จะสร้างพื้นที่เก็บข้อมูลใหม่ในบัญชี GitHub ของคุณพร้อมสำเนาหลักสูตร

ทำตามขั้นตอนเหล่านี้:

แยกพื้นที่เก็บข้อมูล : คลิกที่ปุ่ม "แยก" ที่มุมขวาบนของหน้านี้
โคลนพื้นที่เก็บข้อมูล : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

ดำเนินหลักสูตรใน Codespace

ในสำเนาของที่เก็บนี้ที่คุณสร้างขึ้น ให้คลิกปุ่ม โค้ด และเลือก เปิดด้วย Codespaces สิ่งนี้จะสร้าง Codespace ใหม่เพื่อให้คุณทำงาน

สร้างโค๊ดสเปซ

เรียกใช้หลักสูตรภายในเครื่องคอมพิวเตอร์ของคุณ

หากต้องการเรียกใช้หลักสูตรนี้ในเครื่องคอมพิวเตอร์ของคุณ คุณจะต้องมีโปรแกรมแก้ไขข้อความ เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา Introduction to Programming Languages and Tools of the Trade จะนำคุณผ่านตัวเลือกต่างๆ สำหรับแต่ละเครื่องมือเหล่านี้ เพื่อให้คุณเลือกสิ่งที่ดีที่สุดสำหรับคุณ

คำแนะนำของเราคือใช้ Visual Studio Code เป็นตัวแก้ไขซึ่งมี Terminal ในตัวด้วย คุณสามารถดาวน์โหลด Visual Studio Code ได้ที่นี่

โคลนพื้นที่เก็บข้อมูลของคุณไปยังคอมพิวเตอร์ของคุณ คุณสามารถทำได้โดยคลิกปุ่ม รหัส แล้วคัดลอก URL:
จากนั้น เปิด Terminal ภายใน Visual Studio Code แล้วรันคำสั่งต่อไปนี้ โดยแทนที่ <your-repository-url> ด้วย URL ที่คุณเพิ่งคัดลอก:
```
 git clone <your-repository-url>
```
เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิก ไฟล์ > เปิดโฟลเดอร์ และเลือกโฟลเดอร์ที่คุณเพิ่งโคลน

ส่วนขยายรหัส Visual Studio ที่แนะนำ:
Live Server - เพื่อดูตัวอย่างหน้า HTML ภายใน Visual Studio Code
Copilot - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น

แต่ละบทเรียนประกอบด้วย:

บันทึกย่อเสริม
วิดีโอเสริมเสริม
แบบทดสอบก่อนบทเรียนอุ่นเครื่อง
บทเรียนการเขียน
สำหรับบทเรียนตามโครงงาน คำแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างโครงงาน
การตรวจสอบความรู้
ความท้าทาย
การอ่านเสริม
งานที่มอบหมาย
แบบทดสอบหลังบทเรียน

หมายเหตุเกี่ยวกับแบบทดสอบ : แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวมทั้งหมด 48 แบบคำถามละ 3 ข้อ สิ่งเหล่านี้เชื่อมโยงจากภายในบทเรียนที่แอปแบบทดสอบสามารถเรียกใช้ในเครื่องหรือปรับใช้กับ Azure ทำตามคำแนะนำในโฟลเดอร์ quiz-app พวกเขากำลังค่อยๆ ถูกแปลเป็นภาษาท้องถิ่น

บทเรียน

	ชื่อโครงการ	แนวคิดที่สอน	วัตถุประสงค์การเรียนรู้	บทเรียนที่เชื่อมโยง	ผู้เขียน
01	เริ่มต้นใช้งาน	รู้เบื้องต้นเกี่ยวกับการเขียนโปรแกรมและเครื่องมือของการค้า	เรียนรู้พื้นฐานเบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานของตนได้	ข้อมูลเบื้องต้นเกี่ยวกับภาษาการเขียนโปรแกรมและเครื่องมือของการค้า	จัสมิน
02	เริ่มต้นใช้งาน	พื้นฐานของ GitHub รวมถึงการทำงานร่วมกับทีม	วิธีใช้ GitHub ในโครงการของคุณ วิธีทำงานร่วมกับผู้อื่นบนฐานโค้ด	ข้อมูลเบื้องต้นเกี่ยวกับ GitHub	พื้น
03	เริ่มต้นใช้งาน	การเข้าถึง	เรียนรู้พื้นฐานของการเข้าถึงเว็บ	ความรู้พื้นฐานด้านการเข้าถึง	คริสโตเฟอร์
04	ข้อมูลพื้นฐานเกี่ยวกับ JS	ประเภทข้อมูลจาวาสคริปต์	พื้นฐานของชนิดข้อมูล JavaScript	ประเภทข้อมูล	จัสมิน
05	ข้อมูลพื้นฐานเกี่ยวกับ JS	ฟังก์ชั่นและวิธีการ	เรียนรู้เกี่ยวกับฟังก์ชันและวิธีการในการจัดการโฟลว์ลอจิกของแอปพลิเคชัน	ฟังก์ชั่นและวิธีการ	จัสมินและคริสโตเฟอร์
06	ข้อมูลพื้นฐานเกี่ยวกับ JS	การตัดสินใจกับเจส	เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ	การตัดสินใจ	จัสมิน
07	ข้อมูลพื้นฐานเกี่ยวกับ JS	อาร์เรย์และลูป	ทำงานกับข้อมูลโดยใช้อาร์เรย์และลูปใน JavaScript	อาร์เรย์และลูป	จัสมิน
08	สวนขวด	HTML ในทางปฏิบัติ	สร้าง HTML เพื่อสร้างสวนขวดออนไลน์ โดยเน้นที่การสร้างเลย์เอาต์	รู้เบื้องต้นเกี่ยวกับ HTML	เจน
09	สวนขวด	CSS ในทางปฏิบัติ	สร้าง CSS เพื่อจัดสไตล์สวนขวดออนไลน์ โดยเน้นไปที่พื้นฐานของ CSS รวมถึงการทำให้เพจตอบสนอง	ความรู้เบื้องต้นเกี่ยวกับ CSS	เจน
10	สวนขวด	การปิด JavaScript, การจัดการ DOM	สร้าง JavaScript เพื่อทำให้ฟังก์ชัน Terrarium เป็นอินเทอร์เฟซแบบลาก/วาง โดยเน้นที่การปิดและการจัดการ DOM	การปิด JavaScript, การจัดการ DOM	เจน
11	เกมพิมพ์ดีด	สร้างเกมพิมพ์ดีด	เรียนรู้วิธีใช้เหตุการณ์แป้นพิมพ์เพื่อขับเคลื่อนตรรกะของแอป JavaScript ของคุณ	การเขียนโปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์	คริสโตเฟอร์
12	ส่วนขยายเบราว์เซอร์สีเขียว	การทำงานกับเบราว์เซอร์	เรียนรู้วิธีการทำงานของเบราว์เซอร์ ประวัติความเป็นมา และวิธีการสนับสนุนองค์ประกอบแรกของส่วนขยายเบราว์เซอร์	เกี่ยวกับเบราว์เซอร์	เจน
13	ส่วนขยายเบราว์เซอร์สีเขียว	การสร้างแบบฟอร์ม การเรียก API และการจัดเก็บตัวแปรในที่จัดเก็บในตัวเครื่อง	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียกใช้ API โดยใช้ตัวแปรที่จัดเก็บไว้ในที่จัดเก็บในตัวเครื่อง	API แบบฟอร์ม และพื้นที่จัดเก็บในเครื่อง	เจน
14	ส่วนขยายเบราว์เซอร์สีเขียว	กระบวนการเบื้องหลังในเบราว์เซอร์ ประสิทธิภาพเว็บ	ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการเพิ่มประสิทธิภาพบางอย่างที่ต้องทำ	งานเบื้องหลังและประสิทธิภาพ	เจน
15	เกมอวกาศ	การพัฒนาเกมขั้นสูงเพิ่มเติมด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้งคลาสและองค์ประกอบและรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม	ความรู้เบื้องต้นเกี่ยวกับการพัฒนาเกมขั้นสูง	คริส
16	เกมอวกาศ	วาดภาพลงแคนวาส	เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบลงบนหน้าจอ	วาดภาพลงแคนวาส	คริส
17	เกมอวกาศ	การย้ายองค์ประกอบรอบๆ หน้าจอ	ค้นพบว่าองค์ประกอบต่างๆ สามารถเคลื่อนไหวได้อย่างไรโดยใช้พิกัดคาร์ทีเซียนและ Canvas API	การย้ายองค์ประกอบไปรอบๆ	คริส
18	เกมอวกาศ	การตรวจจับการชนกัน	ทำให้องค์ประกอบต่างๆ ชนกันและโต้ตอบกันโดยใช้การกดปุ่ม และมีฟังก์ชันคูลดาวน์เพื่อให้มั่นใจถึงประสิทธิภาพของเกม	การตรวจจับการชนกัน	คริส
19	เกมอวกาศ	กำลังเก็บคะแนน	คำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	การเก็บคะแนน	คริส
20	เกมอวกาศ	สิ้นสุดและเริ่มเกมใหม่	เรียนรู้เกี่ยวกับการสิ้นสุดและการรีสตาร์ทเกม รวมถึงการล้างทรัพย์สินและการรีเซ็ตค่าตัวแปร	เงื่อนไขการสิ้นสุด	คริส
21	แอพธนาคาร	เทมเพลต HTML และเส้นทางใน Web App	เรียนรู้วิธีสร้างโครงสร้างสถาปัตยกรรมของเว็บไซต์ที่มีหลายหน้าโดยใช้การกำหนดเส้นทางและเทมเพลต HTML	เทมเพลต HTML และเส้นทาง	โยฮัน
22	แอพธนาคาร	สร้างแบบฟอร์มเข้าสู่ระบบและลงทะเบียน	เรียนรู้เกี่ยวกับการสร้างแบบฟอร์มและการจัดการขั้นตอนการตรวจสอบความถูกต้อง	แบบฟอร์ม	โยฮัน
23	แอพธนาคาร	วิธีการดึงข้อมูลและการใช้ข้อมูล	ข้อมูลไหลเข้าและออกจากแอปของคุณอย่างไร วิธีดึงข้อมูล จัดเก็บ และกำจัดทิ้ง	ข้อมูล	โยฮัน
24	แอพธนาคาร	แนวคิดการจัดการของรัฐ	เรียนรู้วิธีที่แอปของคุณรักษาสถานะและวิธีจัดการโดยทางโปรแกรม	การจัดการของรัฐ	โยฮัน

การสอน

หลักสูตรของเราได้รับการออกแบบโดยคำนึงถึงหลักการสอนที่สำคัญสองประการ:

การเรียนรู้แบบโครงงาน
แบบทดสอบบ่อยๆ

โปรแกรมนี้สอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บในปัจจุบันใช้ นักเรียนจะมีโอกาสพัฒนาประสบการณ์ตรงโดยการสร้างเกมพิมพ์ดีด สวนขวดเสมือนจริง ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม เกมสไตล์ผู้รุกรานพื้นที่ และแอปธนาคารสำหรับธุรกิจ เมื่อจบซีรีส์นี้ นักเรียนจะมีความเข้าใจอย่างมั่นคงเกี่ยวกับการพัฒนาเว็บ

- คุณสามารถเรียนบทเรียนสองสามบทแรกในหลักสูตรนี้เป็นเส้นทางการเรียนรู้บน Microsoft Learn!

ด้วยการทำให้แน่ใจว่าเนื้อหาสอดคล้องกับโครงการ กระบวนการนี้จะทำให้นักเรียนมีส่วนร่วมมากขึ้น และการเก็บรักษาแนวคิดจะเพิ่มมากขึ้น นอกจากนี้เรายังเขียนบทเรียนเริ่มต้นหลายบทในพื้นฐาน JavaScript เพื่อแนะนำแนวคิดต่างๆ ควบคู่ไปกับวิดีโอจากคอลเลกชั่นวิดีโอการสอน "Beginners Series to: JavaScript" ซึ่งผู้เขียนบางคนมีส่วนร่วมในหลักสูตรนี้

นอกจากนี้ แบบทดสอบที่มีเดิมพันต่ำก่อนชั้นเรียนจะกำหนดเป้าหมายของนักเรียนในการเรียนรู้หัวข้อต่างๆ ในขณะที่แบบทดสอบที่สองหลังเลิกเรียนจะช่วยให้มั่นใจว่านักเรียนจะยังเรียนต่อไป หลักสูตรนี้ได้รับการออกแบบให้มีความยืดหยุ่นและสนุกสนาน และสามารถเรียนทั้งหมดหรือบางส่วนก็ได้ โครงการเริ่มต้นจากเล็กๆ และมีความซับซ้อนมากขึ้นเมื่อสิ้นสุดรอบ 12 สัปดาห์

แม้ว่าเราจะตั้งใจหลีกเลี่ยงการใช้เฟรมเวิร์ก JavaScript เพื่อมุ่งเน้นไปที่ทักษะพื้นฐานที่จำเป็นในฐานะนักพัฒนาเว็บก่อนที่จะใช้เฟรมเวิร์ก ขั้นตอนถัดไปที่ดีในการสำเร็จหลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านคอลเลกชั่นวิดีโออื่น: "Beginner Series to: โหนด js"

เยี่ยมชมหลักจรรยาบรรณและแนวทางการมีส่วนร่วมของเรา เรายินดีรับข้อเสนอแนะที่สร้างสรรค์ของคุณ!

การเข้าถึงแบบออฟไลน์

คุณสามารถเรียกใช้เอกสารนี้แบบออฟไลน์ได้โดยใช้ Docsify แยก repo นี้ ติดตั้ง Docsify บนเครื่องของคุณ จากนั้นในโฟลเดอร์รูทของ repo นี้ ให้พิมพ์ docsify serve เว็บไซต์จะให้บริการบนพอร์ต 3000 บน localhost ของคุณ: localhost:3000