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 page ซึ่งคุณจะพบทรัพยากรสำหรับผู้เริ่มต้น ชุดเครื่องมือสำหรับนักเรียน และแม้กระทั่งวิธีการรับบัตรกำนัลสำหรับใบรับรองฟรี นี่คือหน้าที่คุณควรบุ๊กมาร์กและกลับมาเยี่ยมชมเป็นระยะๆ เนื่องจากเรามีการเปลี่ยนแปลงเนื้อหาในทุกเดือน

📣 ประกาศ - โปรเจกต์ใหม่ที่สร้างด้วย 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 - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น

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

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

หมายเหตุเกี่ยวกับแบบทดสอบ: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ 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 เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์	แนะนำ 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	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	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้งคลาสและองค์ประกอบ และรูปแบบ Pub/Sub เพื่อเตรียมสร้างเกม	แนะนำการพัฒนาเกมขั้นสูง	Chris
16	Space Game	การวาดบนแคนวาส	เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบลงบนหน้าจอ	การวาดบนแคนวาส	Chris
17	Space Game	การเคลื่อนย้ายองค์ประกอบบนหน้าจอ	ค้นพบว่าองค์ประกอบสามารถเคลื่อนไหวได้อย่างไรโดยใช้พิกัดคาร์ทีเซียนและ Canvas API	การเคลื่อนย้ายองค์ประกอบ	Chris
18	Space Game	การตรวจจับการชนกัน	ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม และให้ฟังก์ชัน cooldown เพื่อให้เกมมีประสิทธิภาพ	การตรวจจับการชนกัน	Chris
19	Space Game	การนับคะแนน	ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	การนับคะแนน	Chris
20	Space Game	การจบและเริ่มเกมใหม่	เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการล้างข้อมูลและรีเซ็ตค่าตัวแปร	เงื่อนไขการจบเกม	Chris
21	Banking App	เทมเพลต HTML และเส้นทางในเว็บแอป	เรียนรู้วิธีสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้การกำหนดเส้นทางและเทมเพลต 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 และแอปธนาคารสำหรับธุรกิจ เมื่อจบหลักสูตรนี้ นักเรียนจะมีความเข้าใจที่มั่นคงเกี่ยวกับการพัฒนาเว็บ

🎓 คุณสามารถเรียนบทเรียนแรกๆ ในหลักสูตรนี้ได้ใน 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 ของบทเรียนทั้งหมดสามารถดาวน์โหลดได้ ที่นี่

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

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

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

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

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

ใบอนุญาต

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

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

44 KiB Raw Blame History