Web-Dev-For-Beginners/translations/th

การพัฒนาเว็บสำหรับผู้เริ่มต้น - หลักสูตรการเรียนการสอน

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

เข้าร่วมชุมชน Azure AI Foundry Discord

ทำตามขั้นตอนเหล่านี้เพื่อเริ่มใช้ทรัพยากรเหล่านี้:

1. Fork ที่เก็บข้อมูล: คลิก
2. โคลนที่เก็บข้อมูล: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. เข้าร่วม Azure AI Foundry Discord และพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน

🌐 รองรับหลายภาษา

รองรับผ่าน GitHub Action (อัตโนมัติและอัปเดตตลอดเวลา)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

ต้องการโคลนในเครื่องไหม?

ที่เก็บนี้รวมการแปลกว่า 50 ภาษา ซึ่งเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่รวมการแปล ให้ใช้ sparse checkout:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

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

หากต้องการให้รองรับภาษาแปลเพิ่มเติม ดูรายการได้ที่นี่ here

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

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

📣 ประกาศ - โหมด GitHub Copilot Agent ใหม่กับความท้าทายที่ต้องทำให้เสร็จ!

มีความท้าทายใหม่เพิ่มเข้ามา ค้นหา "GitHub Copilot Agent Challenge 🚀" ในหลายบท ซึ่งเป็นความท้าทายใหม่ให้คุณทำโดยใช้ GitHub Copilot และโหมด Agent หากคุณยังไม่เคยใช้โหมด Agent มาก่อน โหมดนี้ไม่เพียงแต่สร้างข้อความเท่านั้น แต่สามารถสร้างและแก้ไขไฟล์, รันคำสั่ง และอื่นๆ ได้อีกด้วย

📣 ประกาศ - โครงการใหม่สำหรับการสร้างโดยใช้ Generative AI

มีโครงการผู้ช่วย AI ใหม่เพิ่มเข้ามา ดูได้ที่ โครงการ

📣 ประกาศ - หลักสูตรใหม่ เกี่ยวกับ Generative AI สำหรับ JavaScript เพิ่งเปิดตัว

อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา!

เยี่ยมชม https://aka.ms/genai-js-course เพื่อเริ่มต้น!

• บทเรียนครอบคลุมตั้งแต่พื้นฐานถึง RAG
• โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปเสริมของเรา
• เรื่องราวสนุกสนานและน่าสนใจ คุณจะท่องเวลาย้อนอดีตได้!

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

• การเขียน prompt และวิศวกรรม prompt
• การสร้างแอปข้อความและภาพ
• แอปค้นหา

เยี่ยมชม https://aka.ms/genai-js-course เพื่อเริ่มต้น!

🌱 เริ่มต้น

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

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

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

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

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

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

สร้าง repository ของคุณ

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

ทำตามขั้นตอนดังนี้:

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

รันหลักสูตรใน Codespace

ในสำเนาของ repository ที่คุณสร้างขึ้น ให้คลิกปุ่ม Code และเลือก Open with Codespaces ซึ่งจะสร้าง Codespace ใหม่ให้คุณทำงานภายใน

รันหลักสูตรในเครื่องของคุณ

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

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

1. โคลน repository ของคุณไปยังคอมพิวเตอร์ คลิกที่ปุ่ม Code แล้วคัดลอก URL:

   CodeSpace จากนั้น เปิด Terminal ภายใน Visual Studio Code และรันคำสั่งต่อไปนี้ โดยแทนที่ <your-repository-url> ด้วย URL ที่คุณเพิ่งคัดลอกมา:

   git clone <your-repository-url>
   

2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิกที่ File > Open Folder และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา

ส่วนขยาย Visual Studio Code ที่แนะนำ:

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

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

