Study Guide: HTML + CSS Basics

ลองเล่นก่อน!

ก่อนจะเริ่มอ่าน — ลองกดเล่น interactive demo ด้านล่างเพื่อทำความเข้าใจ Box Model, Flexbox, Grid และ Responsive Design แบบ visual

layout.css LIVE DEMO

margin 16px 16px 16px 16px

border 2px 2px 2px 2px

padding 20px 20px 20px 20px

content 200 x 100

box-sizing:

content-box: width: 200px total = 200 + 20+20 + 2+2 + 16+16 = 276px

box-sizing เปลี่ยนวิธีคำนวณขนาดกล่อง -- border-box ทำให้ padding + border ไม่เพิ่มขนาด

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;

direction:

justify:

align:

Flexbox จัด element เป็นแถวหรือคอลัมน์ -- ลองสลับค่าต่างๆ เพื่อดูว่า layout เปลี่ยนอย่างไร

display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;

columns:

gap:

CSS Grid จัด layout 2 มิติ -- auto-fit + minmax ทำให้ responsive โดยไม่ต้องเขียน media query

viewport:

320px

Content

/* Mobile: stack layout */
.body { display: flex; flex-direction: column; }

Responsive Design ทำให้ layout ปรับตัวตามขนาดหน้าจอ -- sidebar จะย้ายไปด้านบนบน mobile

HTML คืออะไร?

HTML (HyperText Markup Language) คือภาษาที่ใช้สร้าง โครงสร้าง ของหน้าเว็บ — เหมือนโครงกระดูกของร่างกาย

โครงสร้างพื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>สวัสดีชาวโลก!</h1>
  <p>นี่คือเว็บแรกของฉัน</p>
</body>
</html>

Tag ที่ใช้บ่อยที่สุด

Tag	ใช้ทำอะไร	ตัวอย่าง
`<h1>`–`<h6>`	หัวข้อ (ใหญ่ → เล็ก)	`<h1>Title</h1>`
`<p>`	ย่อหน้า	`<p>Hello</p>`
`<a>`	ลิงก์	`<a href="/about">About</a>`
`<img>`	รูปภาพ	`<img src="pic.jpg" alt="photo">`
`<div>`	กล่องจัดกลุ่ม	`<div class="card">...</div>`
`<ul>` / `<li>`	รายการ	`<ul><li>Item</li></ul>`
`<button>`	ปุ่ม	`<button>Click</button>`
`<input>`	ช่องกรอกข้อมูล	`<input type="text" placeholder="Name">`
`<form>`	ฟอร์ม	`<form>...</form>`

Output

<h1>

Heading 1

<p>

Paragraph text

<a>

Link text

<ul>

• Item 1 • Item 2

<img>

<button>

Click me

Semantic HTML

ใช้ tag ที่มีความหมายแทน <div> ทุกที่ — ช่วยเรื่อง SEO และ Accessibility

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>I'm a UX/UI Designer learning to code.</p>
  </section>

  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>Figma</li>
      <li>HTML & CSS</li>
    </ul>
  </section>
</main>

<footer>
  <p>&copy; 2025 My Portfolio</p>
</footer>

CSS คืออะไร?

CSS (Cascading Style Sheets) คือภาษาที่ใช้ ตกแต่ง หน้าเว็บ — สี, ขนาด, ระยะห่าง, layout ทุกอย่าง

วิธีเขียน CSS

/* selector { property: value; } */

h1 {
  color: #333;
  font-size: 2rem;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#hero {
  text-align: center;
}

Box Model

ทุก element บนเว็บคือ “กล่อง” — ต้องเข้าใจ Box Model ก่อน

┌────────────── margin ──────────────┐
│  ┌────────── border ──────────┐    │
│  │  ┌────── padding ──────┐   │    │
│  │  │                     │   │    │
│  │  │     content         │   │    │
│  │  │                     │   │    │
│  │  └─────────────────────┘   │    │
│  └────────────────────────────┘    │
└────────────────────────────────────┘

