0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

พัฒนาการออกแบบเว็บของคุณด้วย CSS ผ่านบทเรียนที่ครอบคลุมที่ CSS Academy

🤖 ขับเคลื่อนด้วย AI📚 คอร์ส 40👥 ผู้เรียน 100,000+ คน⭐ คะแนน 4.9
ภาพรวมคอร์ส

CSS: ภาษาที่จัดรูปแบบเว็บ

CSS ควบคุมรายละเอียดภาพทุกอย่างในหน้าเว็บ — สี เค้าโครง ระยะห่าง แอนิเมชัน และการตอบสนองต่อขนาดหน้าจอ มันได้พัฒนาจากชั้นการนำเสนอข้อมูลอย่างง่าย ๆ ให้กลายเป็นภาษาระบบออกแบบแบบเต็มรูปแบบ พร้อมฟีเจอร์สมัยใหม่เช่น container queries @layer logical properties และ Houdini API ที่ให้นักพัฒนาควบคุมการแสดงผลอย่างละเอียด โทรแกรมนี้ครอบคลุม CSS ตั้งแต่การเขียน selector แรกไปจนถึงการออกแบบระบบการออกแบบที่ขยายได้ใช้ในโค้ดที่ใหญ่โตในการปฏิบัติจริง

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

คุณจะเริ่มต้นด้วย syntax selectors สี และ typography จากนั้นสร้างความเข้าใจที่มั่นคงเกี่ยวกับ box model display properties และ positioning จากตรงนั้น คุณจะทำงานผ่าน Flexbox และ CSS Grid สำหรับเค้าโครงมาตรฐานและขั้นสูง ใช้ responsive design และ media queries และใช้ CSS variables custom functions และ design tokens สำหรับ theming ที่ง่ายต่อการบำรุงรักษา คุณจะครอบคลุมด้วย transitions keyframe animations transforms filters blend modes และ dark mode — บวกกับเครื่องมือสมัยใหม่กับ Sass PostCSS และ CSS-in-JS patterns โทรแกรมปิดท้ายด้วย CSS architecture โดยใช้ BEM specificity และ cascade container queries @layer cascade layers CSS Houdini และ performance

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

สี่สิบคอร์สขยายจาก A1 ถึง C1 คอร์ส A1 และ A2 ยุคแรกสร้างพื้นฐาน — selectors box model pseudo-classes pseudo-elements และ units คอร์ส B1 ครอบคลุม Flexbox Grid responsive design animations debugging ด้วย DevTools และ CSS functions คอร์ส B2 ก้าวขึ้นเป็น advanced Flexbox และ Grid Sass PostCSS CSS-in-JS design tokens CSS Shapes logical properties container queries และ CSS Layers สามคอร์ส C1 — CSS Houdini CSS Performance และ CSS Future — ที่อยู่ในขอบเขตหน้าสุดของแพลตฟอร์ม

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

แต่ละคอร์สแบ่งออกเป็นบทเรียนอย่างสั้นและเน้นเฉพาะจุดที่คุณทำให้สำเร็จโดยตรงในตัวแก้ไขที่สร้างขึ้นด้วยข้อเสนอแนะแบบเรียลไทม์ AI tutor พร้อมให้ความช่วยเหลือเมื่อใดก็ตามที่คุณติดขัด และการก้าวหน้านั้นมีการเพิ่มขึ้นอย่างตั้งใจ เพื่อให้แต่ละแนวคิดเสริมแนวคิดสุดท้ายก่อนที่จะแนะนำแนวคิดต่อไป

เริ่มเรียนรู้ →

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

🎯
บทเรียนแบบโต้ตอบ
แบบฝึกหัดการเขียนโค้ดโดยตรงพร้อมข้อเสนอแนะแบบเรียลไทม์
🤖
ติวเตอร์ AI
ได้รับความช่วยเหลือแบบทันทีจาก AI ของเราเมื่อคุณติดขัด
💻
ตัวแก้ไขในตัว
เขียนและรันโค้ดโดยตรงในเบราว์เซอร์ของคุณ
🏆
ใบรับรอง
ได้รับใบรับรองเมื่อคุณเสร็จสิ้นหลักสูตร
หลักสูตร

40 หลักสูตร

ทุกหลักสูตรในเส้นทางการเรียนรู้ CSS Academy

01

ไวยากรณ์และตัวเลือก CSS

A13 บทเรียน

เรียนรู้ไวยากรณ์พื้นฐานของ CSS และวิธีเลือกองค์ประกอบ HTML ด้วยตัวเลือกแบบแท็ก คลาส ID แอตทริบิวต์ และแบบผสม

02

สีและพื้นหลัง

A14 บทเรียนPRO

เชี่ยวชาญรูปแบบสีและคุณสมบัติพื้นหลังของ CSS เพื่อสร้างหน้าเว็บที่มีความสวยงามทางภาพ

