Web-Dev-For-Beginners/translations/th

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

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

เข้าร่วม Discord ของ Azure AI Foundry เพื่อพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน

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

1. Fork ที่เก็บข้อมูล: คลิก
2. โคลนที่เก็บข้อมูล: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. เข้าร่วม The 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 | Khmer | 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"

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

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

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

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

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

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

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

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

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

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

🗃️ บทเรียน

	ชื่อโปรเจค	แนวคิดที่สอน	วัตถุประสงค์การเรียนรู้	บทเรียนที่เชื่อมโยง	ผู้แต่ง
01	Getting Started	บทนำการเขียนโปรแกรมและเครื่องมือที่ใช้	เรียนรู้พื้นฐานเบื้องหลังของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยผู้พัฒนาอาชีพทำงานของตนเอง	บทนำเกี่ยวกับภาษาการเขียนโปรแกรมและเครื่องมือ	Jasmine
02	Getting Started	พื้นฐานของ GitHub รวมถึงการทำงานร่วมกับทีม	วิธีการใช้ GitHub ในโปรเจคของคุณ วิธีการทำงานร่วมกับผู้อื่นบนฐานโค้ด	บทนำสู่ GitHub	Floor
03	Getting Started	การเข้าถึง	เรียนรู้พื้นฐานของการเข้าใช้งานเว็บ	พื้นฐานเกี่ยวกับการเข้าถึง	Christopher
04	JS Basics	ประเภทข้อมูล JavaScript	พื้นฐานของประเภทข้อมูลใน JavaScript	ประเภทข้อมูล	Jasmine
05	JS Basics	ฟังก์ชันและเมธอด	เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลำดับการทำงานของแอปพลิเคชัน	ฟังก์ชันและเมธอด	Jasmine and Christopher
06	JS Basics	การตัดสินใจด้วย JS	เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีตัดสินใจ	การตัดสินใจ	Jasmine
07	JS Basics	อาร์เรย์และลูป	ทำงานกับข้อมูลโดยใช้ 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	Space Game	การพัฒนาเกมขั้นสูงด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้คลาสและคอมโพสิชันและรูปแบบ Pub/Sub เตรียมพร้อมสำหรับการสร้างเกม	บทนำสู่การพัฒนาเกมขั้นสูง	Chris
16	Space Game	การวาดลงบน canvas	เรียนรู้เกี่ยวกับ Canvas API ซึ่งใช้ในการวาดองค์ประกอบลงบนหน้าจอ	การวาดลงบน Canvas	Chris
17	Space Game	การเคลื่อนย้ายองค์ประกอบบนหน้าจอ	ค้นพบว่าวัตถุสามารถเคลื่อนที่ได้อย่างไรโดยใช้พิกัดคาร์ทีเซียนและ Canvas API	การเคลื่อนย้ายองค์ประกอบ	Chris
18	Space Game	การตรวจจับการชน	ทำให้องค์ประกอบชนและตอบสนองต่อกันโดยใช้การกดปุ่มและมีฟังก์ชันพักเพื่อรักษาประสิทธิภาพของเกม	การตรวจจับการชน	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 รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บใช้ในปัจจุบัน นักเรียนจะมีโอกาสในการพัฒนาประสบการณ์จริงโดยสร้างเกมพิมพ์ เทอราเรียมเสมือนจริง ส่วนขยายเบราว์เซอร์ที่เป็นมิตรกับสิ่งแวดล้อม เกมสไตล์ Space Invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบชุดบทเรียนนี้ นักเรียนจะมีความเข้าใจที่มั่นคงเกี่ยวกับการพัฒนาเว็บ

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

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

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

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

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

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

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

📘 PDF

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

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

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

LangChain

Azure / Edge / MCP / Agents

---

ชุด Generative AI

---

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

---

ชุด Copilot

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

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

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

ใบอนุญาต

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

---

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