0Pricing
Frontend Academy icon
HTMLFrontendWebBeginnerระดับ A1 → C215 ภาษา

Frontend Academy

พัฒนาเว็บไซต์ที่สวยงามและตอบสนองต่อขนาดหน้าจอได้ด้วย Frontend Development Academy. เส้นทางการเรียนรู้ของ CoddyKit ที่มี 41 คอร์สสั้นและ 163 บทเรียนแบบโต้ตอบ พร้อมติวเตอร์ AI ที่อยู่เคียงข้างคุณตลอด 24/7

คอร์ส
41
บทเรียน
163
ขั้นตอนแบบโต้ตอบ
2,186
เริ่มต้นได้ฟรี
คอร์ส 1
GET IT ONGoogle PlayDownload on theApp Store
หลักสูตร

41 คอร์สในเส้นทางนี้

ทุกคอร์สในเส้นทาง Frontend Academy เรียงตามลำดับการเรียนรู้ คอร์สแรกเรียนได้ฟรี

1

A13 บทเรียนฟรี

ทำความเข้าใจว่านักพัฒนาส่วนหน้าทำอะไร เหตุใดจึงเป็นหนึ่งในอาชีพเทคโนโลยีที่เป็นที่ต้องการและสร้างสรรค์ที่สุด และ HTML, CSS กับ JavaScript ทำงานร่วมกันอย่างไร

  1. 1การพัฒนาส่วนหน้าคืออะไร
  2. 2สามประสานเทคโนโลยีส่วนหน้า
  3. 3อนาคตของคุณในฐานะผู้พัฒนาส่วนหน้า
เริ่มเรียนฟรี
2

A14 บทเรียนPRO

ทำความเข้าใจพื้นฐานของเว็บ: เบราว์เซอร์ร้องขอหน้าเว็บอย่างไร DNS ทำอะไร HTTP ทำงานอย่างไร และเกิดอะไรขึ้นเมื่อคุณพิมพ์ URL เมื่อเรียนจบ คุณจะรู้ได้อย่างชัดเจนว่าเบราว์เซอร์ทำอะไรบ้างก่อนที่พิกเซลแม้แ…

  1. 1DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ
  2. 2HTML CSS และ JavaScript: หน้าที่ของแต่ละชั้น
  3. 3หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
3

A14 บทเรียนPRO

เรียนรู้ส่วนประกอบพื้นฐานของทุกหน้าเว็บ เขียนเอกสาร HTML5 ที่ถูกต้องด้วยองค์ประกอบเชิงความหมาย จัดโครงสร้างเนื้อหาด้วยหัวข้อและรายการ ฝังรูปภาพและลิงก์ และสร้างแบบฟอร์มที่เข้าถึงได้

  1. 1โครงสร้างเอกสาร: DOCTYPE html head body
  2. 2แท็กเชิงความหมาย: header nav main article footer
  3. 3ข้อความ รูปภาพ ลิงก์ และรายการ
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
4

A14 บทเรียนPRO

จัดสไตล์ HTML ได้อย่างมั่นใจ เรียนรู้การทำงานของแคสเคดและความจำเพาะ ใช้สีและตัวอักษรอย่างเหมาะสม เชี่ยวชาญแบบจำลองกล่อง และควบคุมเค้าโครงด้วยคุณสมบัติการแสดงผลและการจัดตำแหน่ง

  1. 1ตัวเลือกและการเรียงซ้อน
  2. 2สี ตัวอักษร และโมเดลกล่อง
  3. 3พื้นฐาน display: block inline flex grid
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
5

A14 บทเรียนPRO

เขียนโปรแกรม JavaScript แรกของคุณ เรียนรู้การประกาศตัวแปร การทำงานกับชนิดข้อมูลพื้นฐาน การกำหนดฟังก์ชัน และการควบคุมลำดับการทำงานของโปรแกรมด้วยเงื่อนไขและลูป

  1. 1ตัวแปร: let const var และขอบเขต
  2. 2ชนิดข้อมูล: string number boolean null undefined
  3. 3ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
6

A14 บทเรียนPRO

ทำงานเสมือนนักพัฒนาส่วนหน้าเว็บมืออาชีพ ใช้ Chrome DevTools เพื่อตรวจสอบและแก้จุดบกพร่อง ตั้งค่า VSCode พร้อมส่วนขยายที่เป็นประโยชน์ และติดตั้งเครื่องมือตรวจสอบคุณภาพโค้ดอย่าง Prettier และ ESLint

  1. 1Chrome DevTools: Elements Console Network
  2. 2VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด
  3. 3การตั้งค่า Prettier และ ESLint
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
7

