[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) # หลักสูตรการพัฒนาเว็บสำหรับมือใหม่ Azure Cloud Adveocates ที่ Microsoft ยินดีที่จะเสนอหลักสูตร 12 สัปดาห์ 24 บทเรียนเกี่ยวกับ JavaScript CSS และพื้นฐาน HTML โดยแต่ละบทเรียนประกอบด้วยคำถามก่อน และหลังการเรียน มีแนวทางในการพิชิตบทเรียน วิธีแก้ปัญหา รวมถึงโจทย์ปัญหาและอื่น ๆ อีกมากมาย การสอนแบบ project-based (เรียนรู้จากการทำโปรเจกต์)ของเราจะให้คุณได้เรียนรู้ในการสร้างสิ่งใหม่ ๆ ไปด้วยกัน ซึ่งเป็นวิธีที่ได้รับการพิสูจน์แล้วว่าจะเสริมสร้างทักษะใหม่ ๆ ให้'ติดตัว'ต่อไปได้ **ขอขอบพระคุณเหล่าผู้เขียนของเรา Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, และศิลปินผู้วาด sketchnote Tomomi Imura!** # คุณเป็นผู้เรียนใช่หรือไม่? เริ่มเลยด้วยแหล่งข้อมูลดังต่อไปนี้: - [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) ในเว็บนี้คุณจะเจอแหล่งข้อมูลสำหรับผู้ที่กำลังเริ่มต้น ซึ่งจะมีชุดสำหรับผู้เรียนรวมถึงโอกาสที่จะได้รับบัตรส่วนลดใบรับรองฟรี แนะนำให้ทำบุ๊กมาร์กและกลับมาดูเป็นครั้งคราวเพราะเราเปลี่ยนเนื้อหาใหม่ทุกเดือนเป็นอย่างต่ำ - [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) เข้าร่วมชุมชน student ambassadors ที่นี่อาจเป็นหนทางที่จะพาคุณเข้ามาเป็นส่วนหนึ่งกับ Microsoft ได้ # เริ่มต้น > **สำหรับผู้สอน** เรามี[คำแนะนำ](../for-teachers.md)ให้เกี่ยวกับวิธีการใช้งานหลักสูตรนี้ โดยเรายินดีเป็นอย่างมากที่จะรับฟังข้อเสนอแนะของคุณ[ในฟอรั่มแสดงความคิดเห็นของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! > **[สำหรับผู้เรียน](https://aka.ms/student-page)** ที่เรียนหลักสูตรนี้ด้วยตนเอง ให้ทำการ fork repository นี้ แล้วทำแบบทดสอบด้วยตนเอง โดยเริ่มจากการทำแบบทดสอบก่อนเรียน แล้วอ่านเนื้อหา ทำกิจกรรมที่เหลือให้ครบ ลองสร้างโปรเจกต์ด้วยการทำความเข้าใจบทเรียนมากกว่าที่จะลอกคำตอบ อย่างไรก็ตามจะมีโค้ดเฉลยอยู่ในโฟลเดอร์ /solutions ในแต่ละบทเรียน หรืออีกหนึ่งวิธีคือจัดกลุ่มเรียนกับเพื่อนเรียนด้วยกัน สำหรับผู้ที่ต้องการเรียนเพิ่มเติม เราขอแนะนำ [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) และดูจากวิดีโอด้านล่าง [![Promo video](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSIII) ภาพ Gif โดย [Mohit Jaisal](https://linkedin.com/in/mohitjaisal) > 🎥 คลิกที่รูปด้านบนเพื่อดูวิดีโอเกี่ยวกับโปรเจกต์และเหล่าทีมงานผู้สร้าง! ## การสอน เราได้เลือกหลักการสอน 2 อย่างในระหว่างที่สร้างหลักสูตรนี้ขึ้นมา คือต้องมั่นใจว่าเป็นแบบ project-based และมีหลายแบบทดสอบให้ทำ โดยในตอนท้ายของการเรียน ผู้เรียนจะได้สร้างเกมพิมพ์ดีด, virtual terrarium, 'green' browser extension, space invaders และแอพลิเคชั่นธนาคารประเภทธุรกิจ รวมถึงเรียนรู้พื้นฐานของภาษา JavaScript, HTML และ CSS ควบคู่ไปกับการใช้เครื่องมือที่ทันสมัยของนักพัฒนาเว็บในปัจจุบัน > 🎓 คุณสามารถใช้บทเรียนแรก ๆ ในหลักสูตรนี้เป็น[เส้นทางการเรียนรู้](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) บน Microsoft Learn ได้! การทำให้แน่ใจว่าเนื้อหาสอดคล้องกับโปรเจกต์นี้ทำให้นักเรียนมีส่วนร่วมมากขึ้น และทำให้จดจำคอนเซปต์ได้มากขึ้นอีกด้วย เรายังมีบทเรียนสำหรับผู้เริ่มต้นในพื้นฐาน JavaScript เพื่อปูพื้นฐานแนวคิด จับคู่กับวิดีโอจาก ชุดการสอน "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" ซึ่งผู้จัดทำบางคนเป็นผู้ร่วมพัฒนาหลักสูตรนี้ นอกจากนี้การทำแบบทดสอบก่อนเรียนจะช่วยให้ผู้เรียนสนใจในเนื้อหาที่จะเรียนได้ อีกทั้งการให้แบบทดสอบหลังเรียนจะช่วยให้ผู้เรียนจดจำและต่อยอดผลการเรียนเพิ่มมากขึ้นอีกด้วย หลักสูตรนี้ถูกออกแบบมาให้มีความยืดหยุ่น สนุก และสามารถเรียนรู้ทั้งหมด หรือเฉพาะบางส่วนก็ได้ โดยโปรเจกต์เริ่มต้นจากเล็ก ๆ และเพิ่มความซับซ้อนมากขึ้น ๆ เมื่อครบช่วง 12 สัปดาห์ แม้ว่าเราตั้งใจที่จะเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะนำเอาเฟรมเวิร์กมาใช้ เพื่อที่จะสำเร็จหลักสูตรนี้ได้เราขอแนะนำให้ได้เรียนรู้เกี่ยวกับ Node.js ผ่านอีกชุดการสอน: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)". > ตรวจดูแนวทาง [จรรยาบรรณ](../CODE_OF_CONDUCT.md), [การมีส่วนช่วย](../CONTRIBUTING.md), และ [การแปล](../TRANSLATIONS.md) เรายินดีรับข้อเสนอแนะที่สร้างสรรค์ของคุณ! ## แต่ละบทเรียนประกอบไปด้วย: - โน้ตเสริม - วิดีโอเพิ่มเติม - คำถามก่อนการเรียน - บทเรียน - สำหรับบทเรียนแบบ project-based จะมีขั้นตอนวิธีทำโปรเจกต์แบบ step-by-step - ตัวตรวจวัดความรู้ - แบบทดสอบที่ท้าทาย - เนื้อหาสำหรับอ่านเพิ่มเติม - การบ้าน - คำถามหลังการเรียน > **หมายเหตุเกี่ยวกับคำถามแบบทดสอบ**: ทุกคำถามรวมอยู่[ในแอปนี้](https://ashy-river-0debb7803.1.azurestaticapps.net/) ทั้ง 48 แบบทดสอบมี 3 คำถามที่เกี่ยวข้องกับบทเรียน โดยแอปนี้สามารถใช้งานแบบ local ได้โดยการทำตามจากโฟลเดอร์ `quiz-app` ซึ่งกำลังทะยอยแปลภาษากันอยู่ ## บทเรียน | | ชื่อโปรเจกต์ | แนวคิดที่สอน | วัตถุประสงค์ของการเรียน | บทเรียนที่เกี่ยวข้อง | ผู้เขียน | | :-: | :----------------------------------------------------------------: | :---------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | 01 | เริ่มต้น | แนะนำการเขียนโปรแกรมและเครื่องมือที่ใช้ | เรียนรู้พื้นฐานเบื้องหลังภาษาโปรแกรมมิ่งส่วนใหญ่และซอฟต์แวร์ที่ช่วยเหลือการทำงานของนักพัฒนามืออาชีพ | [Intro to Programming Languages and Tools of the Trade](../1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | เริ่มต้น | พื้นฐาน GitHub รวมถึงการทำงานร่วมกับทีม | วิธีการใช้ GitHub ในโปรเจกต์ของคุณ และวิธีการทำงานร่วมกับผู้อื่นบนโค้ดเบส | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | เร่ิมต้น | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บ | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | พื้นฐาน JS | ชนิดข้อมูลบน JavaScript | พื้นฐานของชนิดข้อมูลบน JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine | | 05 | พื้นฐาน JS | ฟังก์ชันและเมธทอด | เรียนเกี่ยวกับฟังก์ชันและเมธอดที่ใช้จัดการการทำงานลอจิกของแอพลิเคชั่น | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | | 06 | พื้นฐาน JS | สร้างการตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยการใช้ decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | พื้นฐาน JS | อาเรย์และการวนซ้ำ | ทำงานกับข้อมูลด้วยอาเรย์และการวนซ้ำใน JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML ในทางปฏิบัติ | เขียน HTML เพื่อสร้างระบบนิเวศจำลองออนไลน์ โดยเน้นไปที่การจัดวางเลย์เอาต์ | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS ในทางปฏิบัติ | เขียน CSS เพื่อตกแต่งระบบนิเวศจำลองออนไลน์ โดยเน้นที่พื้นฐาน CSS รวมถึงการทำ responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures และการจัดการ DOM | เขียน JavaScript เพื่อสร้างฟังก์ชันให้ระบบนิเวศจำลองเช่นการลากวาง โดยเน้นที่หลักการ closures และการจัดการ DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | เรียนรู้วิธีการรับค่าจากคีย์บอร์ดเพื่อขับเคลื่อนการทำงานลอจิกบนแอพ JavaScript ของคุณ | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher | | 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานกับ Browsers | เรียนรู้การทำงานของ browsers ความเป็นมา และวิธีจัดวางองค์ประกอบแรกของส่วนขยาย browser | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | สร้างแบบฟอร์ม การเรียกใช้ API และการจัดเก็บตัวแปรบน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยาย browser เพื่อเรียกใช้ API โดยเรียกใช้ตัวแปรที่เก็บบน local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานเบื้องหลัง Browser และประสิทธิภาพของเว็บ | ใช้การทำงานเบื้องหลังของ browser ในการจัดการไอคอนของส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการเพิ่มประสิทธิภาพ | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [Space Game](/6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้คลาสและคอมโพสิชั่น และ Pub/Sub แพทเทิร์น ในการเตรียมพร้อมสำหรับสร้างเกม | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris | | 16 | [Space Game](/6-space-game/solution/README.md) | วาดรูปด้วย Canvas | เรียนรู้เกี่ยวกับ Canvas API สำหรับวาดภาพบนหน้าจอ | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [Space Game](/6-space-game/solution/README.md) | การขยับองค์ประกอบไปรอบ ๆ จอ | ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนไหวโดยใช้พิกัดคาร์ทีเซียนและ Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [Space Game](/6-space-game/solution/README.md) | ตรวจสอบการชน | ทำให้องค์ประกอบชนกันและโต้ตอบกันและกันโดยใช้การกดปุ่มและสร้างฟังก์ชั่นคูลดาวน์เพื่อรับรองประสิทธิภาพของเกม | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris | | 19 | [Space Game](/6-space-game/solution/README.md) | การเก็บแต้ม | ทำการคำนวณทางคณิตศาสตร์ตามสถานะของเกม | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris | | 20 | [Space Game](/6-space-game/solution/README.md) | การจบเกมและเริ่มใหม่ | เรียนรู้เกี่ยวกับการจบเกมและเริ่มเกมใหม่ รวมถึงการล้างค่าและรีเซ็ตตัวแปร | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris | | 21 | [Banking App](/7-bank-project/solution/README.md) | เทมเพลท HTML และ Routes ในเว็บแอพ | เรียนรู้วิธีการสร้างโครงสำหรับเว็บหลายหน้าโดยใช้ routing และ HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan | | 22 | [Banking App](/7-bank-project/solution/README.md) | สร้างแบบฟอร์มล็อกอิน และสมัครสมาชิก | เรียนรู้เกี่ยวกับการสร้างฟอร์มและตรวจสอบความถูกต้องของข้อมูล | [Forms](/7-bank-project/2-forms/README.md) | Yohan | | 23 | [Banking App](/7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการเดินทางของข้อมูลบนแอพ วิธีการดึง จัดเก็บ และกำจัดข้อมูลเหล่านั้น | [Data](/7-bank-project/3-data/README.md) | Yohan | | 24 | [Banking App](/7-bank-project/solution/README.md) | แนวคิดการจัดการ State | เรียนรู้วิธีการเก็บ state ให้คงอยู่ และวิธีจัดการด้วยการโปรแกรม | [State Management](/7-bank-project/4-state-management/README.md) | Yohan | ## การเข้าถึงแบบออฟไลน์ คุณสามารถเปิดเอกสารนี้แบบออนไลน์ได้โดยใช้ [Docsify](https://docsify.js.org/#/) ทำการ Fork repo นี้แล้ว [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนอุปกรณ์ของคุณ จากนั้นใช้คำสั่ง `docsify serve` บน repo ที่ติดตั้งบนเครื่อง เว็บไซต์ก็จะให้บริการบนพอร์ต 3000 บนเครื่องของคุณ: `localhost:3000` ## PDF ไฟล์ PDF ของทุกบทเรียนสามารถหาได้จาก[ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## หลักสูตรอื่น ๆ ทีมของเรายังมีหลักสูตรที่น่าสนใจอีกมากมาย ดูได้ตามนี้เลย!: - [Machine Learning for Beginners](https://aka.ms/ml-beginners) - [IoT for Beginners](https://aka.ms/iot-beginners) - [Data Science for Beginners](https://aka.ms/datascience-beginners) - [AI for Beginners](https://aka.ms/ai-beginners)