42 KiB

Raw Permalink Blame History

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

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

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

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

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

รองรับผ่าน 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 ใหม่สำหรับคุณในการทำงาน

!Codespace./images/createcodespace.png)

การเรียกใช้หลักสูตรในเครื่องคอมพิวเตอร์ของคุณ

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

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

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

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

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

แม้ว่าเราจะหลีกเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript โดยเจตนาเพื่อมุ่งเน้นไปที่ทักษะพื้นฐานที่จำเป็นในฐานะนักพัฒนาเว็บก่อนที่จะนำเฟรมเวิร์กมาใช้ ขั้นตอนต่อไปที่ดีหลังจากจบหลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านคอลเลกชันวิดีโออีกชุดหนึ่ง: "ซีรีส์สำหรับผู้เริ่มต้น: Node.js"

เยี่ยมชม จรรยาบรรณ และ แนวทางการมีส่วนร่วม ของเรา เรายินดีรับฟังความคิดเห็นที่สร้างสรรค์ของคุณ!

🧭 การเข้าถึงแบบออฟไลน์

คุณสามารถรันเอกสารนี้แบบออฟไลน์โดยใช้ Docsify โคลน repo นี้ ติดตั้ง Docsify บนเครื่องของคุณ จากนั้นในโฟลเดอร์รากของ repo นี้ พิมพ์ docsify serve เว็บไซต์จะถูกเสิร์ฟบนพอร์ต 3000 บน localhost ของคุณ: localhost:3000

📘 PDF

PDF ของบทเรียนทั้งหมดสามารถพบได้ ที่นี่

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

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

ใบอนุญาต

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

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

42 KiB Raw Permalink Blame History