A24 บทเรียนPRO

เพิ่มชนิดข้อมูลให้ JavaScript และค้นหาข้อผิดพลาดก่อนถึงเบราว์เซอร์ เรียนรู้ระบบชนิดข้อมูลของ TypeScript ใส่คำกำกับให้ตัวแปรและฟังก์ชัน กำหนดส่วนเชื่อมต่อ และคอมไพล์ TypeScript เป็น JavaScript ด้วย ts…

  1. 1เหตุผลที่ควรใช้ TypeScript: ตรวจจับบั๊กระหว่างคอมไพล์
  2. 2ชนิดข้อมูลพื้นฐาน ยูเนียน และชื่อแทนชนิดข้อมูล
  3. 3อินเทอร์เฟซและชนิดข้อมูลออบเจ็กต์
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
8

A24 บทเรียนPRO

ทำให้ HTML โต้ตอบได้ด้วย JavaScript เลือกองค์ประกอบ รับฟังเหตุการณ์ อ่านและเปลี่ยนเนื้อหา และสร้างหรือลบองค์ประกอบแบบไดนามิกด้วย Document Object Model

  1. 1querySelector และ querySelectorAll
  2. 2addEventListener และออบเจ็กต์เหตุการณ์
  3. 3การเปลี่ยนเนื้อหา: textContent innerHTML classList
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
9

A24 บทเรียนPRO

สร้างโครงร่างที่ใช้งานได้กับหน้าจอทุกขนาด เรียนรู้เมตาแท็ก viewport ใช้ Flexbox และ Grid เพื่อสร้างโครงร่างที่ยืดหยุ่น และเขียนมีเดียคิวรีด้วยแนวทางเริ่มจากมือถือ

  1. 1เมตาแท็ก viewport
  2. 2Flexbox สำหรับการจัดวาง
  3. 3CSS Grid สำหรับการจัดวาง
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
10

A24 บทเรียนPRO

เพิ่มพูนความรู้ด้าน HTML สร้างฟอร์มที่ทุกคนเข้าถึงได้อย่างสมบูรณ์ด้วยแอตทริบิวต์ ARIA ใช้ชนิดอินพุตทั้งหมดของ HTML5 ใช้การตรวจสอบความถูกต้องในตัว และเขียนมาร์กอัปที่สื่อโครงสร้างให้ไคลเอนต์ทุกประเภทเ…

  1. 1ตัวควบคุมฟอร์ม: ชนิด input select textarea
  2. 2ARIA และการเข้าถึง: label role aria-*
  3. 3HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
11

A24 บทเรียนPRO

ยกระดับ JavaScript ด้วยไวยากรณ์สมัยใหม่และเมธอดในตัวอันทรงพลัง จัดการอาร์เรย์ด้วย map, filter และ reduce แยกโครงสร้างออบเจกต์ กระจายข้อมูล ใช้สตริงแม่แบบ และเขียนโค้ดแบบแยกส่วนด้วยโมดูล ES

  1. 1เมธอด Array: map, filter, reduce และ find
  2. 2การแยกโครงสร้างออบเจ็กต์และ Spread
  3. 3Template Literals และ Optional Chaining
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
12

A24 บทเรียนPRO

ใช้ Git อย่างมีประสิทธิภาพในฐานะนักพัฒนาส่วนหน้าเว็บ เรียนรู้คำสั่งหลักสำหรับบันทึกงาน ทำความเข้าใจการแตกแขนงเพื่อพัฒนาฟีเจอร์ ส่งงานไปยัง GitHub และทำงานร่วมกันผ่านคำขอรวมโค้ด

  1. 1git init, add, commit และ status
  2. 2การแตกแขนง: branch, checkout และ merge
  3. 3คลังเก็บระยะไกล: push, pull และ clone
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
13

A24 บทเรียนPRO

ทำให้ส่วนติดต่อมีชีวิตชีวาด้วยการเคลื่อนไหวของ CSS ใช้คุณสมบัติกำหนดเองเพื่อสร้างโทเค็นการออกแบบที่ดูแลรักษาง่าย เพิ่มการเปลี่ยนผ่านที่ราบรื่นให้การเปลี่ยนสถานะ สร้างแอนิเมชันด้วยคีย์เฟรม และเคารพการ…

  1. 1คุณสมบัติกำหนดเองของ CSS: การประกาศและการอัปเดต
  2. 2การเปลี่ยนผ่าน: คุณสมบัติ ระยะเวลา และจังหวะ
  3. 3แอนิเมชัน @keyframes
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
14

B14 บทเรียนPRO

