[![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)
