42 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	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง 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 รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บในปัจจุบันใช้ นักเรียนจะมีโอกาสพัฒนาประสบการณ์จริงโดยการสร้างเกมพิมพ์ เทอร์ราเรียมเสมือนจริง ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม เกมสไตล์ 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 แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้บริการแปลภาษามนุษย์ที่เป็นมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

42 KiB Raw Blame History