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'

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

หากคุณต้องการสนับสนุนภาษาการแปลเพิ่มเติม รายการภาษาที่รองรับอยู่ที่ นี่

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

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

📣 ประกาศ - มีความท้าทายโหมด GitHub Copilot Agent ใหม่ให้ทำ!

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

📣 ประกาศ - โปรเจกต์ใหม่ที่สร้างด้วย Generative AI

โปรเจกต์ AI Assistant ใหม่เพิ่งถูกเพิ่ม ลองดู โปรเจกต์

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

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

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

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

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

• การกระตุ้นและการออกแบบคำกระตุ้น (prompt engineering)
• การสร้างแอปข้อความและภาพ
• แอปการค้นหา

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

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

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

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

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

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

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

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

สร้างที่เก็บของคุณเอง

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

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

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

ใช้งานหลักสูตรใน Codespace

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

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

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

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

1. โคลนที่เก็บข้อมูลของคุณมายังคอมพิวเตอร์โดยคลิกปุ่ม 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 - ช่วยคุณเขียนโค้ดได้เร็วขึ้น

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

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

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

🗃️ บทเรียน

	ชื่อโครงงาน	แนวคิดที่สอน	วัตถุประสงค์การเรียนรู้	บทเรียนที่ลิงก์	ผู้เขียน
01	เริ่มต้นใช้งาน	การแนะนำการเขียนโปรแกรมและเครื่องมือในการทำงาน	เรียนรู้พื้นฐานเบื้องหลังของภาษาโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของพวกเขา	แนะนำภาษาโปรแกรมและเครื่องมือ	Jasmine
02	เริ่มต้นใช้งาน	พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม	วิธีใช้ GitHub ในโปรเจกต์ของคุณ วิธีการร่วมมือกับผู้อื่นบนฐานโค้ด	แนะนำ GitHub	Floor
03	เริ่มต้นใช้งาน	การเข้าถึงได้	เรียนรู้พื้นฐานของการเข้าถึงเว็บ	พื้นฐานการเข้าถึง	Christopher
04	พื้นฐาน JS	ประเภทข้อมูลใน JavaScript	พื้นฐานของประเภทข้อมูลใน JavaScript	ประเภทข้อมูล	Jasmine
05	พื้นฐาน JS	ฟังก์ชันและเมธอด	เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการกับการไหลของตรรกะในแอปพลิเคชัน	ฟังก์ชันและเมธอด	Jasmine and Christopher
06	พื้นฐาน JS	การตัดสินใจด้วย JS	เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ	การตัดสินใจ	Jasmine
07	พื้นฐาน JS	อาร์เรย์และลูป	การทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript	อาร์เรย์และลูป	Jasmine
08	Terrarium	HTML ในการปฏิบัติ	สร้าง HTML เพื่อสร้าง terrarium ออนไลน์โดยเน้นการสร้างเลย์เอาต์	แนะนำ HTML	Jen
09	Terrarium	CSS ในการปฏิบัติ	สร้าง CSS เพื่อจัดแต่ง terrarium ออนไลน์โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง	แนะนำ CSS	Jen
10	Terrarium	JavaScript Closures และการจัดการ DOM	สร้าง JavaScript เพื่อทำให้ terrarium ทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้น closures และการจัดการ DOM	JavaScript Closures และการจัดการ DOM	Jen
11	Typing Game	สร้างเกมพิมพ์	เรียนรู้วิธีใช้เหตุการณ์คีย์บอร์ดเพื่อขับเคลื่อนตรรกะของแอป JavaScript ของคุณ	การเขียนโปรแกรมแบบอิงเหตุการณ์	Christopher
12	ส่วนขยายเบราว์เซอร์สีเขียว	การทำงานกับเบราว์เซอร์	เรียนรู้วิธีที่เบราว์เซอร์ทำงาน ประวัติของมัน และวิธีเริ่มต้นสร้างส่วนขยายเบราว์เซอร์	เกี่ยวกับเบราว์เซอร์	Jen
13	ส่วนขยายเบราว์เซอร์สีเขียว	สร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บไว้ใน local storage	APIs, ฟอร์ม และการเก็บข้อมูลในเครื่อง	Jen
14	ส่วนขยายเบราว์เซอร์สีเขียว	กระบวนการเบื้องหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ	ใช้กระบวนการเบื้องหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการปรับปรุงบางอย่างที่ทำได้	งานเบื้องหลังและประสิทธิภาพ	Jen
15	Space Game	การพัฒนาเกมขั้นสูงด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้งคลาสและการประกอบรวมถึงรูปแบบ Pub/Sub เพื่อเตรียมตัวสำหรับการสร้างเกม	แนะนำการพัฒนาเกมขั้นสูง	Chris
16	Space Game	การวาดลงในแคนวาส	เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบลงบนหน้าจอ	การวาดบนแคนวาส	Chris
17	Space Game	การเคลื่อนย้ายองค์ประกอบบนหน้าจอ	ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนที่โดยใช้พิกัดคาร์ทีเซียนและ Canvas API	การเคลื่อนย้ายองค์ประกอบ	Chris
18	Space Game	การตรวจจับการชน	ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้ keypress พร้อมทั้งเพิ่มฟังก์ชัน cooldown เพื่อให้แน่ใจว่าเกมทำงานได้ราบรื่น	การตรวจจับการชน	Chris
19	Space Game	การเก็บคะแนน	ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	การเก็บคะแนน	Chris
20	Space Game	การจบและรีสตาร์ทเกม	เรียนรู้เกี่ยวกับการจบและรีสตาร์ทเกม รวมถึงการล้างทรัพยากรและรีเซ็ตค่าตัวแปร	เงื่อนไขการจบ	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 รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บในปัจจุบันใช้ นักเรียนจะมีโอกาสพัฒนาประสบการณ์จริงโดยการสร้างเกมพิมพ์, terrarium เสมือน, ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม, เกมสไตล์ space invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบชุดบทเรียนนี้ นักเรียนจะได้รับความเข้าใจที่แข็งแกร่งเกี่ยวกับการพัฒนาเว็บ

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

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

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

แม้ว่าเราจะจงใจหลีกเลี่ยงการแนะนำ JavaScript frameworks เพื่อมุ่งเน้นทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนจะใช้ framework ขั้นตอนถัดไปที่ดีสำหรับการเรียนหลักสูตรนี้คือการเรียนรู้เกี่ยวกับ 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

Getting Help

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

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

License

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

---

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