ก้าวข้ามพื้นฐานเพื่อเชี่ยวชาญการจัดวางด้วย CSS อย่างแท้จริง ศึกษาการจัดแนวและการตัดบรรทัดของ Flexbox อย่างเจาะลึก ใช้พื้นที่แม่แบบของ CSS Grid และ auto-fit ผสานเทคนิคทั้งสองเข้าด้วยกัน และใช้คุณสมบัต…

  1. 1เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ
  2. 2CSS Grid: template-areas, auto-fit และ minmax
  3. 3การใช้ Flexbox และ Grid ร่วมกัน
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
15

B14 บทเรียนPRO

ทำความเข้าใจชุดเครื่องมือ JavaScript สมัยใหม่ ใช้ไวยากรณ์โมดูล ES จัดการแพ็กเกจด้วย npm เปิดเซิร์ฟเวอร์พัฒนาทันทีด้วย Vite และเรียนรู้แนวคิดการรวมชุดโค้ดที่ช่วยให้ชุดโค้ดสำหรับใช้งานจริงมีขนาดเล็ก

  1. 1ES Modules: import, export และ dynamic import
  2. 2npm และ package.json: dependencies และ scripts
  3. 3Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
16

B14 บทเรียนPRO

ศึกษาให้ลึกยิ่งขึ้นเกี่ยวกับระบบชนิดข้อมูลของ TypeScript เขียนฟังก์ชันทั่วไปที่นำกลับมาใช้ซ้ำได้ ใช้ชนิดข้อมูลอรรถประโยชน์เพื่อแปลงส่วนเชื่อมต่อ สร้างชนิดข้อมูลแบบแมปและแบบมีเงื่อนไข และจำกัดชนิดข้อม…

  1. 1Generics: T, extends และข้อจำกัด
  2. 2ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit
  3. 3ชนิดข้อมูลแบบแมปและชนิดข้อมูลแบบมีเงื่อนไข
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
17

B14 บทเรียนPRO

สร้างแอปพลิเคชัน React แรกของคุณ ทำความเข้าใจไวยากรณ์ JSX ประกอบส่วนติดต่อจากคอมโพเนนต์แบบฟังก์ชัน ส่งข้อมูลด้วยพร็อพส์ และจัดการสถานะภายในด้วยฮุก useState เพื่อสร้างส่วนติดต่อแบบโต้ตอบ

  1. 1JSX: ไวยากรณ์และการแปลงโค้ด
  2. 2คอมโพเนนต์แบบฟังก์ชันและ Props
  3. 3Hook useState: สถานะและการเรนเดอร์ซ้ำ
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
18

B14 บทเรียนPRO

ซิงโครไนซ์คอมโพเนนต์ React กับระบบภายนอก เรียนรู้การทำงานของ useEffect ดึงข้อมูลจากเอพีไอเมื่อคอมโพเนนต์เริ่มทำงาน แสดงสถานะกำลังโหลดและข้อผิดพลาด และล้างผลข้างเคียงอย่างถูกต้องด้วย AbortController

  1. 1พื้นฐาน useEffect: dependencies และการทำความสะอาด
  2. 2การดึงข้อมูลเมื่อเมานต์
  3. 3การจัดการสถานะกำลังโหลดและข้อผิดพลาด
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
19

B14 บทเรียนPRO

สร้างแอปพลิเคชัน Vue 3 แรกโดยใช้คอมโพเนนต์แบบไฟล์เดียว เรียนรู้ Options API คำสั่งหลัก และวิธีสื่อสารระหว่างคอมโพเนนต์แม่กับลูกด้วยพร็อพส์และอีมิต

  1. 1Vue SFC: script, template และ style
  2. 2Options API: data, methods และ computed
  3. 3คำสั่ง: v-if, v-for, v-bind และ v-on
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
20

B14 บทเรียนPRO

สร้างส่วนติดต่อที่ทุกคนใช้งานได้ ทำความเข้าใจระดับความสอดคล้องตาม WCAG ใช้ HTML เชิงความหมายเป็นพื้นฐานด้านการเข้าถึงได้ ใช้บทบาทและแอตทริบิวต์ ARIA อย่างถูกต้อง และทำให้ใช้งานด้วยแป้นพิมพ์ได้อย่างสม…

  1. 1ระดับ WCAG: A, AA และ AAA
  2. 2HTML เชิงความหมายในฐานะรากฐาน
  3. 3บทบาทและแอตทริบิวต์ ARIA
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
21

B24 บทเรียนPRO

