Web-Dev-For-Beginners/translations/th

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

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

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

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

📣 ประกาศ - หลักสูตรใหม่ เกี่ยวกับ 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

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

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

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

1. Fork ที่เก็บ: คลิกปุ่ม "Fork" ที่มุมขวาบนของหน้านี้
2. Clone ที่เก็บ: 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. Clone ที่เก็บของคุณลงในเครื่องคอมพิวเตอร์ คุณสามารถทำได้โดยคลิกปุ่ม Code และคัดลอก URL:

   

   จากนั้น เปิด 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	เริ่มต้นใช้งาน	บทนำเกี่ยวกับการเขียนโปรแกรมและเครื่องมือที่ใช้	เรียนรู้พื้นฐานที่อยู่เบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ	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	อาร์เรย์และลูป	ทำงานกับข้อมูลโดยใช้อาร์เรย์และลูปใน 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	การทำงานร่วมกับเบราว์เซอร์	เรียนรู้เกี่ยวกับการทำงานของเบราว์เซอร์ ประวัติของมัน และวิธีการสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์	เกี่ยวกับเบราว์เซอร์	Jen
13	Green Browser Extension	การสร้างฟอร์ม เรียก API และจัดเก็บตัวแปรใน local storage	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์เพื่อเรียก API โดยใช้ตัวแปรที่จัดเก็บใน local storage	APIs, Forms, และ 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 Templates และ Routes ในเว็บแอป	เรียนรู้วิธีการสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ routing และ HTML templates	HTML Templates และ Routes	Yohan
22	Banking App	การสร้างฟอร์มเข้าสู่ระบบและลงทะเบียน	เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการกระบวนการตรวจสอบ	ฟอร์ม	Yohan
23	Banking App	วิธีการดึงข้อมูลและการใช้งานข้อมูล	วิธีการที่ข้อมูลไหลเข้าและออกจากแอปของคุณ วิธีการดึงข้อมูล จัดเก็บ และกำจัดข้อมูล	ข้อมูล	Yohan
24	Banking App	แนวคิดเกี่ยวกับการจัดการสถานะ	เรียนรู้ว่าแอปของคุณรักษาสถานะอย่างไรและวิธีการจัดการสถานะด้วยโปรแกรม	การจัดการสถานะ	Yohan

🏫 การเรียนการสอน

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

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

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

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

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

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

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

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

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

• Generative AI for Beginners
• Generative AI for Beginners .NET
• Generative AI with JavaScript
• Generative AI with Java
• AI for Beginners
• Data Science for Beginners
• ML for Beginners
• Cybersecurity for Beginners
• Web Dev for Beginners
• IoT for Beginners
• XR Development for Beginners
• Mastering GitHub Copilot for Agentic use
• Mastering GitHub Copilot for C#/.NET Developers
• Choose Your Own Copilot Adventure

License

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

---

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