38 KiB

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

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

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

📣 ประกาศ - หลักสูตรใหม่ เกี่ยวกับ 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 > Open Folder และเลือกโฟลเดอร์ที่คุณเพิ่ง Clone

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

Live Server - เพื่อดูตัวอย่างหน้า HTML ใน Visual Studio Code

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

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

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

หมายเหตุเกี่ยวกับแบบทดสอบ: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวมทั้งหมด 48 แบบทดสอบ แต่ละแบบทดสอบมีสามคำถาม สามารถเข้าถึงได้ ที่นี่ แอปแบบทดสอบสามารถรันในเครื่องหรือ Deploy ไปยัง 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 เพื่อทำให้ terrarium ทำงานเป็นอินเทอร์เฟซแบบลากและวาง โดยเน้นที่ closures และการจัดการ DOM	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	สร้างเกมพิมพ์ดีด	เรียนรู้วิธีใช้เหตุการณ์จากคีย์บอร์ดเพื่อควบคุมตรรกะของแอป JavaScript ของคุณ	Event-Driven Programming	Christopher
12	Green Browser Extension	การทำงานกับเบราว์เซอร์	เรียนรู้ว่าเบราว์เซอร์ทำงานอย่างไร ประวัติของมัน และวิธีการสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์	About Browsers	Jen
13	Green Browser Extension	การสร้างฟอร์ม, การเรียก API และการจัดเก็บตัวแปรใน local storage	สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่จัดเก็บใน local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	กระบวนการเบื้องหลังในเบราว์เซอร์, ประสิทธิภาพของเว็บ	ใช้กระบวนการเบื้องหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการปรับปรุงบางอย่าง	Background Tasks and Performance	Jen
15	Space Game	การพัฒนาเกมขั้นสูงด้วย JavaScript	เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม	Introduction to Advanced Game Development	Chris
16	Space Game	การวาดลงบน canvas	เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบลงบนหน้าจอ	Drawing to Canvas	Chris
17	Space Game	การเคลื่อนย้ายองค์ประกอบบนหน้าจอ	ค้นพบว่าองค์ประกอบสามารถเคลื่อนไหวได้อย่างไรโดยใช้พิกัดคาร์ทีเซียนและ Canvas API	Moving Elements Around	Chris
18	Space Game	การตรวจจับการชนกัน	ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม และเพิ่มฟังก์ชัน cooldown เพื่อให้เกมทำงานได้อย่างมีประสิทธิภาพ	Collision Detection	Chris
19	Space Game	การเก็บคะแนน	คำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม	Keeping Score	Chris
20	Space Game	การจบและเริ่มเกมใหม่	เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการล้างข้อมูลและรีเซ็ตค่าตัวแปร	The Ending Condition	Chris
21	Banking App	HTML Templates และ Routes ในเว็บแอป	เรียนรู้วิธีสร้างโครงสร้างพื้นฐานของเว็บไซต์หลายหน้าโดยใช้ routing และ HTML templates	HTML Templates and Routes	Yohan
22	Banking App	การสร้างฟอร์มล็อกอินและลงทะเบียน	เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการกระบวนการตรวจสอบความถูกต้อง	Forms	Yohan
23	Banking App	วิธีการดึงและใช้งานข้อมูล	เรียนรู้ว่าข้อมูลไหลเข้าและออกจากแอปของคุณอย่างไร วิธีการดึงข้อมูล จัดเก็บ และลบข้อมูล	Data	Yohan
24	Banking App	แนวคิดเกี่ยวกับการจัดการสถานะ	เรียนรู้ว่าแอปของคุณรักษาสถานะอย่างไรและวิธีจัดการสถานะนั้นด้วยโปรแกรม	State Management	Yohan

🏫 การสอน

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

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

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

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

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

ใบอนุญาต

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

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

38 KiB Raw Blame History