Skip to content
UX/UI Engineer Roadmap

Solution: Hello World Deploy

Final Project Structure

Section titled “Final Project Structure”
  • Directoryhello-world/
    • index.html หน้าเว็บหลัก
    • .gitignore ไฟล์ที่ Git จะไม่ track

Solution Code

Section titled “Solution Code”
Show index.html
index.html
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello World</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    body {
      font-family: system-ui, -apple-system, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f8fafc;
      color: #1e293b;
      padding: 2rem;
    }


    h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }


    p {
      font-size: 1.125rem;
      color: #64748b;
    }
  </style>
</head>
<body>
  <h1>สวัสดีชาวโลก!</h1>
  <p>นี่คือเว็บไซต์แรกของฉัน — deployed บน GitHub Pages</p>
</body>
</html>
Show .gitignore
.gitignore
# OS files
.DS_Store
Thumbs.db


# Editor files
.vscode/
*.swp


# Logs
*.log


# Environment
.env

Code Explanation

Section titled “Code Explanation”

  1. HTML Boilerplate

    <!DOCTYPE html> บอก browser ว่านี่คือ HTML5 ส่วน <meta charset="UTF-8"> ทำให้แสดงภาษาไทยได้ และ <meta name="viewport"> ทำให้ responsive บนมือถือ

  2. Inline CSS

    ใช้ <style> tag ใน <head> สำหรับโปรเจกต์เล็กๆ แบบนี้ — ใช้ Flexbox (display: flex) จัดให้เนื้อหาอยู่กลางจอ

  3. Semantic HTML

    ใช้ <h1> สำหรับหัวข้อหลัก และ <p> สำหรับข้อความ — เป็น tag พื้นฐานที่ใช้บ่อยที่สุด

Git Commands Used

Section titled “Git Commands Used”
Terminal
# 1. สร้างโปรเจกต์
mkdir hello-world && cd hello-world


# 2. สร้า��ไฟล์
touch index.html .gitignore


# 3. เขียนโค้ด (ใช้ VS Code)
code .


# 4. Git workflow
git init
git add .
git commit -m "first commit: add hello world page"


# 5. เชื่อมกับ GitHub
git remote add origin https://github.com/YOUR_USERNAME/hello-world.git
git push -u origin main


# 6. Deploy → Settings > Pages > main branch

What You Learned

Section titled “What You Learned”
  • ติดตั้งและใช้ VS Code กับ extensions ที่จำเป็น
  • ใช้ Terminal สร้างโฟลเดอร์และไฟล์
  • เขียน HTML พื้นฐาน (heading, paragraph, inline CSS)
  • ใช้ Git workflow: init → add → commit → push
  • Deploy เว็บขึ้นอินเทอร์เน็ตด้วย GitHub Pages