เรียนรู้พื้นฐานการพัฒนาเว็บด้วยหลักสูตรครอบคลุม 12 สัปดาห์ของเราโดยกลุ่ม Microsoft Cloud Advocates แต่ละบทเรียน 24 บท ลงลึกใน JavaScript, CSS และ HTML ผ่านโครงการปฏิบัติ เช่น เทอราเรียม ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีส่วนร่วมกับแบบทดสอบ การสนทนา และงานจริง พัฒนาทักษะของคุณและเพิ่มประสิทธิภาพการเก็บความรู้ด้วยหลักสูตรที่เน้นการเรียนรู้ผ่านโครงการ เริ่มต้นการเขียนโค้ดของคุณวันนี้!
เข้าร่วมชุมชน Azure AI Foundry Discord
ปฏิบัติตามขั้นตอนเหล่านี้เพื่อเริ่มใช้ทรัพยากรเหล่านี้:
- โฟร์กที่เก็บข้อมูล: คลิก
- โคลนที่เก็บข้อมูล:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - เข้าร่วม Azure AI Foundry Discord พบปะผู้เชี่ยวชาญและนักพัฒนาอื่นๆ
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
ต้องการโคลนในเครื่องไหม?
ที่เก็บนี้รวมคำแปลมากกว่า 50 ภาษา ซึ่งเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่รวมคำแปล ใช้การสั่ง checkout แบบ sparse:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"สิ่งนี้จะให้ทุกอย่างที่คุณต้องการเพื่อทำหลักสูตรจบด้วยการดาวน์โหลดที่เร็วขึ้นมาก
หากคุณต้องการให้มีการสนับสนุนภาษาเพิ่มเติม รายชื่ออยู่ที่ นี่
เยี่ยมชม หน้าศูนย์นักเรียน ซึ่งคุณจะพบกับทรัพยากรสำหรับผู้เริ่มต้น, ชุดนักเรียน และแม้กระทั่งวิธีการรับคูปองใบรับรองฟรี นี่คือหน้าที่คุณควรบันทึกไว้และตรวจสอบเป็นระยะๆ เนื่องจากเราจะเปลี่ยนเนื้อหาเป็นรายเดือน
เพิ่มความท้าทายใหม่ ค้นหาคำว่า "GitHub Copilot Agent Challenge 🚀" ในบทต่างๆ เป็นความท้าทายใหม่สำหรับคุณในการทำให้เสร็จโดยใช้ GitHub Copilot และโหมด Agent หากคุณไม่เคยใช้โหมด Agent มาก่อน มันสามารถไม่เพียงแค่สร้างข้อความแต่ยังสามารถสร้างและแก้ไขไฟล์, รันคำสั่ง และอื่นๆ ได้
เพิ่มโครงการผู้ช่วย AI ใหม่ล่าสุด ตรวจสอบโครงการได้ที่ project
อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา!
เยี่ยมชม https://aka.ms/genai-js-course เพื่อเริ่มต้น!
- บทเรียนครอบคลุมตั้งแต่พื้นฐานถึง RAG
- โต้ตอบกับตัวละครในประวัติศาสตร์ด้วย GenAI และแอป companion ของเรา
- เรื่องราวที่สนุกสนานและมีส่วนร่วม คุณจะได้เดินทางย้อนเวลา!
แต่ละบทเรียนประกอบด้วยการบ้านให้ทำ แบบทดสอบความรู้ และความท้าทายเพื่อแนะนำคุณในหัวข้อต่างๆ เช่น:
- การเขียน prompt และวิศวกรรม prompt
- การสร้างแอปข้อความและภาพ
- แอปค้นหา
เยี่ยมชม https://aka.ms/genai-js-course เพื่อเริ่มต้น!
ครูผู้สอน เราได้ รวมคำแนะนำบางส่วน เกี่ยวกับวิธีการใช้หลักสูตรนี้ เราขอรับฟังความคิดเห็นของคุณ ในฟอรัมสนทนา!
ผู้เรียน สำหรับแต่ละบท เริ่มต้นด้วยแบบทดสอบก่อนบรรยายแล้วอ่านเนื้อหาบรรยาย ทำกิจกรรมต่างๆ แล้วตรวจสอบความเข้าใจของคุณด้วยแบบทดสอบหลังบรรยาย
เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ ให้เชื่อมต่อกับเพื่อนร่วมชั้นเพื่อทำโครงการร่วมกัน! เราสนับสนุนการสนทนาใน ฟอรัมสนทนา ซึ่งทีมผู้ดูแลของเราจะพร้อมตอบคำถามคุณ
เพื่อการศึกษาต่อเพิ่มเติม เราขอแนะนำให้สำรวจ Microsoft Learn สำหรับวัสดุเรียนรู้เพิ่มเติม
หลักสูตรนี้เตรียมสภาพแวดล้อมสำหรับการพัฒนาไว้ให้แล้ว! ขณะเริ่มต้น คุณสามารถเลือกที่จะรันหลักสูตรใน Codespace (สภาพแวดล้อมผ่านเบราว์เซอร์ ไม่ต้องติดตั้ง) หรือรันในเครื่องของคุณด้วยโปรแกรมแก้ไขข้อความ เช่น Visual Studio Code
เพื่อความสะดวกในการบันทึกงานของคุณ แนะนำให้สร้างสำเนาของที่เก็บนี้ คุณสามารถทำได้โดยคลิกปุ่ม Use this template ที่ด้านบนของหน้า ซึ่งจะสร้างที่เก็บใหม่ในบัญชี GitHub ของคุณที่มีสำเนาของหลักสูตร
ทำตามขั้นตอนเหล่านี้:
- โฟร์กที่เก็บข้อมูล: คลิกที่ปุ่ม "Fork" ที่มุมบนขวาของหน้านี้
- โคลนที่เก็บข้อมูล:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
ในสำเนาที่เก็บของคุณที่สร้างขึ้น คลิกปุ่ม Code แล้วเลือก Open with Codespaces จะสร้าง Codespace ใหม่ให้คุณทำงาน
หากอยากรันหลักสูตรนี้ในเครื่องของคุณ คุณจะต้องมีโปรแกรมแก้ไขข้อความ เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา, แนะนำภาษาการเขียนโปรแกรมและเครื่องมือ, จะนำทางคุณผ่านตัวเลือกต่างๆ สำหรับเครื่องมือเหล่านี้เพื่อให้คุณเลือกสิ่งที่เหมาะสมกับคุณที่สุด
เราขอแนะนำให้ใช้ Visual Studio Code เป็นโปรแกรมแก้ไขของคุณ ซึ่งมี Terminal ในตัวด้วย คุณสามารถดาวน์โหลด Visual Studio Code ได้ที่ นี่
-
โคลนที่เก็บรหัสของคุณลงในคอมพิวเตอร์ คุณสามารถทำได้โดยคลิกที่ปุ่ม Code แล้วคัดลอก URL:
จากนั้น เปิด Terminal ใน Visual Studio Code และรันคำสั่งต่อไปนี้ โดยแทนที่
<your-repository-url>ด้วย URL ที่คุณเพิ่งคัดลอกมา:git clone <your-repository-url>
-
เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิก File > Open Folder และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา
ส่วนขยายที่แนะนำสำหรับ Visual Studio Code:
- Live Server - เพื่อดูตัวอย่างหน้า HTML ภายใน Visual Studio Code
- Copilot - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น
- สเก็ตช์โน้ต (ไม่บังคับ)
- วิดีโอเสริม (ไม่บังคับ)
- แบบทดสอบอบอุ่นก่อนบทเรียน
- บทเรียนที่เขียนไว้
- สำหรับบทเรียนที่ใช้โครงการเป็นฐาน มีคำแนะนำทีละขั้นตอนในการสร้างโครงการ
- เช็คความรู้
- ความท้าทาย
- การอ่านเสริม
- การบ้าน
- แบบทดสอบหลังบทเรียน
หมายเหตุเกี่ยวกับแบบทดสอบ: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละแบบทดสอบมีสามคำถาม สามารถเข้าถึงได้ที่ นี่ แอปแบบทดสอบสามารถรันแบบออฟไลน์หรือดีพลอยไปที่ Azure ตามคำแนะนำในโฟลเดอร์
quiz-app
| ชื่อโปรเจค | แนวคิดที่สอน | วัตถุประสงค์การเรียนรู้ | บทเรียนที่ลิงก์ | ผู้แต่ง | |
|---|---|---|---|---|---|
| 01 | Getting Started | แนะนำการเขียนโปรแกรมและเครื่องมือของงาน | เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของพวกเขา | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Getting Started | พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม | วิธีใช้งาน GitHub ในโปรเจคของคุณ วิธีการร่วมมือกับผู้อื่นบนฐานโค้ด | Intro to GitHub | Floor |
| 03 | Getting Started | การเข้าถึง | เรียนรู้พื้นฐานของเว็บที่สามารถเข้าถึงได้ | Accessibility Fundamentals | Christopher |
| 04 | JS Basics | ประเภทข้อมูลของ JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | Data Types | Jasmine |
| 05 | JS Basics | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดในการจัดการการไหลของตรรกะแอปพลิเคชัน | Functions and Methods | Jasmine and Christopher |
| 06 | JS Basics | การตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | Making Decisions | Jasmine |
| 07 | JS Basics | อาร์เรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | Introduction to HTML | Jen |
| 09 | Terrarium | CSS ในการปฏิบัติ | สร้าง CSS เพื่อจัดสไตล์เทอร์ราเรียมออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | Introduction to CSS | Jen |
| 10 | Terrarium | closures ของ JavaScript, การจัดการ DOM | สร้าง JavaScript เพื่อทำให้เทอร์ราเรียมทำงานเป็นอินเทอร์เฟซลาก/วาง โดยเน้น 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 API ซึ่งใช้สำหรับวาดองค์ประกอบบนหน้าจอ | Drawing to Canvas | Chris |
| 17 | Space Game | การเคลื่อนย้ายวัตถุบนหน้าจอ | ค้นพบวิธีที่วัตถุสามารถเคลื่อนที่ได้โดยใช้พิกัดคาร์ทีเซียนและ Canvas API | Moving Elements Around | Chris |
| 18 | Space Game | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดแป้นพิมพ์ พร้อมทั้งมีฟังก์ชันพักเวลาการทำงานเพื่อรับประกันประสิทธิภาพของเกม | Collision Detection | Chris |
| 19 | Space Game | การเก็บคะแนน | ทำคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | Keeping Score | Chris |
| 20 | Space Game | การสิ้นสุดและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการสิ้นสุดและเริ่มเกมใหม่ รวมถึงการจัดการล้างข้อมูลและรีเซ็ตค่าตัวแปร | The Ending Condition | Chris |
| 21 | Banking App | เทมเพลต HTML และเส้นทางในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างเว็บไซต์หลายหน้าโดยใช้ routing และเทมเพลต HTML | HTML Templates and Routes | Yohan |
| 22 | Banking App | สร้างแบบฟอร์มเข้าสู่ระบบและลงทะเบียน | เรียนรู้เกี่ยวกับการสร้างฟอร์มและวิธีจัดการการตรวจสอบความถูกต้อง | Forms | Yohan |
| 23 | Banking App | วิธีการดึงข้อมูลและใช้งานข้อมูล | วิธีการไหลของข้อมูลเข้าและออกจากแอปของคุณ วิธีดึงข้อมูล เก็บข้อมูล และกำจัดข้อมูล | Data | Yohan |
| 24 | Banking App | แนวคิดการจัดการสถานะ | เรียนรู้ว่าแอปของคุณเก็บสถานะอย่างไร และวิธีจัดการสถานะนั้นด้วยโปรแกรม | State Management | Yohan |
| 25 | Browser/VScode Code | การทำงานกับ VScode | เรียนรู้วิธีใช้งานโปรแกรมแก้ไขโค้ด | Use VScode Code Editor | Chris |
| 26 | AI Assistants | การทำงานกับ AI | เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง | AI Assistant project | Chris |
หลักสูตรของเราออกแบบโดยยึดหลักการสอนสำคัญสองประการ:
- การเรียนรู้จากโครงการ
- แบบทดสอบบ่อยครั้ง
โปรแกรมสอนพื้นฐานของ JavaScript, HTML, และ CSS รวมทั้งเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บใช้งานในปัจจุบัน นักเรียนจะได้มีโอกาสพัฒนาทักษะผ่านการสร้างเกมพิมพ์ เกมเทอร์ราเรียมเสมือนจริง ส่วนขยายเบราว์เซอร์ที่เป็นมิตรกับสิ่งแวดล้อม เกมสไตล์ 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 โครงการนี้, ติดตั้ง Docsify บนเครื่องของคุณ จากนั้นในโฟลเดอร์รากของโครงการนี้ ให้พิมพ์ docsify serve เว็บไซต์จะถูกเสิร์ฟที่พอร์ต 3000 บน localhost ของคุณ: localhost:3000
ไฟล์ PDF ของบทเรียนทั้งหมดสามารถดูได้ที่ นี่
ทีมของเราผลิตคอร์สอื่น ๆ ด้วย! ตรวจสอบได้ที่:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
ถ้าคุณติดขัดหรือต้องการถามคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกลุ่มผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการสนทนาเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งเปิดรับคำถามและแบ่งปันความรู้กันอย่างอิสระ
หากคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดในระหว่างการสร้างโปรดเยี่ยมชม:
รีโพสิทอรีนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ LICENSE สำหรับข้อมูลเพิ่มเติม
ข้อจำกัดความรับผิดชอบ: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI Co-op Translator แม้ว่าเราจะพยายามให้มีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้องได้ เอกสารต้นฉบับในภาษาต้นฉบับถือเป็นแหล่งข้อมูลที่ถูกต้องที่สุด สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดจากการใช้การแปลนี้