03

ตัวอักษรและข้อความ

A14 บทเรียนPRO

จัดรูปแบบข้อความด้วยแบบอักษร ขนาด น้ำหนัก การจัดแนว และเทคนิคการโหลดแบบอักษรที่กำหนดเอง

04

แบบจำลองกล่อง

A24 บทเรียนPRO

ทำความเข้าใจว่าองค์ประกอบ HTML ทุกองค์ประกอบคือกล่อง และควบคุมขนาด ระยะห่าง เส้นขอบ และเงา

05

คุณสมบัติการแสดงผล

A24 บทเรียนPRO

ควบคุมการไหลขององค์ประกอบในเอกสารด้วยโหมดการแสดงผลแบบบล็อก อินไลน์ และอินไลน์บล็อก

06

พื้นฐานการจัดตำแหน่ง

A24 บทเรียนPRO

นำองค์ประกอบออกจากการไหลปกติด้วยค่าตำแหน่งของ CSS และควบคุมลำดับชั้นด้วย z-index

07

หน่วยและค่าของ CSS

A24 บทเรียนPRO

เชี่ยวชาญหน่วย CSS แบบสัมบูรณ์และสัมพัทธ์เพื่อสร้างเค้าโครงที่ปรับขนาดและตอบสนองได้

08

คลาสเทียม

A24 บทเรียนPRO

เลือกองค์ประกอบตามสถานะ ตำแหน่ง และความสัมพันธ์กับองค์ประกอบอื่นด้วยคลาสเทียม

09

องค์ประกอบเทียม

A24 บทเรียนPRO

แทรกเนื้อหาตกแต่งและจัดรูปแบบบางส่วนขององค์ประกอบด้วยองค์ประกอบเทียมของ CSS

10

พื้นฐาน Flexbox

B14 บทเรียนPRO

สร้างเค้าโครงแบบหนึ่งมิติด้วย CSS Flexbox โดยควบคุมทิศทาง การจัดแนว และการตัดบรรทัด

11

พื้นฐาน CSS Grid

B14 บทเรียนPRO

สร้างเค้าโครงสองมิติอันทรงพลังด้วย CSS Grid โดยใช้แทร็ก ช่องว่าง และพื้นที่แม่แบบ

12

การออกแบบที่ตอบสนอง

B14 บทเรียนPRO

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

13

มีเดียคิวรี

B14 บทเรียนPRO

ใช้รูปแบบที่แตกต่างกันตามขนาดหน้าจอ การวางแนว และความต้องการของผู้ใช้ด้วยมีเดียคิวรี

14

ตัวแปร CSS

B14 บทเรียนPRO

สร้างสไตล์ชีตที่ดูแลรักษาได้ง่ายด้วยคุณสมบัติที่กำหนดเอง ซึ่งนำกลับมาใช้และอัปเดตแบบไดนามิกได้

15

การเปลี่ยนผ่านของ CSS

B14 บทเรียนPRO

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

16

แอนิเมชันและคีย์เฟรมของ CSS

B14 บทเรียนPRO

สร้างแอนิเมชันหลายขั้นตอนที่ซับซ้อนด้วย @keyframes และคุณสมบัติ animation รูปแบบย่อ

17

การแปลงของ CSS

B14 บทเรียนPRO

ย้าย หมุน ปรับขนาด และบิดองค์ประกอบในพื้นที่สองมิติและสามมิติด้วยฟังก์ชัน transform ของ CSS

18

ความจำเพาะและแคสเคด

B14 บทเรียนPRO

ทำความเข้าใจอย่างลึกซึ้งว่า CSS ตัดสินอย่างไรว่าสไตล์ใดมีผล เมื่อกฎหลายข้อเลือกองค์ประกอบเดียวกัน

19

ฟังก์ชัน CSS

B14 บทเรียนPRO

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

20

ฟิลเตอร์และโหมดผสมสี

B14 บทเรียนPRO

ใช้เอฟเฟกต์ภาพกับองค์ประกอบและรูปภาพด้วยฟิลเตอร์ CSS และการผสมโหมดคอมโพสิต

21

การเลื่อนและเนื้อหาล้น

B14 บทเรียนPRO

ควบคุมพฤติกรรมการเลื่อน จุดดูดตำแหน่ง และการตัดเนื้อหาล้นเพื่อประสบการณ์ผู้ใช้ที่ราบรื่น

22

โหมดมืดและชุดสี

B14 บทเรียนPRO

ใช้โหมดมืดทั้งแบบอัตโนมัติและแบบกำหนดเองด้วยตัวแปร CSS, color-scheme และมีเดียคิวรี

23

การแก้ไขข้อผิดพลาด CSS และ DevTools

B14 บทเรียนPRO

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

