README.md

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

เรียนรู้พื้นฐานของการพัฒนาเว็บกับหลักสูตรครอบคลุม 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. เข้าร่วม 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
• การสร้างแอปข้อความและรูปภาพ
• แอปค้นหา

เยี่ยมชม 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 ใหม่ให้คุณทำงานได้

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

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

เราขอแนะนำให้ใช้ 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 แบบทดสอบ แต่ละแบบมีสามคำถาม คุณสามารถเข้าถึงได้ที่ นี่ แอปแบบทดสอบสามารถรันแบบออฟไลน์หรือเผยแพร่บน Azure ได้; โปรดปฏิบัติตามคำแนะนำในโฟลเดอร์ quiz-app

🗃️ บทเรียน

	ชื่อโปรเจค	แนวคิดที่สอน	เป้าหมายการเรียนรู้	บทเรียนที่เชื่อมโยง	ผู้เขียน
01	Getting Started	บทนำสู่การเขียนโปรแกรมและเครื่องมือที่ใช้ในการทำงาน	เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม	วิธีใช้ GitHub ในโปรเจคของคุณ วิธีการทำงานร่วมกับผู้อื่นบนฐานโค้ดเดียวกัน	Intro to GitHub	Floor
03	Getting Started	การเข้าถึง	เรียนรู้พื้นฐานของการเข้าถึงเว็บ	Accessibility Fundamentals	Christopher
04	JS Basics	ประเภทข้อมูลใน JavaScript	พื้นฐานของประเภทข้อมูลใน JavaScript	Data Types	Jasmine
05	JS Basics	ฟังก์ชันและเมธอด	เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการการไหลของตรรกะในแอปพลิเคชัน	Functions and Methods	Jasmine and Christopher
06	JS Basics	การตัดสินใจด้วย JS	เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีตัดสินใจ	Making Decisions	Jasmine
07	JS Basics	อาเรย์และลูป	ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML ในการปฏิบัติ	สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์	Introduction to HTML	Jen
09	Terrarium	CSS ในการปฏิบัติ	สร้าง CSS เพื่อจัดแต่งเทอร์ราเรียมออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, การจัดการ DOM	สร้าง JavaScript เพื่อให้เทอร์ราเรียมทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้นที่ closures และการจัดการ DOM	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	สร้างเกมพิมพ์ดีด	เรียนรู้วิธีใช้เหตุการณ์แป้นพิมพ์เพื่อควบคุมตรรกะของแอป JavaScript ของคุณ	Event-Driven Programming	Christopher
12	Green Browser Extension	การทำงานกับเว็บเบราว์เซอร์	เรียนรู้วิธีการทำงานของเบราว์เซอร์ ประวัติศาสตร์ และวิธีสร้างส่วนแรกของส่วนขยายเบราว์เซอร์	About Browsers	Jen
13	Green Browser Extension	การสร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	กระบวนการพื้นหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ	ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; ศึกษาเกี่ยวกับประสิทธิภาพเว็บและการปรับแต่งบางอย่างเพื่อทำให้	Background Tasks and Performance	Jen
15	Space Game	การพัฒนาเกมขั้นสูงเพิ่มเติมด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง 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	การตรวจจับการชน	ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม แถมมีฟังก์ชัน 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 รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บสมัยใหม่ใช้ นักเรียนจะมีโอกาสได้รับประสบการณ์ปฏิบัติจริงโดยการสร้างเกมพิมพ์ดีด เทอร์ราเรียมเสมือน ส่วนขยายเบราว์เซอร์สีเขียว เกมอวกาศสไตล์ 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 โคลน repo นี้ ติดตั้ง Docsify บนเครื่องของคุณ แล้วในโฟลเดอร์หลักของ repo ให้พิมพ์ 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 แม้ว่าเราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นฉบับควรถือเป็นแหล่งข้อมูลที่ถูกต้องและน่าเชื่อถือ สำหรับข้อมูลที่สำคัญ ควรใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดใด ๆ ที่เกิดจากการใช้การแปลนี้