vibecodingthailand
ภาษาที่ browser อ่าน ไม่ใช่คนอ่าน
ทุก pixel บนเว็บคือ HTML + CSS สองภาษาประกอบกัน บทนี้จะพาเขียนเว็บแรกที่ใส่ resume ได้
หลังเรียนจบ คุณจะ...
อ่าน HTML source ของเว็บไหนก็เข้าใจ ใช้ DevTools แก้ style เป็น
จัด layout flexbox ได้ไม่ต้อง copy จาก Stack Overflow
เว็บทำเองดูดีพอใส่ portfolio ของตัวเองได้
เริ่มที่นี่
HTML ไม่ใช่ text สำหรับคนอ่าน แต่เป็น text ที่ browser แปลงเป็นโครงต้นไม้ (DOM) รู้จัก tags ที่ใช้จริง + attributes ที่มีความหมาย และทำไม indent ยังไงก็ได้
ทำความรู้จัก
— HTML เขียนโครงสร้าง CSS บอก browser ว่าจะแต่งยังไง
HTML ไม่ใช่ text สำหรับคนอ่าน แต่เป็น text ที่ browser แปลงเป็นโครงต้นไม้ (DOM) รู้จัก tags ที่ใช้จริง + attributes ที่มีความหมาย และทำไม indent ยังไงก็ได้
3 วิธีใส่ CSS, Selector 6 แบบที่ใช้จริง และเคลียร์ปัญหาคลาสสิก "เขียน CSS แล้วไม่ยอมเปลี่ยน" ด้วย specificity 4-tuple พร้อม !important ที่ใช้ให้ถูก
ลงลึก
— box model, flexbox, typography กับ color ของที่ใช้ทุกวัน
4 ชั้นของกล่อง (content/padding/border/margin), box-sizing ที่แก้ปัญหา width: 100% overflow, และ margin collapsing ที่ทำให้ spacing ไม่ตรงความคิด
flexbox จบ 80% ของ layout สมัยใหม่ด้วย display:flex + 3 property หลัก (justify-content, align-items, gap) เข้าใจ main กับ cross axis mental model ก็พอใช้จริง
Default น่าเกลียดเพราะไม่มีใครเลือก 5 rule ง่ายๆ (font/size/weight/line-height/color) ทำให้ดูเหมือนเว็บจริง + WCAG contrast เช็คว่าอ่านได้จริงไหม
ใช้งานจริง
— responsive และ JS DOM เว็บทำงานบนมือถือและ click ได้
viewport meta, media queries, breakpoints และ mobile-first mindset ทำให้เว็บที่เขียนในคอม ใช้บนมือถือได้โดยไม่พัง
เอา JS จาก stage 1 มาต่อกับ HTML+CSS ครั้งแรก สร้าง theme toggle ทำงานจริง เรียนรู้ querySelector, addEventListener, classList 3 API หลักของ DOM