สร้าง Landing Page ด้วย HTML และ CSS

HTML & CSS

เรียนรู้การสร้าง Landing Page ด้วย HTML และ CSS ตั้งแต่โครงสร้างหน้าเว็บ การจัดวางแบบ Responsive การออกแบบการ์ดบริการ ไปจนถึงการต่อยอดเป็นบริการรับทำเว็บไซต์เพื่อสร้างรายได้ในปี 2026

1. Landing Page: จุดเริ่มต้นของโอกาสสร้างรายได้

2. เข้าใจ HTML และ CSS ก่อนลงมือสร้าง

3. สร้าง Landing Page ที่ทดลองใช้งานได้จริง

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ตัวอย่าง Landing Page สำหรับบริการออกแบบเว็บไซต์">
  <title>BrightWeb | ออกแบบเว็บไซต์</title>
  <style>
    :root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --ink: #172033;
      --muted: #64748b;
      --surface: #ffffff;
      --background: #f1f5f9;
      --border: #e2e8f0;
      --radius: 18px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Tahoma, Arial, sans-serif;
      color: var(--ink);
      background: var(--background);
      line-height: 1.7;
    }

    a { color: inherit; }

    .container {
      width: min(1080px, calc(100% - 36px));
      margin: 0 auto;
    }

    .navbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      color: var(--primary);
      font-size: 1.25rem;
      font-weight: 800;
      text-decoration: none;
    }

    .nav-link {
      color: var(--muted);
      text-decoration: none;
      font-size: .95rem;
    }

    .hero {
      padding: 76px 0 60px;
      text-align: center;
      background: linear-gradient(135deg, #dbeafe, #eff6ff 55%, #ffffff);
    }

    .eyebrow {
      display: inline-block;
      padding: 5px 12px;
      border: 1px solid #bfdbfe;
      border-radius: 999px;
      background: #ffffff;
      color: var(--primary-dark);
      font-size: .85rem;
      font-weight: 700;
    }

    h1 {
      max-width: 760px;
      margin: 20px auto 14px;
      font-size: clamp(2rem, 5vw, 3.5rem);
      line-height: 1.2;
      letter-spacing: -.04em;
    }

    .hero p {
      max-width: 650px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 28px;
    }

    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 46px;
      padding: 10px 20px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: var(--primary);
      color: #ffffff;
      font-weight: 700;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    .button:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
    }

    .button-secondary {
      background: #ffffff;
      border-color: var(--border);
      color: var(--ink);
    }

    .button-secondary:hover {
      background: #f8fafc;
      color: var(--ink);
    }

    .section { padding: 58px 0; }

    .section-heading {
      margin: 0 0 10px;
      text-align: center;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
    }

    .section-intro {
      max-width: 650px;
      margin: 0 auto 30px;
      color: var(--muted);
      text-align: center;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    .card {
      display: flex;
      flex-direction: column;
      padding: 25px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
    }

    .card h3 { margin: 0 0 8px; font-size: 1.2rem; }
    .card p { margin: 0 0 18px; color: var(--muted); }

    .price {
      margin: 6px 0 14px;
      color: var(--primary-dark);
      font-size: 1.8rem;
      font-weight: 800;
    }

    .features {
      flex: 1;
      margin: 0 0 22px;
      padding-left: 20px;
    }

    .features li { margin: 7px 0; }
    .card .button { width: 100%; }

    .note {
      max-width: 760px;
      margin: 24px auto 0;
      padding: 15px 18px;
      border-radius: 12px;
      background: #eff6ff;
      color: #1e40af;
      font-size: .92rem;
    }

    .contact {
      padding: 42px 24px;
      border-radius: 22px;
      background: #172554;
      color: #ffffff;
      text-align: center;
    }

    .contact p { color: #dbeafe; }
    .contact .button { background: #ffffff; color: #1d4ed8; }
    .contact .button:hover { background: #dbeafe; }

    footer {
      padding: 25px 0;
      color: var(--muted);
      text-align: center;
      font-size: .9rem;
    }

    a:focus-visible {
      outline: 3px solid #f59e0b;
      outline-offset: 4px;
    }

    @media (max-width: 760px) {
      .hero { padding: 54px 0 44px; }
      .cards { grid-template-columns: 1fr; }
      .card { padding: 22px; }
      .nav-inner { min-height: 64px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }
  </style>
</head>
<body>
  <header class="navbar">
    <nav class="container nav-inner" aria-label="เมนูหลัก">
      <a class="brand" href="#home">BrightWeb</a>
      <a class="nav-link" href="#packages">แพ็กเกจบริการ</a>
    </nav>
  </header>

  <main id="home">
    <section class="hero">
      <div class="container">
        <span class="eyebrow">เว็บไซต์ที่ออกแบบเพื่อธุรกิจ</span>
        <h1>เปลี่ยนไอเดียของคุณให้เป็นเว็บไซต์ที่พร้อมเติบโต</h1>
        <p>สร้างหน้าเว็บที่ดูดี ใช้งานง่ายบนมือถือ และสื่อสารจุดเด่นของธุรกิจได้ชัดเจน เริ่มต้นจากเป้าหมายของคุณแล้วค่อยต่อยอดตามความต้องการ</p>
        <div class="actions">
          <a class="button" href="#packages">ดูแพ็กเกจตัวอย่าง</a>
          <a class="button button-secondary" href="#contact">พูดคุยเกี่ยวกับโปรเจกต์</a>
        </div>
      </div>
    </section>

    <section class="section" id="packages">
      <div class="container">
        <h2 class="section-heading">เลือกบริการให้เหมาะกับธุรกิจ</h2>
        <p class="section-intro">ตัวอย่างแพ็กเกจสำหรับใช้ฝึกออกแบบหน้าเว็บ สามารถเปลี่ยนรายละเอียดและราคาให้เหมาะกับงานจริงได้</p>

        <div class="cards">
          <article class="card">
            <h3>Starter</h3>
            <p>สำหรับผู้เริ่มต้นและธุรกิจขนาดเล็ก</p>
            <div class="price">฿2,900</div>
            <ul class="features">
              <li>หน้า Landing Page 1 หน้า</li>
              <li>รองรับมือถือและแท็บเล็ต</li>
              <li>ปุ่มติดต่อและลิงก์โซเชียล</li>
            </ul>
            <a class="button button-secondary" href="#contact">สอบถามแพ็กเกจ</a>
          </article>

          <article class="card">
            <h3>Business</h3>
            <p>สำหรับธุรกิจที่ต้องการข้อมูลครบถ้วน</p>
            <div class="price">฿5,900</div>
            <ul class="features">
              <li>หน้าเว็บแนะนำบริการ</li>
              <li>ส่วนแสดงสินค้าและผลงาน</li>
              <li>จัดวางเนื้อหาแบบ Responsive</li>
            </ul>
            <a class="button" href="#contact">สอบถามแพ็กเกจ</a>
          </article>

          <article class="card">
            <h3>Custom</h3>
            <p>สำหรับความต้องการเฉพาะของแต่ละธุรกิจ</p>
            <div class="price">ตามขอบเขตงาน</div>
            <ul class="features">
              <li>ออกแบบตามแบรนด์</li>
              <li>ปรับโครงสร้างหน้าเว็บตามโจทย์</li>
              <li>วางแผนต่อยอดระบบในอนาคต</li>
            </ul>
            <a class="button button-secondary" href="#contact">พูดคุยรายละเอียด</a>
          </article>
        </div>

        <p class="note">หมายเหตุ: ราคาและรายการบริการเป็นข้อมูลตัวอย่างเพื่อการเรียนรู้ ไม่ใช่ราคาตลาดที่รับประกัน ควรประเมินขอบเขตงาน ต้นทุน เวลา และค่าใช้จ่ายหลังส่งมอบก่อนเสนอราคาลูกค้า</p>
      </div>
    </section>

    <section class="section" id="contact">
      <div class="container">
        <div class="contact">
          <h2>พร้อมเริ่มโปรเจกต์ของคุณหรือยัง?</h2>
          <p>เปลี่ยนลิงก์ตัวอย่างนี้ให้เป็นช่องทางติดต่อจริงของคุณ</p>
          <a class="button" href="mailto:[email protected]?subject=Website%20Project">ส่งอีเมลสอบถาม</a>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">© 2026 BrightWeb — ตัวอย่างเพื่อการศึกษา HTML และ CSS</div>
  </footer>
</body>
</html>

4. อธิบาย CSS ที่ทำให้หน้าเว็บใช้งานได้หลายหน้าจอ

หลักการ CSS ที่ควรฝึกให้คล่อง

5. ต่อยอดทักษะ HTML และ CSS ให้เป็นบริการที่ขายได้

6. วางแผนเริ่มต้นภายใน 30 วัน

7. คำถามที่พบบ่อย

8. สรุป: เปลี่ยนทักษะให้เป็นผลงาน

เริ่มฝึกสร้าง Landing Page ของคุณ