เชี่ยวชาญ JavaScript แบบไม่พร้อมกันตั้งแต่พื้นฐาน ทำความเข้าใจลูปเหตุการณ์ เปลี่ยนจากรูปแบบคอลแบ็กไปใช้ Promise และเขียนโค้ด async/await ที่อ่านง่ายพร้อมจัดการข้อผิดพลาดอย่างเหมาะสม

  1. 1Event Loop: Call Stack, Queue และ Microtasks
  2. 2Callback และ Callback Hell
  3. 3Promise: then, catch, finally และ Promise.all
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
22

B24 บทเรียนPRO

เชี่ยวชาญเอพีไอฮุกของ React อย่างครบถ้วน แชร์ข้อมูลโดยไม่ต้องส่งพร็อพส์ผ่านคอมโพเนนต์หลายชั้นด้วย useContext จัดการสถานะซับซ้อนด้วย useReducer เพิ่มประสิทธิภาพด้วย useMemo และ useCallback และแยกตรรกะ…

  1. 1useContext สำหรับสถานะส่วนกลาง
  2. 2useReducer สำหรับสถานะที่ซับซ้อน
  3. 3useMemo และ useCallback เพื่อประสิทธิภาพ
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
23

B24 บทเรียนPRO

ปลดล็อกพลังของ Vue 3 อย่างเต็มที่ด้วย Composition API ใช้ ref และ reactive สำหรับสถานะแบบตอบสนอง ใช้ computed และ watch สำหรับค่าที่คำนวณจากข้อมูลอื่นกับผลข้างเคียง และสร้างคอมโพสเอเบิลที่นำกลับมาใช้…

  1. 1ref() และ reactive()
  2. 2computed() และ watch()
  3. 3ฟังก์ชัน setup() และ script setup
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
24

B24 บทเรียนPRO

จัดการสถานะทั่วทั้งแอปพลิเคชันอย่างมีประสิทธิภาพ เรียนรู้ Redux Toolkit สำหรับ React รู้จัก Zustand ที่มีน้ำหนักเบาในฐานะทางเลือกที่เรียบง่ายกว่า ใช้ Pinia สำหรับ Vue และเข้าใจหลักการที่ช่วยตัดสินใจว…

  1. 1Redux Toolkit: createSlice และ configureStore
  2. 2Zustand สำหรับสถานะ React แบบเบา
  3. 3Pinia สำหรับ Vue: defineStore และ storeToRefs
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
25

B24 บทเรียนPRO

เขียนการทดสอบอัตโนมัติสำหรับโค้ดส่วนหน้าเว็บ ตั้งค่า Jest ทดสอบคอมโพเนนต์ React ด้วย Testing Library ทดสอบคอมโพเนนต์ Vue และจำลองโมดูลกับการเรียกเอพีไอ เพื่อให้การทดสอบรวดเร็วและแยกจากกัน

  1. 1การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน
  2. 2@testing-library/react: render และ userEvent
  3. 3@testing-library/vue: การเมานต์คอมโพเนนต์
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
26

B24 บทเรียนPRO

เขียน CSS ที่ขยายต่อได้ เรียนรู้รูปแบบการตั้งชื่อ BEM เพื่อสร้างตัวเลือกที่คาดเดาได้ จำกัดขอบเขตสไตล์ด้วย CSS Modules เพิ่ม CSS โดยตรงใน JavaScript ด้วย styled-components และ Emotion และใช้ Tailwind…

  1. 1ระเบียบวิธี BEM: Block, Element และ Modifier
  2. 2CSS Modules: ชื่อคลาสที่จำกัดขอบเขต
  3. 3CSS-in-JS: Styled-components และ Emotion
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
27

B24 บทเรียนPRO

เชื่อมต่อส่วนหน้าเว็บกับเอพีไอของส่วนหลัง ใช้ Fetch API ในตัวกับเมธอด HTTP ทั้งหมด เพิ่ม Axios เพื่อใช้ตัวดักจับและ URL พื้นฐาน จัดการข้อผิดพลาด HTTP อย่างเหมาะสม และแคชข้อมูลจากเซิร์ฟเวอร์ด้วย SWR ห…

  1. 1Fetch API: GET, POST, PUT และ DELETE
  2. 2Axios: Interceptors และ Base URL
  3. 3การจัดการข้อผิดพลาด: รหัสสถานะ HTTP
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
28

B24 บทเรียนPRO

สร้างแอปพลิเคชัน React สำหรับใช้งานจริงด้วย Next.js ทำความเข้าใจทั้ง Pages Router และ App Router สมัยใหม่ แยกความแตกต่างระหว่างคอมโพเนนต์ฝั่งเซิร์ฟเวอร์กับฝั่งไคลเอนต์ เลือกกลยุทธ์การเรนเดอร์ที่เหมาะ…

  1. 1Pages Router เทียบกับ App Router
  2. 2คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์
  3. 3SSG, SSR และ ISR
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
29