.card {
  /* เนื้อหาข้างใน */
  padding: 20px;

  /* เส้นขอบ */
  border: 1px solid #ddd;

  /* ระยะห่างจาก element อื่น */
  margin: 16px;

  /* ทำให้ padding ไม่เพิ่มขนาดกล่อง (สำคัญมาก!) */
  box-sizing: border-box;
}

Output

margin 16px 16px 16px 16px

border 16px 16px 16px 16px

padding 16px 16px 16px 16px

content
200 × 100

Flexbox — จัด Layout แนวเดียว

Flexbox ใช้จัด element เป็น แถวหรือคอลัมน์ — ใช้บ่อยที่สุดในงานจริง

.navbar {
  display: flex;
  justify-content: space-between; /* จัดแนวนอน */
  align-items: center;            /* จัดแนวตั้ง */
  gap: 16px;                      /* ระยะห่างระหว่าง items */
}

<nav class="navbar">
  <div class="logo">MyBrand</div>
  <div class="links">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

Flex Properties ที่ใช้บ่อย

Property	ค่าที่ใช้บ่อย	ผลลัพธ์
`justify-content`	`center`, `space-between`, `space-around`	จัดแนวนอน
`align-items`	`center`, `flex-start`, `flex-end`, `stretch`	จัดแนวตั้ง
`flex-direction`	`row`, `column`	แถวหรือคอลัมน์
`flex-wrap`	`wrap`, `nowrap`	ตัดบรรทัดหรือไม่
`gap`	`8px`, `1rem`	ช่องว่างระหว่าง items

ตัวอย่าง: Card Layout

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* ขยายได้, หดได้, เริ่มที่ 300px */
  padding: 24px;
  background: white;
  border-radius: 12px;
}

Output

direction:

justify:

align:

display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;

CSS Grid — จัด Layout 2 มิติ

Grid ใช้จัด layout ที่ซับซ้อนกว่า — มีทั้ง แถวและคอลัมน์

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์เท่ากัน */
  gap: 20px;
}

ตัวอย่าง: Portfolio Grid

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

<section class="projects">
  <div class="card">Project 1</div>
  <div class="card">Project 2</div>
  <div class="card">Project 3</div>
  <div class="card">Project 4</div>
</section>

Output

columns:

gap:

grid-template-columns: repeat(3, 1fr); gap: 8px;

Responsive Design

ทำให้เว็บแสดงผลดีทุกขนาดหน้าจอ — mobile, tablet, desktop

Media Queries

/* Mobile first — เขียน style สำหรับ mobile ก่อน */
.container {
  padding: 16px;
}

