You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
28 KiB
113 lines
28 KiB
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
|
[](http://makeapullrequest.com)
|
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
|
|
|
[](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) และดูจากวิดีโอด้านล่าง
|
|
|
|
[](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)
|