44 KiB

Raw Blame History

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

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

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

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

Fork Repository: คลิก
Clone Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
เข้าร่วม Azure AI Foundry Discord และพบปะผู้เชี่ยวชาญและนักพัฒนาคนอื่นๆ

🌐 รองรับหลายภาษา

รองรับผ่าน GitHub Action (อัตโนมัติและอัปเดตเสมอ)

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

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

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

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

เพิ่มความท้าทายใหม่แล้ว ค้นหา "GitHub Copilot Agent Challenge 🚀" ในบทเรียนส่วนใหญ่ นี่คือความท้าทายใหม่สำหรับคุณในการใช้ GitHub Copilot และโหมด Agent หากคุณยังไม่เคยใช้โหมด Agent มาก่อน มันสามารถทำได้มากกว่าการสร้างข้อความ เช่น การสร้างและแก้ไขไฟล์ การรันคำสั่ง และอื่นๆ

📣 ประกาศ - โปรเจกต์ใหม่ที่สร้างด้วย Generative AI

โปรเจกต์ AI Assistant ใหม่เพิ่งถูกเพิ่มเข้ามา ลองดูได้ที่ 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 ของคุณพร้อมสำเนาหลักสูตร

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

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

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

CodeSpace

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

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

Live Server - ใช้สำหรับดูตัวอย่างหน้า HTML ใน Visual Studio Code

Copilot - ช่วยให้คุณเขียนโค้ดได้เร็วขึ้น

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

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

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

🗃️ บทเรียน

	ชื่อโครงการ	แนวคิดที่สอน	วัตถุประสงค์การเรียนรู้	ลิงก์บทเรียน	ผู้เขียน
01	เริ่มต้นใช้งาน	แนะนำการเขียนโปรแกรมและเครื่องมือที่ใช้ในงาน	เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ	แนะนำภาษาการเขียนโปรแกรมและเครื่องมือที่ใช้ในงาน	Jasmine
02	เริ่มต้นใช้งาน	พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม	วิธีใช้ GitHub ในโครงการของคุณและวิธีทำงานร่วมกับผู้อื่นในฐานข้อมูลโค้ด	แนะนำ GitHub	Floor
03	เริ่มต้นใช้งาน	การเข้าถึง	เรียนรู้พื้นฐานของการเข้าถึงเว็บไซต์	พื้นฐานการเข้าถึง	Christopher
04	พื้นฐาน JS	ประเภทข้อมูลใน JavaScript	พื้นฐานของประเภทข้อมูลใน JavaScript	ประเภทข้อมูล	Jasmine
05	พื้นฐาน JS	ฟังก์ชันและเมธอด	เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการการไหลของตรรกะในแอปพลิเคชัน	ฟังก์ชันและเมธอด	Jasmine และ 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 Templates และ Routes ในเว็บแอป	เรียนรู้วิธีสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ routing และ HTML templates	HTML Templates และ Routes	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 โคลน repo นี้, ติดตั้ง Docsify บนเครื่องของคุณ และในโฟลเดอร์ root ของ repo นี้ ให้พิมพ์ docsify serve เว็บไซต์จะถูกให้บริการบนพอร์ต 3000 บน localhost ของคุณ: localhost:3000

📘 PDF

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

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

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

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

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

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

ใบอนุญาต

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

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

44 KiB Raw Blame History