Tailwind Workshop

Workshop 1: Page Shell

เริ่มจากโครงหน้าก่อน อย่าเพิ่งรีบทำรายละเอียด เป้าหมายของขั้นนี้คือสร้างพื้นหลัง dark theme, พื้นที่หน้าเว็บ และ main container ให้เห็นขอบเขตของ layout ที่จะค่อย ๆ เติมในขั้นถัดไป

Workshop 2: Top Navigation

ต่อจาก shell เราจะเติม top navigation ให้เหมือนภาพตัวอย่างมากขึ้น แยกเป็น 3 กลุ่ม: ซ้ายคือ menu + brand, กลางคือ search, ขวาคือ action buttons และ avatar ทั้งหมดใช้ flex เพื่อจัดแนวในแกนเดียว

Workshop 3: Left Sidebar

Sidebar ของ YouTube ไม่ได้มีแค่ซ่อนกับแสดงเต็ม บน tablet จะย่อเป็น rail แคบที่มี icon + label สั้น ๆ ส่วน desktop จะแสดงรายละเอียดเต็ม ขั้นนี้ฝึกคิด layout เป็น 3 ระดับก่อนนำไปประกอบกับ feed

Workshop 4: Category Chips

แถว category ด้านบน feed เป็น horizontal list ที่อาจยาวเกินจอ จึงใช้ overflow-x-auto และ whitespace-nowrap เพื่อให้ chip ไม่แตกบรรทัด ขั้นนี้ช่วยให้เข้าใจการจัด layout แนวนอนแบบ scroll ได้

Workshop 5: Video Grid

Video feed ใช้ grid เพราะต้องวาง card หลายใบเป็นแถวและคอลัมน์ ขั้นนี้ฝึกสร้าง thumbnail, duration badge, avatar, title และ metadata โดยใช้ placeholder ที่ทำจาก Tailwind classes ทั้งหมด

Workshop 6: Full YouTube Layout Polish

ขั้นสุดท้ายคือรวมทุกชิ้นเข้าด้วยกัน แล้วปรับ polish ให้เหมือนหน้าเว็บจริงมากขึ้น: header อยู่ด้านบน, sidebar อยู่ซ้าย, chip row อยู่เหนือ feed, grid responsive และแต่ละ card มีลำดับข้อมูลชัดเจน