B24 บทเรียนPRO

สร้างแอปพลิเคชัน Vue แบบครบชุดด้วย Nuxt 3 ใช้การกำหนดเส้นทางจากไฟล์และการนำเข้าอัตโนมัติเพื่อลดโค้ดซ้ำ ดึงข้อมูลเซิร์ฟเวอร์ด้วยคอมโพสเอเบิล ขยายความสามารถด้วยโมดูล และนำไปใช้งานเป็นเว็บสแตติกหรือ SSR

  1. 1การกำหนดเส้นทางตามไฟล์และการนำเข้าอัตโนมัติ
  2. 2useFetch และ useAsyncData
  3. 3โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
30

B24 บทเรียนPRO

เปลี่ยนเว็บไซต์ให้มีประสบการณ์คล้ายแอป เขียน Web App Manifest เพื่อให้ติดตั้งได้ ลงทะเบียน Service Workers เพื่อรองรับการใช้งานออฟไลน์ ใช้กลยุทธ์การแคช และเพิ่มการแจ้งเตือนแบบพุช

  1. 1เว็บแอปแม니เฟสต์
  2. 2การลงทะเบียนและวงจรชีวิตของ Service Worker
  3. 3กลยุทธ์การแคชออฟไลน์: CacheFirst และ NetworkFirst
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
31

B24 บทเรียนPRO

สร้างส่วนติดต่อผู้ใช้แบบเรียลไทม์ ใช้เอพีไอ WebSocket ในตัว ผสานไลบรารีไคลเอนต์ Socket.io รับเหตุการณ์ที่เซิร์ฟเวอร์ส่งเพื่อสร้างกระแสข้อมูลทางเดียว และใช้รูปแบบส่วนติดต่อสำหรับข้อมูลสด เช่น การอัปเด…

  1. 1WebSocket API: เปิด รับข้อความ ปิด และข้อผิดพลาด
  2. 2การเชื่อมต่อ Socket.io ฝั่งไคลเอนต์
  3. 3เหตุการณ์จากเซิร์ฟเวอร์สำหรับการสตรีมทางเดียว
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
32

B24 บทเรียนPRO

เชี่ยวชาญชุดเครื่องมือ JavaScript ที่พัฒนาอย่างรวดเร็ว ขยาย Vite ด้วยปลั๊กอินและใช้สำหรับ SSR ทำความเข้าใจว่า esbuild ทำความเร็วได้อย่างไร จัดการพื้นที่ทำงานด้วย pnpm และเร่งการสร้างโมโนรีโพด้วยกระบว…

  1. 1Vite: ระบบปลั๊กอินและโหมด SSR
  2. 2esbuild: ความเร็วและข้อจำกัด
  3. 3pnpm Workspaces สำหรับโมโนรีโพ
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
33

C14 บทเรียนPRO

ทำให้เว็บไซต์รวดเร็วและวัดผลการปรับปรุง ทำความเข้าใจ Core Web Vitals ตรวจสอบด้วย Lighthouse ปรับแต่งรูปภาพสำหรับเว็บ และลดขนาดข้อมูล JavaScript ด้วยการแยกชุดโค้ดและการโหลดเมื่อจำเป็น

  1. 1ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS
  2. 2การตรวจสอบและให้คะแนนด้วย Lighthouse
  3. 3การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
34

C14 บทเรียนPRO

ผลักดัน TypeScript ให้ถึงขีดจำกัด สร้างชนิดข้อมูลด้วยชนิดสตริงแม่แบบ ใส่คำกำกับให้คอมโพเนนต์และฮุก React ด้วยชนิดทั่วไปที่แม่นยำ เปิดโหมดเข้มงวดเพื่อกำจัดการใช้ any ที่ไม่ปลอดภัย และสำรวจเดคอเรเตอร์

  1. 1ชนิด Template Literal
  2. 2เดคอเรเตอร์และข้อมูลเมตา
  3. 3TypeScript กับ React: เจเนริกของ FC และฮุก
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
35

C14 บทเรียนPRO

เขียนโค้ด React ในแบบที่ผู้สร้างไลบรารีเขียน สร้างคอมโพเนนต์แบบประกอบที่มี Context รองรับ ใช้พร็อพส์สำหรับเรนเดอร์และ HOC เพื่อแชร์ข้อกังวลร่วม เรนเดอร์นอกโครงสร้างด้วยพอร์ทัล และกู้คืนจากการล่มด้วยข…

  1. 1คอมโพเนนต์แบบประกอบร่วมกับ Context
  2. 2พร็อพส์สำหรับเรนเดอร์และรูปแบบ HOC
  3. 3พอร์ทัลสำหรับโมดัลและทูลทิป
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
36