/* Tablet ขึ้นไป (768px) */
@media (min-width: 768px) {
  .container {
    padding: 32px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop ขึ้นไป (1024px) */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Responsive Units

Unit	ใช้เมื่อ	ตัวอย่าง
`rem`	ขนาดตัวอักษร, spacing	`font-size: 1.5rem`
`%`	ความกว้างที่ยืดหยุ่น	`width: 100%`
`vw` / `vh`	เต็มจอ	`height: 100vh`
`px`	ค่าตายตัว เช่น border	`border: 1px solid`

Output

MyApp

Active: @media (max-width: 768px)

CSS Variables

CSS Variables ช่วยให้จัดการสี, ขนาด, spacing จากจุดเดียว — เปลี่ยนทีเดียว เปลี่ยนทั้งเว็บ

/* ประกาศ variable ที่ :root (ใช้ได้ทุกที่) */
:root {
  --color-primary: #3b82f6;
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --spacing-md: 16px;
  --radius: 12px;
}

/* ใช้งานด้วย var() */
.btn {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

/* Dark theme — แค่เปลี่ยน variables */
body.dark {
  --color-bg: #0a0a0f;
  --color-text: #e4e4e7;
}

Hover & Transition

:hover — เปลี่ยน style เมื่อเอาเมาส์ชี้

.btn {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
}

.btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

transition — ทำให้การเปลี่ยนแปลงเป็น animation

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* transition: property duration timing-function */
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Google Fonts

วิธีใช้

ไปที่ fonts.google.com
เลือก font + weights ที่ต้องการ
Copy <link> tag ไปใส่ใน <head>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

body {
  font-family: 'Inter', sans-serif;
}

เปิด DevTools ด้วย Cmd + Option + I หรือ F12

เปิด DevTools ด้วย Ctrl + Shift + I หรือ F12

Inspect element — คลิกขวา > Inspect เพื่อดู HTML + CSS ของ element นั้น
แก้ไข CSS live — คลิกที่ค่า CSS ใน Styles panel แล้วพิมพ์ค่าใหม่ได้เลย
Box Model — ดู margin/border/padding/content ใน Computed tab
Toggle property — คลิก checkbox หน้า CSS property เพื่อเปิด/ปิด
Responsive mode — กด Cmd + Shift + M จำลองหน้าจอ mobile

Common Mistakes

1. ลืม `box-sizing: border-box`

/* padding เพิ่มขนาดกล่อง — กล่อง 300px + padding 20px = 340px */
.box { width: 300px; padding: 20px; }

/* padding ไม่เพิ่มขนาด — กล่องยังคง 300px */
*, *::before, *::after { box-sizing: border-box; }

2. ใช้ fixed width กับ responsive layout

/* ไม่ responsive */
.container { width: 960px; }

/* responsive */
.container { max-width: 960px; width: 100%; }

3. ไม่ใช้ Semantic HTML

<!-- div soup — ไม่สื่อความหมาย -->
<div class="header"><div class="nav">...</div></div>

<!-- semantic — สื่อความหมาย, ดีต่อ SEO + accessibility -->
<header><nav>...</nav></header>

Best Practices & Style Guide

CSS Class Naming

/* BEM-like: block__element--modifier */
.card { }
.card__title { }
.card__title--large { }

/* ง่ายกว่า: descriptive names */
.nav-link { }
.hero-title { }
.btn-primary { }

จัดไฟล์ CSS

/* 1. Reset / Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

/* 2. Variables */
:root { --color-primary: #3b82f6; }

/* 3. Layout */
.container { max-width: 960px; margin: 0 auto; }

/* 4. Components */
.card { }
.btn { }
.nav { }

/* 5. Utilities */
.text-center { text-align: center; }
.hidden { display: none; }

Mobile-first Approach

/* เขียน mobile ก่อน แล้วเพิ่ม style สำหรับจอใหญ่ */
.grid { display: grid; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

ลองทำเอง

สร้าง Navbar — ใช้ Flexbox จัด logo ซ้าย, links ขวา
สร้าง Card Grid — ใช้ CSS Grid แสดง 3 cards ที่ responsive
สร้าง Hero Section — จัดข้อความตรงกลางจอด้วย Flexbox + min-height: 100vh
เล่นเกม Flexbox Froggy ให้ครบทุกด่าน
เล่นเกม Grid Garden ให้ครบทุกด่าน

Study Guide: HTML + CSS Basics

ลองเล่นก่อน!

HTML คืออะไร?

โครงสร้างพื้นฐาน

Tag ที่ใช้บ่อยที่สุด

Semantic HTML

CSS คืออะไร?

วิธีเขียน CSS

Box Model

Flexbox — จัด Layout แนวเดียว

Flex Properties ที่ใช้บ่อย

ตัวอย่าง: Card Layout

CSS Grid — จัด Layout 2 มิติ

ตัวอย่าง: Portfolio Grid

Responsive Design

Media Queries

Responsive Units

CSS Variables

Hover & Transition

:hover — เปลี่ยน style เมื่อเอาเมาส์ชี้

transition — ทำให้การเปลี่ยนแปลงเป็น animation

Google Fonts

วิธีใช้

DevTools Tips สำหรับ CSS

Common Mistakes

1. ลืม box-sizing: border-box

2. ใช้ fixed width กับ responsive layout

3. ไม่ใช้ Semantic HTML

Best Practices & Style Guide

CSS Class Naming

จัดไฟล์ CSS

Mobile-first Approach

ลองทำเอง

1. ลืม `box-sizing: border-box`