24

Flexbox ขั้นสูง

B24 บทเรียนPRO

ก้าวไปไกลกว่าพื้นฐานด้วยการจัดแนว Flexbox ขั้นสูง การจัดลำดับ และรูปแบบเค้าโครงที่ใช้จริง

25

Grid ขั้นสูง

B24 บทเรียนPRO

ปลดล็อกพลังทั้งหมดของ CSS Grid ด้วยเส้นที่ตั้งชื่อ การวางตำแหน่งอัตโนมัติ subgrid และรูปแบบที่ซับซ้อน

26

สถาปัตยกรรม CSS และ BEM

B24 บทเรียนPRO

จัดระเบียบฐานโค้ด CSS ขนาดใหญ่ด้วยรูปแบบสถาปัตยกรรม หลักการตั้งชื่อ และโครงสร้างไฟล์

27

รูปร่าง CSS และ clip-path

B24 บทเรียนPRO

สร้างองค์ประกอบที่ไม่เป็นสี่เหลี่ยมและรูปร่างที่ให้ข้อความล้อมรอบด้วย clip-path และ CSS Shapes

28

คุณสมบัติเชิงตรรกะของ CSS

B24 บทเรียนPRO

เขียน CSS ที่ไม่ผูกกับทิศทาง ซึ่งทำงานได้ทั้งภาษาที่เขียนจากซ้ายไปขวาและขวาไปซ้ายด้วยคุณสมบัติเชิงตรรกะ

29

คิวรีคอนเทนเนอร์

B24 บทเรียนPRO

ใช้สไตล์ตามขนาดคอนเทนเนอร์ขององค์ประกอบแทนขนาดพื้นที่แสดงผลด้วยคิวรีคอนเทนเนอร์

30

เลเยอร์ CSS (@layer)

B24 บทเรียนPRO

จัดการลำดับความสำคัญของแคสเคด CSS อย่างชัดเจนด้วย @layer เพื่อขจัดความขัดแย้งด้านความจำเพาะในฐานโค้ดขนาดใหญ่

31

ตัวประมวลผลล่วงหน้า Sass

B24 บทเรียนPRO

เพิ่มประสิทธิภาพการเขียน CSS ด้วยตัวแปร การซ้อน มิกซิน และฟังก์ชันโดยใช้ตัวประมวลผลล่วงหน้า Sass

32

PostCSS และเครื่องมือ CSS

B24 บทเรียนPRO

แปลงและปรับให้ CSS มีประสิทธิภาพด้วยปลั๊กอิน PostCSS สำหรับการเติมคำนำหน้าอัตโนมัติ การลดขนาด และการแปลงแบบกำหนดเอง

33

รูปแบบ CSS-in-JS

B24 บทเรียนPRO

สำรวจการจัดสไตล์ที่จำกัดขอบเขตอยู่ในองค์ประกอบด้วย styled-components, Emotion, CSS Modules และ Vanilla Extract

34

โทเค็นการออกแบบและธีม

B24 บทเรียนPRO

สร้างระบบการออกแบบที่ขยายได้ด้วยโทเค็นการออกแบบและธีมหลายแบรนด์ผ่านคุณสมบัติ CSS ที่กำหนดเอง

35

การทดสอบ CSS

B24 บทเรียนPRO

รับรองความถูกต้องของ CSS และความสอดคล้องทางภาพผ่านการทดสอบการถดถอย การทดสอบหน่วย และการตรวจสอบการเข้าถึง

36

รูปแบบองค์ประกอบ CSS

B24 บทเรียนPRO

สร้างองค์ประกอบส่วนติดต่อผู้ใช้พร้อมใช้งานจริง เช่น การ์ด หน้าต่างโมดัล เมนูดรอปดาวน์ และแท็บด้วยเทคนิค CSS ล้วน

37

รูปแบบเค้าโครงสมัยใหม่

B24 บทเรียนPRO

ใช้รูปแบบเค้าโครงขั้นสูงที่พบในงานจริงด้วยเทคนิค CSS Grid และ Flexbox สมัยใหม่

38

CSS Houdini

C14 บทเรียนPRO

ขยายความสามารถของ CSS เองด้วย JavaScript ผ่าน API ของ Houdini สำหรับคุณสมบัติที่กำหนดเอง การวาด และเค้าโครง

39

ประสิทธิภาพ CSS

C14 บทเรียนPRO

ปรับปรุงการส่ง CSS และประสิทธิภาพการแสดงผลด้วยการทำความเข้าใจกระบวนการแสดงผลของเบราว์เซอร์

40

อนาคตของ CSS

C14 บทเรียนPRO

สำรวจความล้ำสมัยของ CSS ด้วยการซ้อนแบบเนทีฟ :has() สไตล์ที่จำกัดขอบเขต และ View Transitions

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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