• สเก็ตช์โน้ตเสริม (ตัวเลือก)
• วิดีโอเสริม (ตัวเลือก)
• แบบทดสอบวอร์มอัพก่อนบทเรียน
• บทเรียนที่เขียนไว้
• สำหรับบทเรียนที่เน้นโครงการ มีคำแนะนำทีละขั้นตอนเกี่ยวกับการสร้างโครงการ
• การเช็คความรู้
• ความท้าทาย
• การอ่านเสริม
• การบ้าน
• แบบทดสอบหลังบทเรียน

หมายเหตุเกี่ยวกับแบบทดสอบ: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละแบบมีคำถามสามข้อ สามารถเข้าถึงได้ที่ นี่ แอปแบบทดสอบสามารถรันได้แบบออฟไลน์หรือเผยแพร่บน Azure; ทำตามคำแนะนำในโฟลเดอร์ quiz-app

🗃️ บทเรียน

	ชื่อโครงการ	แนวคิดที่สอน	วัตถุประสงค์การเรียนรู้	บทเรียนที่ลิงก์	ผู้แต่ง
01	การเริ่มต้น	บทนำสู่การเขียนโปรแกรมและเครื่องมือการทำงาน	เรียนรู้พื้นฐานเบื้องต้นของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของตน	บทนำสู่ภาษาการเขียนโปรแกรมและเครื่องมือ	Jasmine
02	การเริ่มต้น	พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม	วิธีใช้ GitHub ในโครงการของคุณ วิธีการทำงานร่วมกับผู้อื่นในฐานะโค้ด	บทนำสู่ GitHub	Floor
03	การเริ่มต้น	การเข้าถึง	เรียนรู้พื้นฐานของการเข้าถึงเว็บ	พื้นฐานการเข้าถึง	Christopher
04	พื้นฐาน JS	ประเภทข้อมูล JavaScript	พื้นฐานของประเภทข้อมูลใน JavaScript	ประเภทข้อมูล	Jasmine
05	พื้นฐาน JS	ฟังก์ชันและเมธอด	เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลอจิกของแอป	ฟังก์ชันและเมธอด	Jasmine และ Christopher
06	พื้นฐาน JS	การตัดสินใจด้วย JS	เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ	การตัดสินใจ	Jasmine
07	พื้นฐาน JS	อาร์เรย์และลูป	ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript	อาร์เรย์และลูป	Jasmine
08	Terrarium	HTML ในการปฏิบัติ	สร้าง HTML เพื่อทำกระจกสวนออนไลน์ โดยเน้นการสร้างเลย์เอาต์	บทนำสู่ HTML	Jen
09	Terrarium	CSS ในการปฏิบัติ	สร้าง CSS เพื่อจัดแต่งสไตล์กระจกสวนออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง	บทนำสู่ CSS	Jen
10	Terrarium	JavaScript Closures, การจัดการ DOM	สร้าง JavaScript เพื่อให้กระจกสวนทำงานแบบลากและวาง โดยเน้น closures และการจัดการ DOM	JavaScript Closures, การจัดการ DOM	Jen
11	Typing Game	สร้างเกมพิมพ์	เรียนรู้การใช้เหตุการณ์แป้นพิมพ์เพื่อควบคุมลอจิกของแอป JavaScript ของคุณ	การเขียนโปรแกรมขับเคลื่อนด้วยเหตุการณ์	Christopher
12	ส่วนขยายเบราว์เซอร์สีเขียว	การทำงานกับเบราว์เซอร์	เรียนรู้การทำงานของเบราว์เซอร์ ประวัติ และวิธีจัดโครงสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์	เกี่ยวกับเบราว์เซอร์	Jen
13	ส่วนขยายเบราว์เซอร์สีเขียว	การสร้างฟอร์ม เรียกใช้ API และเก็บข้อมูลใน local storage	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage	API, ฟอร์ม และ Local Storage	Jen
14	ส่วนขยายเบราว์เซอร์สีเขียว	กระบวนการทำงานพื้นหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ	ใช้กระบวนการทำงานพื้นหลังของเบราว์เซอร์ในการจัดการไอคอนของส่วนขยาย; เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการเพิ่มประสิทธิภาพบางอย่าง	งานพื้นหลังและประสิทธิภาพ	Jen
15	เกมอวกาศ	การพัฒนาเกมขั้นสูงด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมตัวสำหรับการสร้างเกม	บทนำสู่การพัฒนาเกมขั้นสูง	Chris
16	เกมอวกาศ	การวาดลงบนแคนวาส	เรียนรู้เกี่ยวกับ Canvas API ซึ่งใช้ในการวาดองค์ประกอบลงบนหน้าจอ	การวาดบนแคนวาส	Chris
17	เกมอวกาศ	การเคลื่อนย้ายองค์ประกอบรอบหน้าจอ	ค้นพบว่าธรรมชาติของการเคลื่อนไหวขององค์ประกอบใช้พิกัดคาร์ทีเซียนและ Canvas API อย่างไร	การเคลื่อนย้ายองค์ประกอบรอบหน้าจอ	Chris
18	เกมอวกาศ	การตรวจจับการชน	ทำให้องค์ประกอบชนกันและตอบสนองต่อกัน โดยใช้การกดแป้นพิมพ์และเพิ่มฟังก์ชัน cooldown เพื่อรักษาประสิทธิภาพเกม	การตรวจจับการชน	Chris
19	เกมอวกาศ	การบันทึกคะแนน	การคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	การบันทึกคะแนน	Chris
20	เกมอวกาศ	การจบเกมและเริ่มเกมใหม่	เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการจัดการทรัพยากรและการรีเซ็ตค่าตัวแปร	เงื่อนไขการจบเกม	Chris
21	แอปธนาคาร	เทมเพลต HTML และเส้นทางในเว็บแอป	เรียนรู้วิธีสร้างโครงสร้างเว็บไซต์หลายหน้าโดยใช้ routing และเทมเพลต HTML	เทมเพลต HTML และเส้นทาง	Yohan
22	แอปธนาคาร	สร้างฟอร์มล็อกอินและลงทะเบียน	เรียนรู้การสร้างฟอร์มและการทำตรวจสอบความถูกต้อง	ฟอร์ม	Yohan
23	แอปธนาคาร	วิธีการดึงและใช้ข้อมูล	วิธีการรับข้อมูลเข้าและออกจากแอปของคุณ วิธีดึงข้อมูล การเก็บ และการกำจัดข้อมูล	ข้อมูล	Yohan
24	แอปธนาคาร	แนวคิดของการจัดการสถานะ	เรียนรู้วิธีที่แอปของคุณเก็บรักษาสถานะและจัดการสถานะแบบโปรแกรม	การจัดการสถานะ	Yohan
25	โค้ดเบราว์เซอร์/VScode	การทำงานกับ VScode	เรียนรู้การใช้โปรแกรมแก้ไขโค้ด	ใช้โปรแกรมแก้ไขโค้ด VScode	Chris
26	ผู้ช่วย AI	การทำงานกับ AI	เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง	โครงการผู้ช่วย AI	Chris

🏫 วิธีการสอน

หลักสูตรของเราออกแบบโดยมีหลักการทางการศึกษาสำคัญสองประการ:

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

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

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

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

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

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

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

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

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

📘 PDF

ไฟล์ PDF ของบทเรียนทั้งหมดหาได้ที่ นี่.

🎒 หลักสูตรอื่น ๆ

ทีมของเราผลิตหลักสูตรอื่นๆ ด้วย! เชิญชม:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

การขอความช่วยเหลือ

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

ถ้าคุณมีข้อเสนอแนะเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดในการสร้าง สามารถเยี่ยมชมได้ที่:

ใบอนุญาต

ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ LICENSE สำหรับข้อมูลเพิ่มเติม

---

ข้อจำกัดความรับผิดชอบ:
เอกสารฉบับนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดใด ๆ ที่เกิดขึ้นจากการใช้การแปลนี้