C14 บทเรียนPRO

เชี่ยวชาญรูปแบบ Vue 3 ขั้นสูงที่ใช้ในแอปพลิเคชันมืออาชีพ แชร์ตรรกะข้ามโครงสร้างคอมโพเนนต์ด้วย provide/inject โหลดคอมโพเนนต์แบบไม่พร้อมกันด้วย Suspense เขียนคำสั่งกำหนดเอง และเพิ่มความสามารถให้แอปด้วย…

  1. 1provide() และ inject() สำหรับการฉีดการพึ่งพา
  2. 2คอมโพเนนต์อะซิงก์และ Suspense
  3. 3คำสั่งกำหนดเอง
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
37

C14 บทเรียนPRO

ออกแบบแอปพลิเคชันส่วนหน้าเว็บที่ขยายรองรับทีมขนาดใหญ่ ใช้ Atomic Design กับลำดับชั้นของคอมโพเนนต์ จัดการหลายแพ็กเกจด้วยโมโนรีโพของ Turborepo ใช้ Module Federation สำหรับไมโครฟรอนต์เอนด์ และจัดระเบียบ…

  1. 1การออกแบบแบบอะตอมิก: อะตอม โมเลกุล ออร์แกนิซึม
  2. 2การตั้งค่าโมโนรีโพด้วย Turborepo
  3. 3ไมโครฟรอนต์เอนด์: Module Federation
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
38

C14 บทเรียนPRO

สร้างและดูแลไลบรารีคอมโพเนนต์ที่ใช้ร่วมกัน จัดทำเอกสารคอมโพเนนต์ใน Storybook กำหนดโทเค็นการออกแบบด้วย Style Dictionary กำหนดรุ่นและเผยแพร่ไปยัง npm และผสานระบบเข้ากับแอปพลิเคชันที่นำไปใช้

  1. 1Storybook: สตอรี คอนโทรล และเอกสาร
  2. 2โทเค็นการออกแบบด้วย Style Dictionary
  3. 3การกำหนดเวอร์ชันและเผยแพร่ไปยัง npm
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
39

C14 บทเรียนPRO

ปกป้องผู้ใช้จากภัยคุกคามความปลอดภัยบนเว็บ ป้องกัน XSS ด้วยการเข้ารหัสผลลัพธ์และนโยบายความปลอดภัยเนื้อหา ป้องกัน CSRF ด้วยคุกกี้และโทเค็น SameSite ตั้งค่าเฮดเดอร์ CSP และใช้ OAuth ในเบราว์เซอร์อย่างปล…

  1. 1การป้องกัน XSS: การเข้ารหัสเอาต์พุตและ CSP
  2. 2CSRF: คุกกี้และโทเค็น SameSite
  3. 3Content Security Policy: nonce และแฮช
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
40

C14 บทเรียนPRO

ทำให้การส่งมอบส่วนหน้าเว็บเป็นอัตโนมัติ เขียนเวิร์กโฟลว์ GitHub Actions เพื่อตรวจรูปแบบ ทดสอบ และสร้างทุกครั้งที่ส่งโค้ด นำไปใช้งานอัตโนมัติบน Vercel, Netlify และ Cloudflare Pages จัดการตัวแปรสภาพแวด…

  1. 1GitHub Actions สำหรับฟรอนต์เอนด์: ตรวจรูปแบบ ทดสอบ และบิลด์
  2. 2การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages
  3. 3ตัวแปรสภาพแวดล้อมใน CI
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
41

C24 บทเรียนPRO

ทำงานในระดับนักพัฒนาอาวุโส ใช้กรอบคิดเฉพาะส่วนหน้าเว็บในการสัมภาษณ์การออกแบบระบบ ส่งเสริมวัฒนธรรมการทบทวนโค้ดที่ดี พัฒนานักพัฒนารุ่นเยาว์ผ่านการให้คำปรึกษาและเอกสาร และติดตามมาตรฐานเว็บที่เปลี่ยนแปลง…

  1. 1การสัมภาษณ์การออกแบบระบบฟรอนต์เอนด์
  2. 2วัฒนธรรมการรีวิวโค้ดและแนวปฏิบัติที่ดีของ PR
  3. 3การให้คำปรึกษาและเอกสารทางเทคนิค
  4. +1 เพิ่มเติม
