Web-Dev-For-Beginners/translations/th

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

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

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

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

1. Fork Repository: คลิก
2. Clone Repository: 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 | Korean | Lithuanian | Malay | Marathi | Nepali | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Thai | Turkish | Ukrainian | Urdu | Vietnamese

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

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

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

📣 ประกาศ - ความท้าทายใหม่ในโหมด Agent ของ GitHub Copilot!

เพิ่มความท้าทายใหม่แล้ว ค้นหา "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 และแอปคู่หูของเรา
• เนื้อหาสนุกและน่าสนใจ คุณจะได้เดินทางข้ามเวลา!

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

• การสร้างคำสั่งและการออกแบบคำสั่ง
• การสร้างแอปข้อความและภาพ
• แอปค้นหา

เยี่ยมชม 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 ใหม่สำหรับคุณในการทำงาน

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

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

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

1. Clone Repository ของคุณลงในคอมพิวเตอร์ คุณสามารถทำได้โดยคลิกปุ่ม Code และคัดลอก URL:

   CodeSpace

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

   git clone <your-repository-url>
   

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

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

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

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

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

หมายเหตุเกี่ยวกับแบบทดสอบ: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app มีทั้งหมด 48 แบบทดสอบ แต่ละแบบมี 3 คำถาม สามารถเข้าถึงได้ ที่นี่ แอปแบบทดสอบสามารถรันได้ในเครื่องหรือเผยแพร่ไปยัง 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	อาร์เรย์และลูป	ทำงานกับข้อมูลโดยใช้อาร์เรย์และลูปใน 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	Green Browser Extension	การทำงานกับเบราว์เซอร์	เรียนรู้ว่าเบราว์เซอร์ทำงานอย่างไร ประวัติของมัน และวิธีสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์	เกี่ยวกับเบราว์เซอร์	Jen
13	Green Browser Extension	สร้างฟอร์ม เรียก API และจัดเก็บตัวแปรใน local storage	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่จัดเก็บใน local storage	APIs, ฟอร์ม และ local storage	Jen
14	Green Browser Extension	กระบวนการเบื้องหลังในเบราว์เซอร์ ประสิทธิภาพเว็บ	ใช้กระบวนการเบื้องหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการปรับปรุงบางอย่าง	งานเบื้องหลังและประสิทธิภาพ	Jen
15	Space Game	การพัฒนาเกมขั้นสูงเพิ่มเติมด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมสร้างเกม	แนะนำการพัฒนาเกมขั้นสูง	Chris
16	Space Game	การวาดลง canvas	เรียนรู้เกี่ยวกับ Canvas API ที่ใช้วาดองค์ประกอบลงบนหน้าจอ	การวาดลง canvas	Chris
17	Space Game	การเคลื่อนย้ายองค์ประกอบบนหน้าจอ	ค้นพบว่าองค์ประกอบสามารถเคลื่อนไหวได้อย่างไรโดยใช้พิกัด Cartesian และ Canvas API	การเคลื่อนย้ายองค์ประกอบ	Chris
18	Space Game	การตรวจจับการชนกัน	ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่มและให้ฟังก์ชัน cooldown เพื่อให้เกมมีประสิทธิภาพ	การตรวจจับการชนกัน	Chris
19	Space Game	การเก็บคะแนน	ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	การเก็บคะแนน	Chris
20	Space Game	การสิ้นสุดและเริ่มเกมใหม่	เรียนรู้เกี่ยวกับการสิ้นสุดและเริ่มเกมใหม่ รวมถึงการล้างข้อมูลและรีเซ็ตค่าตัวแปร	เงื่อนไขการสิ้นสุด	Chris
21	Banking App	เทมเพลต HTML และเส้นทางในเว็บแอป	เรียนรู้วิธีสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ routing และเทมเพลต HTML	เทมเพลต HTML และเส้นทาง	Yohan
22	Banking App	สร้างฟอร์มเข้าสู่ระบบและลงทะเบียน	เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการกระบวนการตรวจสอบ	ฟอร์ม	Yohan
23	Banking App	วิธีการดึงและใช้ข้อมูล	วิธีการที่ข้อมูลไหลเข้าและออกจากแอปของคุณ วิธีดึงข้อมูล จัดเก็บ และลบข้อมูล	ข้อมูล	Yohan
24	Banking App	แนวคิดการจัดการสถานะ	เรียนรู้ว่าแอปของคุณเก็บสถานะอย่างไรและวิธีจัดการสถานะนั้นด้วยโปรแกรม	การจัดการสถานะ	Yohan
25	Browser/VScode Code	การทำงานกับ VScode	เรียนรู้วิธีใช้โปรแกรมแก้ไขโค้ด	ใช้โปรแกรมแก้ไขโค้ด VScode	Chris
26	AI Assistants	การทำงานกับ AI	เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง	โครงการผู้ช่วย AI	Chris

🏫 หลักการสอน

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

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

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

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

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

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

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

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

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

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

📘 PDF

PDF ของบทเรียนทั้งหมดสามารถพบได้ ที่นี่.

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

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

Azure / Edge / MCP / Agents

---

ซีรีส์ Generative AI

---

การเรียนรู้หลัก

---

ซีรีส์ Copilot

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

หากคุณติดปัญหาหรือมีคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วม:

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

ใบอนุญาต

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

---

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