FileEditViewTerminal
IT Issue Bootcamp - Visual Studio Code
day-1-hour-3.mdx
Overview/Glossary/Extensions

Day 1 / Hour 3

CSS Foundation

Selectors, box model, form styling, layout, and responsive basics.

Slide mode
60 minutes
Learners have a readable static form styled with styles.css.

CSS Foundation

Day 1 - ชั่วโมงที่ 3: CSS Foundation and Responsive Form Layout

เป้าหมายของชั่วโมงนี้

หลังจบชั่วโมงที่สาม ผู้เรียนควรสามารถ:

  1. เข้าใจว่า CSS ทำหน้าที่อะไรในหน้าเว็บ
  2. ใช้ selector พื้นฐานเพื่อเลือก element ที่ต้องการตกแต่งได้
  3. เข้าใจ box model ได้แก่ content, padding, border และ margin
  4. จัด layout หน้าเว็บด้วย Flexbox และ Grid ในระดับพื้นฐานได้
  5. ตกแต่ง form ให้ใช้งานง่ายและอ่านง่ายขึ้น
  6. ทำ responsive layout เบื้องต้นสำหรับ mobile และ desktop ได้
  7. เข้าใจ state สำคัญของ UI เช่น hover และ focus

ไฟล์ที่ใช้ในชั่วโมงนี้

CSS ทั้งหมดใส่ใน:

style.css

HTML ที่ต้องเพิ่ม class เช่น form-group หรือ form-row อยู่ใน:

index.html

ถ้า slide เป็น CSS ให้ระบุ:

File: style.css

โครงสร้างเวลา 60 นาที

เวลาหัวข้อรูปแบบ
0-5 นาทีRecap HTML จากชั่วโมงที่สองเชื่อมเข้าเนื้อหา
5-15 นาทีCSS คืออะไร และเชื่อมกับ HTML อย่างไรExplain + demo
15-25 นาทีSelector และ cascadeLive coding
25-35 นาทีBox model และ spacingVisual explanation
35-45 นาทีForm styling และ UI statesLive coding
45-55 นาทีResponsive layoutLive coding
55-60 นาทีสรุปสิ่งที่ทำทำทีละขั้นตอน

Slide 1: จากโครงสร้าง HTML สู่หน้าที่อ่านง่าย

Hour 2 เราสร้าง index.html ที่มีส่วนหัว Form แจ้งปัญหา และส่วนท้ายแล้ว

Hour นี้เราจะสร้างไฟล์ style.css เพื่อ:

  • จัดระยะห่างและสีของหน้า
  • ทำให้ Form อ่านและกรอกได้ง่าย
  • แสดง Focus เมื่อผู้ใช้ใช้ Keyboard
  • ปรับ Layout ให้เหมาะกับมือถือและหน้าจอกว้าง

CSS เปลี่ยนการแสดงผล แต่ไม่เปลี่ยนความหมายของ HTML หรือข้อมูลใน Form

Slide 2: CSS ทำงานร่วมกับ HTML อย่างไร

CSS ย่อมาจาก Cascading Style Sheets ใช้กำหนดหน้าตาและการจัดวางของ HTML

HTML: สร้างเนื้อหาCSS: ตกแต่งเนื้อหา
<h1>รายการปัญหา</h1>h1 { color: #0f766e; }
  • HTML สร้างหัวข้อด้วย <h1>
  • CSS ใช้ Selector h1 เลือกหัวข้อนั้น แล้วเปลี่ยนสีด้วย color

CSS เปลี่ยนเฉพาะหน้าตา ข้อความ “รายการปัญหา” และความหมายของ <h1> ยังเหมือนเดิม

Slide 3: เชื่อม style.css เข้ากับหน้าเว็บ

สร้างไฟล์ใหม่ style.css ไว้ระดับเดียวกับ index.html

project/
  index.html
  style.css

แก้บางส่วน: เพิ่มบรรทัดนี้ใน <head> ของ index.html

<link rel="stylesheet" href="style.css" />

หากชื่อไฟล์หรือ Path ไม่ตรง Browser จะเปิด HTML ได้ แต่ Style จะไม่แสดง

Slide 4: CSS Rule และ Selector

selector {
  property: value;
}
h1 {
  color: #0f172a;
  font-size: 32px;
}
  • h1 คือ Selector ที่เลือก Element
  • color และ font-size คือ Properties
  • ค่าด้านหลัง : คือ Values

Selector แบบ Tag เช่น h1 เลือกทุก Tag ชนิดนั้น ส่วน Selector แบบ Class เช่น .form-group เลือกทุก Element ที่มี Class ตรงกัน

Slide 5: เข้าใจ Box Model ก่อนจัดระยะห่าง

ทุก Element บนหน้าเว็บมีลักษณะเป็นกล่อง

Box model: margin, border, padding, content
margin
border
padding
content
  • Content คือข้อความหรือเนื้อหาด้านใน
  • Padding คือระยะจาก Content ถึง Border
  • Border คือขอบของกล่อง
  • Margin คือระยะห่างจากกล่องอื่น

เพิ่มไว้บรรทัดแรกของ style.css เพื่อให้ Width รวม Padding และ Border แล้ว:

* {
  box-sizing: border-box;
}

ปกติถ้ากำหนดกล่องกว้าง 300px แล้วเพิ่ม Padding ซ้ายและขวาด้านละ 20px กล่องจริงจะกว้างเป็น 340px จนอาจเกินพื้นที่ที่เตรียมไว้

box-sizing: border-box เปลี่ยนวิธีคำนวณให้ Padding และ Border รวมอยู่ภายใน 300px กล่องจึงไม่ขยายเกิน Width ที่กำหนด ส่วน * หมายถึงให้ใช้กฎนี้กับทุก Element

Slide 6: กำหนด Style พื้นฐานของหน้า

เพิ่มต่อใน style.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  color: #111827;
  line-height: 1.5;
}
 
