เว็บทำงานยังไง
browser หน้าเว็บ และหน้าที่ของ HTML, CSS, JS แต่ละตัว — อธิบายแบบเข้าใจง่าย เริ่ม →
Web สำหรับนักออกแบบ
เข้าใจเว็บที่คุณออกแบบให้ลึกขึ้น เรียน HTML, CSS และ JavaScript นิดหน่อยตั้งแต่เริ่มต้น — แก้โค้ดจริงแล้วเห็นผลเปลี่ยนสดๆ ใน browser ไม่ต้องติดตั้งอะไร ไม่มีศัพท์ยากๆ
สิ่งที่คุณจะได้เรียน
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียน”HTML — โครงสร้าง & เนื้อหา
Element, ข้อความ, ลิงก์, รูปภาพ, ลิสต์, semantic structure และฟอร์ม เรียน →
CSS — พื้นฐานการจัดสไตล์
Selector, สี, typography, box model, พื้นหลัง & เส้นขอบ จัดสไตล์ →
CSS Layout — Flexbox & Grid
หัวใจของงานดีไซน์: Flexbox (≈ auto-layout), Grid, positioning, spacing จัดเลย์เอาต์ →
Responsive Design
หน่วยแบบ relative, media query, mobile-first, รูปภาพแบบ responsive ปรับให้ยืดหยุ่น →
JavaScript นิดหน่อย
เริ่มแบบค่อยเป็นค่อยไป: ตัวแปร, การเลือก element, การคลิก, และ interaction ง่ายๆ เพิ่มความ interactive →
Workflow จากดีไซน์สู่โค้ด
Figma → โค้ด, design token, scale, component, accessibility, การส่งงาน ส่งงานจริง →
คอร์สนี้ทำงานยังไง
หัวข้อที่มีชื่อว่า “คอร์สนี้ทำงานยังไง”เริ่มจากศูนย์จริงๆ
ไม่ต้องมีพื้นฐานเขียนโค้ด ทุกคำศัพท์มีอธิบาย ทุกขั้นตอนเล็กๆ ค่อยๆ ไป
แก้โค้ด เห็นผลสด
ตัวอย่างรันใน live preview ที่แก้ได้ — เปลี่ยนสีหรือข้อความแล้วเห็นผลอัปเดตทันทีบนหน้าเดียวกัน
พูดภาษาเดียวกับนักออกแบบ
ทุกแนวคิดเทียบกับสิ่งที่คุณรู้จาก Figma — auto-layout, style, token, component
สองภาษา
มีทั้งภาษาอังกฤษและไทย — สลับได้ตลอดจากแถบด้านบน