เริ่มเรียนฟรีปลดล็อกด้วย PRO
CoddyKit PRO

ปลดล็อกทั้ง 41 คอร์สในเส้นทางนี้และทุกเส้นทางอื่น

ติวเตอร์ AI การสอบวัดระดับ และใบรับรอง ใช้งานได้บนเว็บ iOS และ Android

ดูแผนทั้งหมด
รายปี$29.90 / ปีประมาณ $2.49 ต่อเดือนจ่ายครั้งเดียวตลอดชีพ$69.99 ครั้งเดียวไม่มีการต่ออายุ ใช้ PRO ได้ตลอดไป
ภาพรวมคอร์ส

สร้างทั้งสเปกตรัมของ Frontend สมัยใหม่

Frontend development คือวินัยในการแปลงโค้ดให้กลายเป็นทุกสิ่งที่ผู้ใช้มองเห็นและโต้ตอบในเบราวเซอร์ — โครงสร้าง HTML การนำเสนอ CSS พฤติกรรม JavaScript และเฟรมเวิร์กและเครื่องมือที่รวมทั้งหมดนี้เข้าด้วยกันในระดับ production นอกจากนี้เส้นทางนี้ครอบคลุมสแต็กที่สมบูรณ์: จากวิธีการที่เว็บดำเนินการส่งมอบหน้าไปจนถึงการเขียน React และ Vue applications ที่ปลอดภัยในด้าน type การเพิ่มประสิทธิภาพ performance และการปรับใช้ผ่าน CI/CD pipeline

สิ่งที่คุณจะเรียนรู้

คุณจะเริ่มต้นด้วย HTML CSS และ JavaScript fundamentals จากนั้นเชี่ยวชาญ TypeScript DOM และ Browser APIs responsive design และรูปแบบ ES6+ รวมถึง async programming และ modules จากนั้นคุณจะย้ายไปเรียน React (hooks advanced patterns Next.js SSR) และ Vue 3 (Composition API Nuxt 3 SSR) state management frontend testing CSS architecture และ real-time interfaces ด้วย WebSockets เส้นทางนี้สิ้นสุดด้วย web performance optimisation frontend security design systems และ frontend CI/CD และ DevOps

เส้นทางการเรียนรู้

สี่สิบเอ็ดหลักสูตรครอบคลุมระดับ A1 ถึง C2 หลักสูตร A1 และ A2 สร้างรากฐาน — วิธีการทำงานของเว็บ semantic markup CSS animations Git และบทนำ TypeScript หลักสูตร B1 และ B2 สร้างความเชี่ยวชาญในระดับมืออาชีพ: CSS Layout Mastery JavaScript Modules และ Build Tools React และ Vue 3 fundamentals API integration Progressive Web Apps และ Server-Side Rendering ด้วย Next.js และ Nuxt 3 หลักสูตร C1 จัดการกับประเด็นระดับอาวุโส: Advanced TypeScript for Frontend React Advanced Patterns Vue Advanced Patterns Frontend Architecture Design Systems และ Component Libraries Frontend Security และ Frontend CI/CD และ DevOps เส้นทางนี้สิ้นสุดที่ C2 ด้วย Senior Frontend Engineering ซึ่งรวบรวมทุกสิ่งเข้าไว้ในการปฏิบัติระดับ production

วิธีการทำงาน

แต่ละหลักสูตรแบ่งออกเป็นบทเรียนสั้น ๆ ที่เน้นการปฏิบัติจริงซึ่งคุณทำให้สำเร็จในตัวแก้ไขโค้ดในตัวที่มีคำติชมแบบ real-time AI tutor พร้อมใช้งานเมื่อใดก็ตามที่คุณติดขัด และแนวคิดทั้งหมดได้รับการเสริมความแข็งแรงผ่านแบบฝึกหัดที่สะท้อนพฤติกรรมเบราวเซอร์และเฟรมเวิร์กที่แท้จริงมากกว่าตัวอย่างที่ประดิษฐ์ขึ้น

เครื่องมือ

ฝึกฝนกับ AI ไม่ใช่แค่อ่าน

เพิ่มพลังการเรียนรู้ของคุณด้วยเครื่องมือและฟีเจอร์ที่ขับเคลื่อนด้วย AI

ตัวสร้างโค้ด AIสร้างโค้ดด้วย AIการแก้ไขข้อผิดพลาด AIค้นหาและแก้ไขข้อผิดพลาดในโค้ดPROข้อมูลเชิงลึก AIการวิเคราะห์โค้ดอย่างลึกซึ้งPROแชท AIแชทกับติวเตอร์ AIถามคำถามขั้นสูงรับคำตอบในระดับผู้เชี่ยวชาญPROสร้างบทเรียนตัวสร้างบทเรียนที่ขับเคลื่อนด้วย AIPROเริ่มการสอบวัดระดับรับใบรับรองของคุณPROตัวแก้ไขโค้ดเขียนและรันโค้ดเริ่มชาเลนจ์ทดสอบทักษะของคุณ

