ยินดีต้อนรับสู่การเรียนรู้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

หลักสูตรที่สำรวจแง่มุมต่างๆ ของการออกแบบเชิงตอบสนอง ดูวิธีสร้างเว็บไซต์ที่ดูดีและทำงานได้ดีสำหรับทุกคน

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

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

แต่ละโมดูลจะมีการสาธิตและการประเมินตนเองให้คุณใช้ทดสอบความรู้

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

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

บทนำ

ค้นหาว่าการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มาจากไหน

คำค้นหาสื่อ

ปรับการออกแบบให้เข้ากับหน้าจอขนาดต่างๆ โดยใช้คิวรี่สื่อ CSS

การทำให้ใช้งานได้ทั่วโลก

เตรียมการออกแบบสำหรับภาษาและโหมดการเขียนต่างๆ

เลย์เอาต์มาโคร

ออกแบบเลย์เอาต์หน้าเว็บโดยใช้เทคนิค CSS ที่เลือกใช้

เลย์เอาต์ขนาดเล็ก

สร้างคอมโพเนนต์ที่ยืดหยุ่นและนำไปวางได้ทุกที่

การพิมพ์

ทำให้ข้อความอ่านได้ชัดเจนและสวยงาม ไม่ว่าจะปรากฏที่ใดก็ตาม

รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

แสดงรูปภาพที่เหมาะกับอุปกรณ์และหน้าจอของตนที่สุดให้แก่ผู้เข้าชม

องค์ประกอบรูปภาพ

ควบคุมรูปภาพอย่างสร้างสรรค์มากขึ้น

ไอคอน

ใช้ SVG สำหรับไอคอนที่ปรับเปลี่ยนตามอุปกรณ์ที่รองรับการปรับขนาด

ธีม

ปรับดีไซน์ให้ตรงกับค่ากำหนดของผู้ใช้ เช่น โหมดมืด

การช่วยเหลือพิเศษ

ตรวจสอบว่าเว็บไซต์พร้อมใช้งานสำหรับทุกคน

การโต้ตอบ

เตรียมหน้าเว็บของคุณสำหรับกลไกการป้อนข้อมูลต่างๆ ได้แก่ เมาส์ แป้นพิมพ์ และการแตะ

รูปแบบอินเทอร์เฟซผู้ใช้

ลองพิจารณาองค์ประกอบ UI ทั่วไปที่ปรับให้เข้ากับหน้าจอขนาดต่างๆ

ฟีเจอร์สื่อ

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

การกำหนดค่าหน้าจอ

เตรียมเนื้อหาให้พร้อมสำหรับอุปกรณ์ที่มีหลายหน้าจอ

บทสรุปและขั้นตอนถัดไป

แหล่งข้อมูลเพิ่มเติมที่จะช่วยให้คุณดำเนินการต่อไป

คุณพร้อมที่จะเรียนรู้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์แล้วใช่ไหม