Web-Dev-For-Beginners/translations/th

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

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

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

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

1. ForkRepository: คลิก
2. CloneRepository: 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:

Bash / macOS / Linux:

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'

CMD (Windows):

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 ใหม่ ตรวจสอบได้ที่ project

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

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

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

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

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

• การเขียนพรอมต์และการออกแบบพรอมต์
• การสร้างแอปข้อความและภาพ
• แอปค้นหา

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

🌱 การเริ่มต้น

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

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

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

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

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

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

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

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

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

1. Fork Repository: คลิกปุ่ม "Fork" ที่มุมขวาบนของหน้านี้
2. Clone Repository: 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 ได้ที่นี่ here

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 - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น

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

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

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

🗃️ บทเรียน

	ชื่อโครงการ	แนวคิดที่สอน	วัตถุประสงค์การเรียนรู้	บทเรียนที่ลิงก์	ผู้เขียน
01	เริ่มต้นใช้งาน	บทนำสู่การเขียนโปรแกรมและเครื่องมือในงานพัฒนา	เรียนรู้พื้นฐานเบื้องต้นที่อยู่เบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่ และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้	Intro to Programming Languages and Tools of the Trade	Jasmine
02	เริ่มต้นใช้งาน	พื้นฐาน GitHub รวมถึงการทำงานเป็นทีม	วิธีการใช้ GitHub ในโครงการของคุณ วิธีการร่วมมือกับผู้อื่นในฐานข้อมูลโค้ด	Intro to GitHub	Floor
03	เริ่มต้นใช้งาน	การเข้าถึง	เรียนรู้พื้นฐานการเข้าถึงเว็บ	Accessibility Fundamentals	Christopher
04	JS เบื้องต้น	ประเภทข้อมูลใน JavaScript	พื้นฐานของประเภทข้อมูลใน JavaScript	Data Types	Jasmine
05	JS เบื้องต้น	ฟังก์ชันและเมธอด	เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลอจิกของแอปพลิเคชัน	Functions and Methods	Jasmine and Christopher
06	JS เบื้องต้น	การตัดสินใจด้วย JS	เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ	Making Decisions	Jasmine
07	JS เบื้องต้น	อาร์เรย์และลูป	ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML ในการปฏิบัติ	สร้าง HTML เพื่อสร้าง Terrarium ออนไลน์ โดยเน้นการสร้างเลย์เอาต์	Introduction to HTML	Jen
09	Terrarium	CSS ในการปฏิบัติ	สร้าง CSS เพื่อจัดสไตล์ Terrarium ออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, การจัดการ DOM	สร้าง JavaScript เพื่อให้ Terrarium ทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้นที่ closures และการจัดการ DOM	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	สร้างเกมพิมพ์	เรียนรู้วิธีใช้เหตุการณ์คีย์บอร์ดเพื่อควบคุมลอจิกของแอป JavaScript ของคุณ	Event-Driven Programming	Christopher
12	ส่วนขยายเบราว์เซอร์สีเขียว	การทำงานกับเบราว์เซอร์	เรียนรู้ว่าเบราว์เซอร์ทำงานอย่างไร ประวัติ และวิธีเริ่มต้นส่วนขยายเบราว์เซอร์	About Browsers	Jen
13	ส่วนขยายเบราว์เซอร์สีเขียว	สร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage	สร้างส่วนขยายเบราว์เซอร์ของคุณโดยใช้ JavaScript เพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage	APIs, Forms, and Local Storage	Jen
14	ส่วนขยายเบราว์เซอร์สีเขียว	กระบวนการพื้นหลังในเบราว์เซอร์และประสิทธิภาพเว็บ	ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการปรับปรุงบางอย่างเพื่อทำให้ดีขึ้น	Background Tasks and Performance	Jen
15	Space Game	การพัฒนาเกมขั้นสูงด้วย JavaScript	เรียนรู้เกี่ยวกับ Inheritance โดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม	Introduction to Advanced Game Development	Chris
16	Space Game	การวาดบน canvas	เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบบนหน้าจอ	Drawing to Canvas	Chris
17	Space Game	การเคลื่อนย้ายองค์ประกอบรอบจอ	ค้นพบว่าสิ่งต่าง ๆ สามารถเคลื่อนไหวโดยใช้พิกัดคาร์ทีเซียนและ Canvas API ได้อย่างไร	Moving Elements Around	Chris
18	Space Game	การตรวจจับการชน	ทำให้องค์ประกอบชนและตอบสนองต่อกันโดยใช้การกดปุ่ม keypress พร้อมกับฟังก์ชัน cooldown เพื่อประสิทธิภาพของเกม	Collision Detection	Chris
19	Space Game	การเก็บคะแนน	ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	Keeping Score	Chris
20	Space Game	การจบและเริ่มเกมใหม่	เรียนรู้เกี่ยวกับการจบเกมและเริ่มเกมใหม่ รวมถึงการทำความสะอาดทรัพยากรและรีเซ็ตค่าตัวแปร	The Ending Condition	Chris
21	Banking App	เทมเพลต HTML และการกำหนดเส้นทางในเว็บแอป	เรียนรู้วิธีสร้างโครงสร้างเว็บไซต์หลายหน้าโดยใช้ routing และเทมเพลต HTML	HTML Templates and Routes	Yohan
22	Banking App	สร้างฟอร์มล็อกอินและลงทะเบียน	เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการการตรวจสอบความถูกต้อง	Forms	Yohan
23	Banking App	วิธีการดึงและใช้ข้อมูล	วิธีการไหลของข้อมูลเข้าและออกจากแอปของคุณ วิธีดึงข้อมูล เก็บข้อมูล และจัดการข้อมูล	Data	Yohan
24	Banking App	แนวคิดการจัดการสถานะ	เรียนรู้วิธีที่แอปของคุณเก็บสถานะและวิธีจัดการสถานะเหล่านั้นโดยใช้โปรแกรม	State Management	Yohan
25	Browser/VScode Code	การทำงานกับ VScode	เรียนรู้วิธีใช้โปรแกรมแก้ไขโค้ด	Use VScode Code Editor	Chris
26	AI Assistants	การทำงานกับ AI	เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง	AI Assistant project	Chris

🏫 การสอน

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

• การเรียนรู้โดยใช้โครงงานเป็นฐาน
• การทำแบบทดสอบบ่อยครั้ง

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

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

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

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

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

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

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

คุณสามารถรันเอกสารนี้แบบออฟไลน์ได้โดยใช้ 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 ถึงแม้เราจะพยายามรักษาความถูกต้อง แต่กรุณาทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อน เอกสารต้นฉบับในภาษาดั้งเดิมถือเป็นแหล่งข้อมูลที่เชื่อถือได้ หากเป็นข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดขึ้นจากการใช้การแปลนี้