เรียน Frontend Development

เรียนพัฒนาเว็บ Frontend ตั้งแต่พื้นฐานจนถึงระดับอาวุโส เรียน HTML, CSS และ JavaScript ควบคู่กันตั้งแต่บทเรียนแรก

มีอะไรบ้าง

• 41 คอร์ส 163 บทเรียนสั้น: ระดับ A1–C2

• โปรแกรมแก้ไขโค้ดแบบเรียลไทม์: แบ่งหน้าจอเป็นช่อง HTML, CSS และ JavaScript พร้อมตัวอย่างที่แสดงผลทันทีด้านล่างบนมือถือ

• เทมเพลตโปรเจกต์ HTML, React, Vue, Angular, Node หรือ TypeScript

• 20 โปรเจกต์พร้อมคำแนะนำทีละขั้น: หน้าสูตรอาหาร แบบฟอร์มติดต่อ ตารางการ์ด แถบนำทาง ตารางข้อมูล และอื่น ๆ

• 15 ภารกิจแก้บั๊กจริง: เลย์เอาต์กว้าง 375px พัง รูปภาพทำให้ LCP ช้าลง ฟอร์มขัดขวางการเลื่อนด้วยปุ่ม Tab หน่วยความจำรั่วในคอมโพเนนต์ และการทดสอบที่ผ่านในเครื่องแต่ไม่ผ่านใน CI

• ข้อสอบปลายหลักสูตรและใบรับรองเมื่อเรียนจบ

• 22 ภาษา

เส้นทางเดียว จากมือใหม่สู่ระดับอาวุโส

• พื้นฐานเว็บ, HTML, ฟอร์ม และมาร์กอัปเชิงความหมาย

• พื้นฐาน CSS, ตัวแปร, การเปลี่ยนภาพ, แอนิเมชัน, flexbox และ grid

• การออกแบบแบบ Responsive สำหรับทุกหน้าจอ

• JavaScript, อาร์เรย์, ออบเจ็กต์, ES6+, DOM, browser APIs และ async

• เครื่องมือสำหรับนักพัฒนาฟรอนต์เอนด์, Git, เวิร์กโฟลว์ทีม, โมดูล และเครื่องมือ build

• TypeScript ตั้งแต่พื้นฐานจนถึงแพตเทิร์นขั้นสูง

• React ตั้งแต่พื้นฐาน, useEffect, การดึงข้อมูล, hooks และแพตเทิร์นขั้นสูง

• Vue 3, Composition API และแพตเทิร์นขั้นสูง

• การจัดการ state, REST APIs, WebSockets และ UI แบบเรียลไทม์

• การเรนเดอร์ฝั่งเซิร์ฟเวอร์: Next.js, Nuxt 3; progressive web apps (PWA)

• การช่วยการเข้าถึง, การทดสอบ, ประสิทธิภาพ และความปลอดภัย

• สถาปัตยกรรม CSS, design systems, CI/CD และเครื่องมือสมัยใหม่

ฝึกฝนให้จำได้

• แบบทดสอบและทบทวนบทเรียน

• สรุปย่อ: รายการไวยากรณ์และแพตเทิร์น 83 รายการ

• 50 คำถามสัมภาษณ์พร้อมคำตอบ สำหรับนักพัฒนาฟรอนต์เอนด์และนักพัฒนาเว็บ

• คลังตัวอย่างโค้ดที่แก้ไขได้

• บันทึกโค้ด โน้ต และบทเรียนโปรด

• โจทย์ท้าทายการเขียนโค้ด: ชวนเพื่อนด้วยรหัส หรือแข่งกับคู่ต่อสู้แบบสุ่ม

• World Coding Challenge: แข่งขันรอบระดับโลกวันละสามรอบใน JavaScript, Python และภาษาอื่น ๆ

• สถิติการเรียนต่อเนื่อง, XP, กระดานผู้นำ และการแจ้งเตือนประจำวัน

AI Mentor

• ถาม AI เกี่ยวกับบั๊ก แนวคิด ข้อผิดพลาด บทเรียน หรือโค้ดของคุณ

• AI playground: อธิบายหน้าเว็บเพื่อสร้างโค้ด

• ฟรี: ถาม AI ได้วันละ 3 คำถาม; Pro: ถามได้ไม่จำกัด

เหมาะสำหรับใคร

• มือใหม่ที่อยากเป็นนักพัฒนาเว็บ

• นักศึกษาที่ฝึกควบคู่กับ Frontend course

• นักออกแบบที่ต้องการสร้างผลงานจากดีไซน์ของตน

• นักพัฒนา HTML/CSS ที่กำลังเรียน JavaScript, TypeScript และเฟรมเวิร์ก

• ผู้ที่เปลี่ยนสายงานและเตรียมตัวสำหรับงานนักพัฒนาฟรอนต์เอนด์งานแรก

วิธีใช้งาน

1. เริ่มเรียนฟรี: ยินดีต้อนรับสู่การพัฒนา Frontend

2. แก้ไขโค้ดในช่องต่าง ๆ แล้วดูตัวอย่างอัปเดตทันที

3. เรียน JavaScript, เลย์เอาต์ Responsive, TypeScript, React และ Vue

4. สร้างโปรเจกต์ตามคำแนะนำ พร้อมแก้บั๊กจริง

5. ทำข้อสอบปลายหลักสูตรให้ผ่านเพื่อรับใบรับรอง

ฟรีและ Pro

ฟรี: คอร์สแรก โปรเจกต์แรกที่มีคำแนะนำ ภารกิจแก้บั๊กสองภารกิจ โปรแกรมแก้ไขโค้ด และคำถาม AI Mentor วันละ 3 ข้อ; มีโฆษณา Pro: ทุกคอร์ส โปรเจกต์และภารกิจทั้งหมด ข้อสอบรับใบรับรอง และ AI ไม่จำกัด; ไม่มีโฆษณา