เรียน CSS: ลงมือทำจริง

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

มีอะไรบ้าง

• 40 หลักสูตร 159 บทเรียน: ตั้งแต่เริ่มต้น (A1) ถึงขั้นสูง (C1)

• CSS editor พร้อม HTML และพรีวิวทันที: ทดลองโค้ดและสร้างหน้าเว็บของตัวเอง

• 20 โปรเจกต์ออกแบบเว็บพร้อมคำแนะนำ: แถบเครื่องมือ กริดการ์ด ส่วนหัวติดขอบจอ ปุ่มเต้นเป็นจังหวะ

• 20 ภารกิจล่าบั๊ก: การ์ดกว้างเกิน 42px, media query ไม่ทำงานบนมือถือ, หน้าต่างโมดัลอยู่หลังหน้าเว็บ

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

• 22 ภาษา

เส้นทางครบถ้วน ตั้งแต่เริ่มต้นถึงขั้นสูง

• ไวยากรณ์ ตัวเลือก สี พื้นหลัง ตัวอักษร โมเดลกล่อง การแสดงผล การจัดตำแหน่ง หน่วย ค่า

• คลาสเทียม องค์ประกอบเทียม CSS flexbox และ CSS grid: ตั้งแต่พื้นฐานถึงเลย์เอาต์ขั้นสูง

• การออกแบบที่ปรับตามหน้าจอ, media queries, container queries

• คุณสมบัติกำหนดเอง (ตัวแปร), ฟังก์ชัน, ความจำเพาะ, ลำดับการใช้สไตล์, @layer

• การเปลี่ยนสถานะ การแปลงรูปทรง แอนิเมชันคีย์เฟรม ฟิลเตอร์ โหมดผสมสี

• โหมดมืด ชุดสี การเลื่อน เนื้อหาล้นกรอบ clip-path รูปทรง

• การแก้บั๊กด้วย DevTools, สถาปัตยกรรม BEM, Sass, PostCSS, โทเคนการออกแบบ

• รูปแบบคอมโพเนนต์และเลย์เอาต์สมัยใหม่ ประสิทธิภาพ Houdini

ฝึกให้จำได้จริง

• แบบทดสอบ ชีตสรุป 69 รายการ คำถามสัมภาษณ์นักพัฒนาฟรอนต์เอนด์หรือเว็บ 50 ข้อพร้อมคำตอบชัดเจน

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

• การแข่งขันเขียนโค้ดระดับโลก: วันละสามรอบทั่วโลก ใช้ Python, JavaScript และภาษาอื่น ๆ

• สถิติเรียนต่อเนื่อง XP กระดานจัดอันดับ การเตือนรายวัน

ผู้ช่วยสอน AI

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

• พื้นที่ทดลอง AI สร้าง HTML และ CSS จากคำอธิบายหน้าเว็บ

• มีโควตา AI ฟรีทุกวัน ใช้ไม่จำกัดด้วย Pro

เหมาะกับใคร

• ผู้เริ่มต้นเรียน CSS เพื่อพัฒนาเว็บ

• นักออกแบบที่ลงมือแต่งหน้าเว็บแทนการส่งต่อแบบจำลอง

• นักเรียนที่ฝึกควบคู่กับวิชาออกแบบเว็บ

• นักพัฒนา HTML และ CSS ที่เรียนรู้ CSS flexbox และ CSS grid

• ผู้เปลี่ยนสายงานที่เตรียมตัวทำงานฟรอนต์เอนด์

วิธีใช้งาน

1. เริ่มเรียน CSS ฟรี: ไวยากรณ์และตัวเลือก

2. เปลี่ยนค่าใน editor แล้วดูพรีวิว

3. เรียนรู้โมเดลกล่อง เฟล็กซ์บ็อกซ์ กริด การออกแบบที่ปรับตามหน้าจอ และแอนิเมชัน

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

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

ฟรีและ Pro

ฟรี: หลักสูตรแรก โปรเจกต์พร้อมคำแนะนำแรก สองภารกิจ editor พร้อมพรีวิวสด และโควตาผู้ช่วยสอน AI รายวัน Pro: ทุกหลักสูตร ทุกโปรเจกต์และภารกิจ การสอบรับใบรับรอง AI ไม่จำกัด และไม่มีโฆษณา