28 KiB
หลักสูตรการพัฒนาเว็บสำหรับมือใหม่
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 ในเว็บนี้คุณจะเจอแหล่งข้อมูลสำหรับผู้ที่กำลังเริ่มต้น ซึ่งจะมีชุดสำหรับผู้เรียนรวมถึงโอกาสที่จะได้รับบัตรส่วนลดใบรับรองฟรี แนะนำให้ทำบุ๊กมาร์กและกลับมาดูเป็นครั้งคราวเพราะเราเปลี่ยนเนื้อหาใหม่ทุกเดือนเป็นอย่างต่ำ
- Microsoft Student Learn ambassadors เข้าร่วมชุมชน student ambassadors ที่นี่อาจเป็นหนทางที่จะพาคุณเข้ามาเป็นส่วนหนึ่งกับ Microsoft ได้
เริ่มต้น
สำหรับผู้สอน เรามีคำแนะนำให้เกี่ยวกับวิธีการใช้งานหลักสูตรนี้ โดยเรายินดีเป็นอย่างมากที่จะรับฟังข้อเสนอแนะของคุณในฟอรั่มแสดงความคิดเห็นของเรา!
สำหรับผู้เรียน ที่เรียนหลักสูตรนี้ด้วยตนเอง ให้ทำการ fork repository นี้ แล้วทำแบบทดสอบด้วยตนเอง โดยเริ่มจากการทำแบบทดสอบก่อนเรียน แล้วอ่านเนื้อหา ทำกิจกรรมที่เหลือให้ครบ ลองสร้างโปรเจกต์ด้วยการทำความเข้าใจบทเรียนมากกว่าที่จะลอกคำตอบ อย่างไรก็ตามจะมีโค้ดเฉลยอยู่ในโฟลเดอร์ /solutions ในแต่ละบทเรียน หรืออีกหนึ่งวิธีคือจัดกลุ่มเรียนกับเพื่อนเรียนด้วยกัน สำหรับผู้ที่ต้องการเรียนเพิ่มเติม เราขอแนะนำ Microsoft Learn และดูจากวิดีโอด้านล่าง
ภาพ Gif โดย Mohit Jaisal
🎥 คลิกที่รูปด้านบนเพื่อดูวิดีโอเกี่ยวกับโปรเจกต์และเหล่าทีมงานผู้สร้าง!
การสอน
เราได้เลือกหลักการสอน 2 อย่างในระหว่างที่สร้างหลักสูตรนี้ขึ้นมา คือต้องมั่นใจว่าเป็นแบบ project-based และมีหลายแบบทดสอบให้ทำ โดยในตอนท้ายของการเรียน ผู้เรียนจะได้สร้างเกมพิมพ์ดีด, virtual terrarium, 'green' browser extension, space invaders และแอพลิเคชั่นธนาคารประเภทธุรกิจ รวมถึงเรียนรู้พื้นฐานของภาษา JavaScript, HTML และ CSS ควบคู่ไปกับการใช้เครื่องมือที่ทันสมัยของนักพัฒนาเว็บในปัจจุบัน
🎓 คุณสามารถใช้บทเรียนแรก ๆ ในหลักสูตรนี้เป็นเส้นทางการเรียนรู้ บน Microsoft Learn ได้!
การทำให้แน่ใจว่าเนื้อหาสอดคล้องกับโปรเจกต์นี้ทำให้นักเรียนมีส่วนร่วมมากขึ้น และทำให้จดจำคอนเซปต์ได้มากขึ้นอีกด้วย เรายังมีบทเรียนสำหรับผู้เริ่มต้นในพื้นฐาน JavaScript เพื่อปูพื้นฐานแนวคิด จับคู่กับวิดีโอจาก ชุดการสอน "Beginners Series to: JavaScript" ซึ่งผู้จัดทำบางคนเป็นผู้ร่วมพัฒนาหลักสูตรนี้
นอกจากนี้การทำแบบทดสอบก่อนเรียนจะช่วยให้ผู้เรียนสนใจในเนื้อหาที่จะเรียนได้ อีกทั้งการให้แบบทดสอบหลังเรียนจะช่วยให้ผู้เรียนจดจำและต่อยอดผลการเรียนเพิ่มมากขึ้นอีกด้วย หลักสูตรนี้ถูกออกแบบมาให้มีความยืดหยุ่น สนุก และสามารถเรียนรู้ทั้งหมด หรือเฉพาะบางส่วนก็ได้ โดยโปรเจกต์เริ่มต้นจากเล็ก ๆ และเพิ่มความซับซ้อนมากขึ้น ๆ เมื่อครบช่วง 12 สัปดาห์
แม้ว่าเราตั้งใจที่จะเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะนำเอาเฟรมเวิร์กมาใช้ เพื่อที่จะสำเร็จหลักสูตรนี้ได้เราขอแนะนำให้ได้เรียนรู้เกี่ยวกับ Node.js ผ่านอีกชุดการสอน: "Beginner Series to: Node.js".
ตรวจดูแนวทาง จรรยาบรรณ, การมีส่วนช่วย, และ การแปล เรายินดีรับข้อเสนอแนะที่สร้างสรรค์ของคุณ!
แต่ละบทเรียนประกอบไปด้วย:
- โน้ตเสริม
- วิดีโอเพิ่มเติม
- คำถามก่อนการเรียน
- บทเรียน
- สำหรับบทเรียนแบบ project-based จะมีขั้นตอนวิธีทำโปรเจกต์แบบ step-by-step
- ตัวตรวจวัดความรู้
- แบบทดสอบที่ท้าทาย
- เนื้อหาสำหรับอ่านเพิ่มเติม
- การบ้าน
- คำถามหลังการเรียน
หมายเหตุเกี่ยวกับคำถามแบบทดสอบ: ทุกคำถามรวมอยู่ในแอปนี้ ทั้ง 48 แบบทดสอบมี 3 คำถามที่เกี่ยวข้องกับบทเรียน โดยแอปนี้สามารถใช้งานแบบ local ได้โดยการทำตามจากโฟลเดอร์
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 | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยการใช้ decision-making methods | Making Decisions | Jasmine |
| 07 | พื้นฐาน JS | อาเรย์และการวนซ้ำ | ทำงานกับข้อมูลด้วยอาเรย์และการวนซ้ำใน JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML ในทางปฏิบัติ | เขียน HTML เพื่อสร้างระบบนิเวศจำลองออนไลน์ โดยเน้นไปที่การจัดวางเลย์เอาต์ | Introduction to HTML | Jen |
| 09 | Terrarium | CSS ในทางปฏิบัติ | เขียน CSS เพื่อตกแต่งระบบนิเวศจำลองออนไลน์ โดยเน้นที่พื้นฐาน CSS รวมถึงการทำ responsive | Introduction to CSS | Jen |
| 10 | Terrarium | JavaScript Closures และการจัดการ DOM | เขียน JavaScript เพื่อสร้างฟังก์ชันให้ระบบนิเวศจำลองเช่นการลากวาง โดยเน้นที่หลักการ closures และการจัดการ DOM | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Build a Typing Game | เรียนรู้วิธีการรับค่าจากคีย์บอร์ดเพื่อขับเคลื่อนการทำงานลอจิกบนแอพ JavaScript ของคุณ | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | การทำงานกับ Browsers | เรียนรู้การทำงานของ browsers ความเป็นมา และวิธีจัดวางองค์ประกอบแรกของส่วนขยาย browser | About Browsers | Jen |
| 13 | Green Browser Extension | สร้างแบบฟอร์ม การเรียกใช้ API และการจัดเก็บตัวแปรบน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยาย browser เพื่อเรียกใช้ API โดยเรียกใช้ตัวแปรที่เก็บบน local storage | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | การทำงานเบื้องหลัง Browser และประสิทธิภาพของเว็บ | ใช้การทำงานเบื้องหลังของ browser ในการจัดการไอคอนของส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการเพิ่มประสิทธิภาพ | Background Tasks and Performance | Jen |
| 15 | Space Game | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้คลาสและคอมโพสิชั่น และ 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 | ตรวจสอบการชน | ทำให้องค์ประกอบชนกันและโต้ตอบกันและกันโดยใช้การกดปุ่มและสร้างฟังก์ชั่นคูลดาวน์เพื่อรับรองประสิทธิภาพของเกม | Collision Detection | Chris |
| 19 | Space Game | การเก็บแต้ม | ทำการคำนวณทางคณิตศาสตร์ตามสถานะของเกม | Keeping Score | Chris |
| 20 | Space Game | การจบเกมและเริ่มใหม่ | เรียนรู้เกี่ยวกับการจบเกมและเริ่มเกมใหม่ รวมถึงการล้างค่าและรีเซ็ตตัวแปร | The Ending Condition | Chris |
| 21 | Banking App | เทมเพลท HTML และ Routes ในเว็บแอพ | เรียนรู้วิธีการสร้างโครงสำหรับเว็บหลายหน้าโดยใช้ routing และ HTML templates | HTML Templates and Routes | Yohan |
| 22 | Banking App | สร้างแบบฟอร์มล็อกอิน และสมัครสมาชิก | เรียนรู้เกี่ยวกับการสร้างฟอร์มและตรวจสอบความถูกต้องของข้อมูล | Forms | Yohan |
| 23 | Banking App | วิธีการดึงและใช้ข้อมูล | วิธีการเดินทางของข้อมูลบนแอพ วิธีการดึง จัดเก็บ และกำจัดข้อมูลเหล่านั้น | Data | Yohan |
| 24 | Banking App | แนวคิดการจัดการ State | เรียนรู้วิธีการเก็บ state ให้คงอยู่ และวิธีจัดการด้วยการโปรแกรม | State Management | Yohan |
การเข้าถึงแบบออฟไลน์
คุณสามารถเปิดเอกสารนี้แบบออนไลน์ได้โดยใช้ Docsify ทำการ Fork repo นี้แล้ว ติดตั้ง Docsify บนอุปกรณ์ของคุณ จากนั้นใช้คำสั่ง docsify serve บน repo ที่ติดตั้งบนเครื่อง เว็บไซต์ก็จะให้บริการบนพอร์ต 3000 บนเครื่องของคุณ: localhost:3000
ไฟล์ PDF ของทุกบทเรียนสามารถหาได้จากที่นี่
หลักสูตรอื่น ๆ
ทีมของเรายังมีหลักสูตรที่น่าสนใจอีกมากมาย ดูได้ตามนี้เลย!: