หน้าเว็บแรกของคุณ

คุณได้เรียนรู้แล้วว่าเว็บคืออะไร browser ทำงานอย่างไร และ HTML, CSS, JavaScript แต่ละอย่างทำอะไร ถึงเวลาแล้วที่จะสร้างบางอย่างจริงๆ — หน้าเว็บแรกที่เหมาะสมของคุณ เขียนด้วยมือทั้งหมด

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

สิ่งที่คุณกำลังสร้าง

Personal introduction card แบบเรียบง่าย: ชื่อของคุณเป็น heading, ประโยคสั้นๆ เกี่ยวกับตัวเอง, และลิงก์ แล้วคุณจะ style ให้ออกมาหน้าตาตามที่ต้องการ

HTML

เริ่มต้นด้วยโครงสร้าง <h1> สำหรับชื่อ, <p> สำหรับคำอธิบาย, และ <a> สำหรับลิงก์

<h1>Maya Chen</h1>
<p>UI designer based in Bangkok. I love design systems and clean type.</p>
<a href="https://dribbble.com">See my work</a>

สังเกตว่ายังไม่มีการออกแบบที่นี่ — มีแค่ content และความหมาย <h1> บอกว่า “นี่คือ heading ที่สำคัญที่สุด” <p> บอกว่า “นี่คือ paragraph” <a> บอกว่า “นี่คือลิงก์” HTML กำลังสื่อสาร ว่าสิ่งต่างๆ คืออะไร ไม่ใช่ว่าดูเป็นอย่างไร

CSS

ตอนนี้ใส่ design layer เข้าไป CSS ชี้เป้าไปยัง element แต่ละอันด้วยชื่อ แล้วใส่ visual property ให้

h1 { color: #7C3AED; font-size: 2rem; }
p  { color: #374151; }
a  { color: #7C3AED; }

ทุก CSS rule ตามรูปแบบ: selector (element ไหนที่จะ style) + property (อะไรที่จะเปลี่ยน) + value (จะเปลี่ยนเป็นอะไร) นั่นคือ CSS syntax ทั้งหมด

สร้างด้วยตัวเอง

Editor ด้านล่างมีเวอร์ชัน starter ทำให้เป็นของคุณ — เปลี่ยนชื่อ, คำอธิบาย, สี, ขนาด font ไม่มีคำตอบที่ผิด ทุกครั้งที่คุณบันทึกการเปลี่ยนแปลงในโปรเจกต์จริง นี่คือสิ่งที่คุณทำอยู่

<div class="profile">
  <h1>Maya Chen</h1>
  <p class="bio">UI designer based in Bangkok.\nI love design systems and clean type.</p>
  <a class="link" href="https://dribbble.com">See my work &rarr;</a>
</div>

ลองเปลี่ยนทีละอย่างเพื่อสร้างความมั่นใจ:

แทนที่ Maya Chen ด้วยชื่อของคุณเอง
เปลี่ยน #7C3AED (ม่วง) เป็น #0EA5E9 (น้ำเงิน) ทั้งใน HTML และ CSS
เปลี่ยน border-radius: 20px เป็น border-radius: 4px เพื่อทำให้ card มีมุมเหลี่ยม
เปลี่ยน text-align: center เป็น text-align: left

การเปลี่ยนแปลงแต่ละอย่างแยกออกจากกันและยกเลิกได้ — เหมือนกับการทำงานกับ property ใน Figma

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ลืม <!DOCTYPE html> ทำให้ browser render ผิดโหมด
ลืม viewport meta tag ทำให้มือถือแสดงผลย่อเล็กผิดปกติ
ตั้งชื่อไฟล์ผิด case (Index.html vs index.html) ซึ่งพังบน server ที่ case-sensitive

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ไฟล์เดียวที่เปิดได้” แต่ developer ต้องคิดถึง boilerplate ที่จำเป็นทุกหน้า (meta charset, viewport, title สำหรับ SEO และ browser tab)

💡 ตัวอย่างจากของจริง

Static site generator อย่าง Astro และ Next.js generate boilerplate นี้ให้อัตโนมัติทุกหน้า เพื่อไม่ให้ developer พลาดสิ่งเหล่านี้