main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}
  • width: 100% ให้ main ใช้พื้นที่เท่าที่หน้าจอมี
  • max-width จำกัดความกว้างไม่ให้เนื้อหาอ่านยาก
  • margin: 0 auto จัด main ให้อยู่กลางหน้า

เมื่อใช้ร่วมกับ box-sizing: border-box ค่า padding จะถูกรวมอยู่ภายในความกว้างของ main จึงไม่ดันหน้าให้กว้างเกิน Viewport

Slide 7: แยกส่วนหัวและพื้นที่ Form

เพิ่มต่อใน style.css

header {
  background: #0f766e;
  color: white;
  padding: 32px 24px;
}
 
header h1 {
  margin: 0 0 8px;
}
 
header p {
  margin: 0;
}
 
section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
}

สีพื้นและ Border ช่วยแยกพื้นที่ แต่ข้อความยังต้องมี Contrast เพียงพอให้อ่านง่าย

Slide 8: ตกแต่งส่วนท้ายของหน้า

เพิ่มต่อใน style.css

footer {
  color: #64748b;
  font-size: 14px;
  padding: 24px;
  text-align: center;
}
 
footer p {
  margin: 0;
}

text-align: center จัดข้อความไว้กึ่งกลาง ส่วนสีและขนาดตัวอักษรที่เบาลงช่วยให้ Footer อ่านได้โดยไม่เด่นกว่าส่วนหลัก

Slide 9: จัด Field ใน Form ให้เป็นกลุ่ม

เพิ่มต่อใน style.css

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
 
legend {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
}
 
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
 
label {
  font-weight: 600;
}

form-group ใช้ Style ชุดเดียวกับทุก Field ทำให้ Form มีรูปแบบสม่ำเสมอ

Slide 10: ตกแต่ง Input และ Textarea

เพิ่มต่อใน style.css

input,
textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  background: white;
}
 
textarea {
  resize: vertical;
}
  • width: 100% ทำให้ Field กว้างตามพื้นที่ของ Form
  • font: inherit ใช้ Font เดียวกับส่วนอื่นของหน้า
  • resize: vertical ให้ผู้ใช้ขยาย Textarea ได้เฉพาะแนวตั้ง

Slide 11: แสดง Focus ให้รู้ว่ากำลังกรอก Field ใด

เพิ่มต่อใน style.css

input:focus,
textarea:focus {
  outline: 3px solid #99f6e4;
  border-color: #0f766e;
}

:focus คือ State ที่เกิดขึ้นเมื่อผู้ใช้คลิกหรือใช้ Keyboard มายัง Field

ลองกด Tab เพื่อเลื่อนผ่านแต่ละ Field หากไม่เห็นตำแหน่ง Focus ชัดเจน ผู้ใช้ Keyboard จะใช้งาน Form ได้ยาก

Slide 12: ทำให้ปุ่ม Submit มองเห็นและตอบสนอง

เพิ่มต่อใน style.css

button {
  border: 0;
  border-radius: 6px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  background: #0f766e;
  color: white;
  cursor: pointer;
}
 
button:hover {
  background: #115e59;
}

:hover แสดงผลเมื่อ Pointer อยู่เหนือปุ่ม ช่วยบอกว่าปุ่มนี้โต้ตอบได้ แต่ข้อความบนปุ่มยังต้องบอกการทำงานให้ชัดเจนด้วย

Slide 13: เตรียมสอง Field สำหรับหน้าจอกว้าง

แก้บางส่วน: ใน index.html ครอบ reporterName และ reporterEmail ด้วย form-row

<div class="form-row">
  <div class="form-group">
    <label for="reporterName">ชื่อผู้แจ้ง</label>
    <input id="reporterName" name="reporterName" type="text" required />
  </div>
 
  <div class="form-group">
    <label for="reporterEmail">อีเมลผู้แจ้ง</label>
    <input id="reporterEmail" name="reporterEmail" type="email" required />
  </div>
</div>

ตอนนี้หน้าตายังเหมือนเดิม เพราะเรายังไม่ได้กำหนด Style ให้ form-row

Slide 14: เปลี่ยนเป็นสองคอลัมน์ด้วย Media Query

เพิ่มไว้ท้ายไฟล์ style.css

@media (min-width: 720px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

บนหน้าจอเล็ก Field ยังคงเรียงจากบนลงล่างตาม HTML เดิม เมื่อหน้าจอกว้างอย่างน้อย 720px Media Query จึงเปลี่ยน form-row เป็น Grid สองคอลัมน์

แนวทางนี้เรียกว่า Mobile-first เพราะ Style พื้นฐานรองรับจอเล็กก่อน แล้วค่อยเพิ่ม Layout สำหรับจอกว้าง

Slide 15: ตรวจหน้าเว็บก่อนเพิ่ม Issue List

เปิด index.html แล้วตรวจผลลัพธ์:

  • หน้าเว็บโหลด style.css สำเร็จ
  • เนื้อหาอยู่กลางหน้าและไม่กว้างเกินไป
  • Form มีระยะห่างสม่ำเสมอ
  • Footer อยู่กึ่งกลางและแยกจากเนื้อหาหลักชัดเจน
  • กด Tab แล้วเห็น Focus ชัดเจน
  • ปุ่มเปลี่ยนสีเมื่อ Hover
  • จอเล็กแสดง Field แนวตั้ง
  • จอกว้างแสดงชื่อและอีเมลสองคอลัมน์

Hour ถัดไปเราจะเพิ่ม Issue List และ Status Badge ก่อนบันทึก Project ด้วย Git