วิธีการเรียนรู้ของคุณ

  1. 01

    บทเรียนแบบโต้ตอบ

    แบบฝึกหัดการเขียนโค้ดโดยตรงพร้อมข้อเสนอแนะแบบเรียลไทม์

  2. 02

    ติวเตอร์ AI

    ได้รับความช่วยเหลือแบบทันทีจาก AI ของเราเมื่อคุณติดขัด

  3. 03

    ตัวแก้ไขในตัว

    เขียนและรันโค้ดโดยตรงในเบราว์เซอร์ของคุณ

  4. 04

    ใบรับรอง

    ได้รับใบรับรองเมื่อคุณเสร็จสิ้นหลักสูตร

สำรวจต่อ

เส้นทางการเรียนรู้ที่เกี่ยวข้อง

HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.Web Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…
คำถามที่พบบ่อย

คำถามที่พบบ่อย

หลักสูตร Frontend Academy ฟรีหรือไม่

ใช่ คุณสามารถเริ่มหลักสูตร Frontend Academy ได้ฟรีและเสร็จสิ้นบทเรียนแบบโต้ตอบโดยไม่มีค่าใช้จ่าย การสมัครสมาชิก PRO ที่เป็นทางเลือกจะปลดล็อกเครื่องมือ AI ขั้นสูงและใบรับรองที่แชร์ได้

ฉันต้องมีประสบการณ์มาก่อนหรือไม่ในการเรียนรู้ HTML

ไม่ หลักสูตรเริ่มต้นด้วยพื้นฐานและค่อยๆ ไปสู่หัวข้อที่ซับซ้อนมากขึ้น ดังนั้นคุณสามารถเริ่มได้แม้ว่าจะไม่มีประสบการณ์ HTML มาก่อน

ฉันจะเรียนรู้ HTML บน CoddyKit ได้อย่างไร

คุณเรียนรู้โดยการลงมือทำ บทเรียนสั้น ๆ แบบโต้ตอบจับคู่คำอธิบายที่ชัดเจนกับแบบฝึกหัดการเขียนโค้ดที่ทำงานในเวลาจริง และติวเตอร์ AI ที่ทำงาน 24/7 ให้ความช่วยเหลือแบบบุคคลเมื่อคุณติดขัด

ฉันได้รับใบรับรองสำหรับการเสร็จสิ้น Frontend Academy หรือไม่

ใช่ ผู้เรียน PRO สามารถสอบและได้รับใบรับรองการเสร็จสิ้นที่แชร์ได้พร้อมรหัสที่สามารถตรวจสอบได้สำหรับหลักสูตร Frontend Academy

ฉันสามารถเรียนรู้ HTML บนโทรศัพท์ของฉันได้หรือไม่

ใช่ CoddyKit พร้อมใช้งานบนเว็บและเป็นแอปพลิเคชันแบบเนทีฟ iOS และ Android ดังนั้นคุณสามารถเรียนรู้ HTML บนอุปกรณ์ใดก็ได้และความคืบหน้าของคุณจะซิงค์ในทุกอุปกรณ์

CoddyKit PRO ราคาเท่าไหร่?

คอร์สแรกของ Frontend Academy เรียนได้ฟรี CoddyKit PRO ปลดล็อกทุกคอร์ส: $5.90 ต่อสัปดาห์, $7.90 ต่อเดือน, $29.90 ต่อปี หรือ $69.99 แบบจ่ายครั้งเดียวเพื่อเข้าถึงตลอดชีพโดยไม่มีการต่ออายุ

ใช้เวลานานแค่ไหนในการเรียนจบ Frontend Academy?

เส้นทาง Frontend Academy มี 41 คอร์สและ 163 บทเรียน บทเรียนส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที ดังนั้นทั้งเส้นทางจะใช้เวลาฝึกปฏิบัติประมาณ 19 ชั่วโมง โดยเรียนได้ตามจังหวะของคุณเอง

เริ่มเรียน Frontend Academy ตอนนี้

เข้าร่วมกับผู้เรียนนับพันคนที่กำลังเรียนรู้การเขียนโปรแกรมผ่านบทเรียนที่ขับเคลื่อนด้วย AI

เริ่มเรียนฟรีดูคอร์สทั้งหมด