อยากหัดเขียนโปรแกรมแต่ไม่รู้จะเริ่มภาษาไหน เรื่องไหนก่อน roadmap.sh ช่วยตอบคำถามนี้ได้ มันคือเว็บฟรีที่วาดเส้นทางการเรียนของแต่ละสายอาชีพเดฟเป็นแผนที่ บอกว่าต้องรู้อะไรบ้าง เรียงก่อนหลังยังไง และชี้ไปหาแหล่งเรียนฟรีในแต่ละหัวข้อ
บทความนี้พาใช้ roadmap.sh ให้เป็น ตั้งแต่เลือกสายให้ตรงกับสิ่งที่อยากทำ อ่านแผนที่ ใช้ลิงก์เรียนฟรีโดยไม่เผลอจ่ายเงิน ติ๊กความคืบหน้า ไปจนถึงแผนเรียนสาย Frontend 4 สัปดาห์แรกพร้อมโปรเจกต์ที่ทำได้จริง เหมาะกับมือใหม่และคนที่กำลังเปลี่ยนสายมาเป็นนักพัฒนา
ข้อมูลจากหน้าเว็บจริง ข้อมูลในบทความนี้อ่านจาก roadmap.sh เมื่อปลายเดือนตุลาคม 2026 เนื้อหาบนเว็บเป็นภาษาอังกฤษ และหน้าตาเว็บอาจเปลี่ยนไปตามเวลา เรายังไม่ได้สมัครสมาชิกเพื่อลองระบบติ๊กความคืบหน้าเอง
จบบทความนี้คุณจะ:
- รู้ว่า roadmap.sh คืออะไร และใช้ทำอะไรได้บ้าง
- เลือกสายเดฟให้ตรงกับสิ่งที่อยากทำ เช่น Frontend, Backend หรือ DevOps
- อ่านแผนที่เป็น และรู้ว่าหัวข้อไหนเรียนฟรีได้ อันไหนเสียเงิน
- ใช้ปุ่ม Learning, Done และ Skip ให้มีความหมาย
- มีแผนเรียน Frontend 4 สัปดาห์แรก พร้อมโปรเจกต์จบเดือนแรก
roadmap.sh คืออะไร
roadmap.sh คือเว็บที่รวมเส้นทางการเรียนสายนักพัฒนา วาดออกมาเป็นแผนที่ว่าสายนี้ต้องเรียนอะไร เรียงก่อนหลังยังไง หน้าแรกของเว็บบอกว่าเนื้อหาสร้างโดยชุมชน (community created) และมีทั้งแผนที่ บทความแนะนำ และคอร์ส
| เรื่อง | ข้อมูลจากหน้าเว็บ (ปลาย ต.ค. 2026) |
|---|---|
| แผนที่ตามสายอาชีพ | 31 สาย เช่น Frontend, Backend, DevOps, AI Engineer, Cyber Security |
| ผู้ใช้ที่ลงทะเบียน | มากกว่า 3.2 ล้านคน |
| ดาวบน GitHub | ราว 371,000 ดาว |
สิ่งที่ต้องเข้าใจตั้งแต่แรกคือ roadmap.sh ไม่ใช่คอร์สสอน มันคือแผนที่ บอกว่าควรเรียนอะไรแล้วชี้ไปหาแหล่งเรียน ส่วนการลงมือทำเป็นหน้าที่ของเรา เราไม่ต้องรู้ทุกอย่างบนแผนที่ แค่รู้ว่าก้าวต่อไปคืออะไร
ศัพท์ที่จะเจอบน roadmap.sh
| คำ | ความหมายแบบมือใหม่ |
|---|---|
| Roadmap | แผนที่การเรียนของสายหนึ่ง |
| Role-based roadmap | แผนที่ตามสายอาชีพ เช่น Frontend, Backend |
| Frontend | ส่วนหน้าเว็บที่คนเห็นและกด |
| Backend | ส่วนหลังบ้าน เก็บข้อมูลและประมวลผล |
| Full Stack | ทำได้ทั้งหน้าบ้านและหลังบ้าน |
| DevOps | ดูแลการนำโปรแกรมขึ้นเซิร์ฟเวอร์ และให้มันรันได้ตลอด |
| Topic / Node | กล่องหนึ่งกล่องบนแผนที่ คือหัวข้อหนึ่งเรื่อง |
| Free Resources | ลิงก์บทความและวิดีโอที่เรียนได้ฟรี |
| Learning / Done / Skip | ปุ่มบอกสถานะ กำลังเรียน เรียนจบ หรือข้าม |
| PRO / Premium | ของที่เสียเงินในเว็บ |
เจอศัพท์ที่ไม่รู้จัก ให้คัดลอกไปค้นต่อท้ายด้วยคำว่า "คืออะไร" หรือ "for beginners" เช่น "HTTP คืออะไร"
เลือกสายบน roadmap.sh ให้ตรงกับสิ่งที่อยากทำ
เริ่มจากถามตัวเองว่าอยากสร้างอะไร แล้วเลือกสายตามตารางนี้
| อยากทำ | เริ่มที่สาย | จะได้เรียน (ตัวอย่าง) |
|---|---|---|
| หน้าเว็บสวยๆ ที่กดเล่นได้ | Frontend | HTML, CSS, JavaScript |
| ระบบหลังบ้าน API ฐานข้อมูล | Backend | ภาษาฝั่งเซิร์ฟเวอร์ ฐานข้อมูล API |
| ทำเว็บได้ครบทั้งระบบ | Full Stack | ทั้งสองฝั่ง |
| ดูแลเซิร์ฟเวอร์และระบบอัตโนมัติ | DevOps | Linux, Docker, คลาวด์ |
| แอปมือถือ | Android หรือ iOS | ภาษาของแพลตฟอร์มนั้น |
| วิเคราะห์ข้อมูล | Data Analyst | Excel, SQL, กราฟ |
ยังเลือกไม่ได้ เราแนะนำให้เริ่มที่ Frontend ไว้ก่อน เพราะเห็นผลบนจอทันที และ HTML, CSS กับ JavaScript ใช้ต่อได้แทบทุกสาย (นี่คือความเห็นของเรา ไม่ใช่ของเว็บ)
อ่านแผนที่ roadmap.sh ให้เป็น
แผนที่สาย Frontend เริ่มจากหัวข้อ Internet (เว็บทำงานยังไง, HTTP, ชื่อโดเมน, โฮสติ้ง, DNS, เบราว์เซอร์) แล้วต่อด้วย HTML, CSS และ JavaScript ก่อนจะไปเรื่อง Git, package manager และเฟรมเวิร์กอย่าง React หรือ Vue
วิธีอ่านมีสามข้อ
- อ่านจากบนลงล่าง กล่องบนสุดคือเรื่องที่ควรรู้ก่อน
- กล่องตรงกลางคือหัวข้อหลัก กล่องที่แตกออกด้านข้างคือหัวข้อย่อยของเรื่องนั้น
- ไม่ต้องเก็บทุกกล่อง ทำหัวข้อหลักให้แน่นก่อน แล้วค่อยเลือกหัวข้อย่อยตามงานที่ทำ
กดหัวข้อแล้วได้อะไร: ลิงก์ฟรีกับของเสียเงิน
กดกล่องบนแผนที่ จะมีหน้าต่างอธิบายหัวข้อนั้นเด้งขึ้นมา เราลองกดหัวข้อ "How does the internet work?" ในสาย Frontend แล้วเจอสามส่วนนี้
| ส่วนในหน้าต่าง | คืออะไร | เสียเงินไหม |
|---|---|---|
| คำอธิบายหัวข้อ | สรุปสั้นๆ ว่าเรื่องนี้คืออะไร | ฟรี |
| Free Resources | บทความและวิดีโอจากแหล่งต่างๆ เช่น MDN | ฟรี |
| PRO / Premium Resources | คอร์สของทีมเว็บ หรือคอร์สจากพาร์ตเนอร์ | เสียเงิน |
มือใหม่เรียนจากลิงก์ฟรีอย่างเดียวก็ไปได้ไกลแล้ว ค่อยตัดสินใจเรื่องของเสียเงินทีหลัง เมื่อรู้แล้วว่าชอบสายนี้จริง
ติ๊กความคืบหน้า Learning, Done และ Skip
ในหน้าต่างหัวข้อมีปุ่มบอกสถานะ ใช้แบบนี้
| ปุ่ม | ใช้ตอนไหน |
|---|---|
| Learning | กำลังเรียนหัวข้อนี้อยู่ |
| Done | เรียนจบแล้ว และลองทำเองได้ |
| Skip | รู้แล้ว หรือยังไม่จำเป็นกับงานเรา |
หน้าแผนที่มีปุ่ม Sign up free ให้สมัครสมาชิกฟรี เพื่อให้เว็บจำความคืบหน้าไว้ข้ามเครื่อง แล้วแถบความคืบหน้าของแผนที่จะขยับตาม ไม่อยากสมัครก็ใช้แผนที่แบบอ่านอย่างเดียว แล้วจดความคืบหน้าในสมุดแทนได้
ใช้ปุ่ม Done ให้มีความหมาย
- ดูจบไม่เท่ากับ Done กด Done เมื่อเขียนตัวอย่างเองได้โดยไม่ต้องเปิดคลิปดู
- จดลิงก์ที่เรียนจริง ไว้กลับมาทวนตอนลืม
- ดูแถบความคืบหน้าทุกสัปดาห์ เห็นว่าเดินมาไกลแค่ไหน ช่วยให้ไม่ท้อ
แผนเรียน Frontend 4 สัปดาห์แรก
แผนนี้วันละ 1 ชั่วโมง เป็นแผนของเรา ไม่ใช่ของเว็บ ใช้หัวข้อจากแผนที่ Frontend เรียงตามลำดับ
| สัปดาห์ | หัวข้อบนแผนที่ | ลองทำ |
|---|---|---|
| 1 | Internet: เว็บทำงานยังไง, HTTP, โดเมน, เบราว์เซอร์ | อธิบายให้เพื่อนฟังได้ว่าพิมพ์ URL แล้วเกิดอะไรขึ้น |
| 2 | HTML: หัวข้อ ย่อหน้า ลิงก์ รูป ฟอร์ม | หน้าแนะนำตัวเอง 1 หน้า |
| 3 | CSS: สี ฟอนต์ กล่อง จัดวางด้วย Flexbox | แต่งหน้าแนะนำตัวให้ดูดี ใช้บนมือถือได้ |
| 4 | JavaScript: ตัวแปร เงื่อนไข ฟังก์ชัน คลิกปุ่ม | ปุ่มสลับธีมมืดและสว่างในหน้าเดิม |
ทำทุกวันแบบนี้
- อ่าน 20 นาที กดหัวข้อบนแผนที่ อ่านคำอธิบาย แล้วเปิดลิงก์ฟรี 1 อัน
- ลงมือ 30 นาที เขียนโค้ดตาม แล้วแก้ให้เป็นของตัวเอง
- จด 10 นาที วันนี้ทำอะไรได้ ติดตรงไหน พรุ่งนี้ทำต่อตรงไหน
บทความในเว็บนี้ช่วยได้ในแต่ละสัปดาห์ สัปดาห์ที่ 1 อ่านเรื่อง DNS และ nslookup กับรหัสสถานะ HTTP ส่วนสัปดาห์ที่ 2–4 ลองทำหน้าเว็บแรกด้วย HTML, CSS และ JavaScript
โปรเจกต์จบเดือนแรก
ทำหน้าแนะนำตัวเอง (Portfolio) 1 หน้าที่มีส่วนต่อไปนี้
| ส่วน | ใช้ความรู้จากสัปดาห์ |
|---|---|
| ชื่อ รูป และแนะนำตัวสั้นๆ | 2 (HTML) |
| ลิงก์ไปช่องทางติดต่อ | 2 (HTML) |
| หน้าตาสวย ใช้บนมือถือได้ | 3 (CSS) |
| ปุ่มสลับธีม หรือปุ่มโชว์ข้อความ | 4 (JavaScript) |
ทำเสร็จแล้วเอาขึ้นเว็บฟรีได้ด้วย GitHub Pages จะได้มีลิงก์ส่งให้คนอื่นดู เดือนต่อไปกลับไปที่แผนที่ ดูกล่องถัดจาก JavaScript แล้วเลือกเรื่องต่อไปทีละกล่อง ไม่ต้องรีบข้ามไปเฟรมเวิร์กก่อนที่ JavaScript จะแน่น
สำคัญกว่าแผน ทำทุกวัน วันละนิด ดีกว่าอัดทีเดียวแล้วหายไปเป็นเดือน
กับดักมือใหม่และคำถามที่พบบ่อย
| กับดัก | แก้ยังไง |
|---|---|
| เห็นแผนที่ยาวแล้วท้อ | ดูแค่ 3 กล่องถัดไป ไม่ต้องดูทั้งแผ่น |
| เปลี่ยนสายทุกสัปดาห์ | ตั้งใจอยู่สายเดิมอย่างน้อย 1 เดือน |
| ดูคลิปอย่างเดียว ไม่เขียนเอง | ทุกหัวข้อต้องมีโค้ดที่เขียนเองอย่างน้อย 1 ชิ้น |
| พยายามกด Done ให้ครบทุกกล่อง | หัวข้อย่อยบางอันใช้ Skip ได้ กลับมาทีหลังเมื่อต้องใช้ |
| ซื้อคอร์สก่อนรู้ว่าชอบไหม | ใช้ลิงก์ฟรีให้ครบเดือนแรกก่อน |
ส่วนคำถามที่คนถามบ่อยเกี่ยวกับ roadmap.sh มีดังนี้
| คำถาม | คำตอบ |
|---|---|
| roadmap.sh ต้องจ่ายเงินไหม | ดูแผนที่และลิงก์ฟรีได้โดยไม่จ่าย บางรายการติด PRO หรือ Premium ซึ่งเสียเงิน |
| ภาษาอังกฤษไม่เก่ง ใช้ได้ไหม | ได้ ใช้ตัวแปลภาษาของเบราว์เซอร์ช่วย และค้นชื่อหัวข้อเป็นภาษาไทยเพิ่ม |
| ต้องเรียนจบทั้งแผนที่ถึงจะหางานได้ไหม | ไม่ใช่ แผนที่รวมเรื่องที่ใช้ตลอดอาชีพ ไม่ใช่เช็กลิสต์ก่อนสมัครงาน |
| ต้องสมัครสมาชิกไหม | ไม่จำเป็นถ้าแค่อ่าน สมัครฟรีเมื่ออยากให้เว็บจำความคืบหน้า |
สรุป
- roadmap.sh คือเว็บแผนที่การเรียนสายนักพัฒนาฟรีที่ชุมชนช่วยกันสร้าง มี 31 สายอาชีพ
- เลือกสายตามสิ่งที่อยากทำ ยังไม่แน่ใจให้เริ่มที่ Frontend
- อ่านแผนที่จากบนลงล่าง ทำหัวข้อหลักก่อน ไม่ต้องเก็บทุกกล่อง
- เรียนจาก Free Resources ได้ฟรี ส่วนที่ติด PRO หรือ Premium เสียเงิน
- กด Done เมื่อลงมือทำเองได้ ไม่ใช่แค่ดูจบ
- จบเดือนแรกควรมีหน้า Portfolio ของตัวเอง 1 หน้า
| ขั้น | ทำอะไร |
|---|---|
| 1 | เข้า roadmap.sh เลือกสาย (ยังไม่แน่ใจเริ่ม Frontend) |
| 2 | อ่านแผนที่จากบนลงล่าง ทำหัวข้อหลักก่อน |
| 3 | กดกล่อง อ่านคำอธิบาย ใช้ Free Resources |
| 4 | ลงมือเขียนเองทุกหัวข้อ |
| 5 | ติ๊ก Learning, Done หรือ Skip (สมัครฟรีถ้าอยากให้เว็บจำ) |
| 6 | จบเดือนแรกมีหน้า Portfolio 1 หน้า |
ลิงก์ที่ใช้ในบทความ
พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