Web Design Template
Web Design Template Layout CSS Framework Component Library Responsive Design HTML CSS JavaScript TailwindCSS Bootstrap Mobile Tablet Desktop SEO Lighthouse Production
| Framework | Approach | Size | Learning | Customization | เหมาะกับ |
|---|---|---|---|---|---|
| TailwindCSS | Utility-first | ~10KB (purged) | ปานกลาง | สูงมาก | Custom Design |
| Bootstrap 5 | Component | ~22KB | ง่าย | ปานกลาง | Quick Prototype |
| Bulma | Flexbox | ~25KB | ง่าย | ปานกลาง | Simple Projects |
| Material UI | Component | ~40KB | ปานกลาง | สูง | React + Google |
| Shadcn/ui | Copy-paste | ~5KB per comp | ปานกลาง | สูงมาก | Next.js Projects |
Layout System
# === Modern CSS Layout Template ===
# HTML Structure
# <!DOCTYPE html>
# <html lang="th">
# <head>
# <meta charset="UTF-8">
# <meta name="viewport" content="width=device-width, initial-scale=1.0">
# <title>My Website</title>
# <link rel="stylesheet" href="style.css">
# </head>
# <body>
# <header class="header">...</header>
# <nav class="nav">...</nav>
# <main class="main">
# <article class="content">...</article>
# <aside class="sidebar">...</aside>
# </main>
# <footer class="footer">...</footer>
# </body>
# </html>
# CSS Grid Layout
# :root {
# --primary: #2563eb;
# --secondary: #64748b;
# --bg: #0f172a;
# --text: #e2e8f0;
# --font: 'Inter', sans-serif;
# --max-width: 1200px;
# --radius: 8px;
# }
#
# body {
# font-family: var(--font);
# background: var(--bg);
# color: var(--text);
# margin: 0;
# line-height: 1.6;
# }
#
# .main {
# display: grid;
# grid-template-columns: 1fr 300px;
# gap: 2rem;
# max-width: var(--max-width);
# margin: 0 auto;
# padding: 2rem;
# }
#
# /* Responsive */
# @media (max-width: 768px) {
# .main { grid-template-columns: 1fr; }
# .sidebar { order: -1; }
# }
from dataclasses import dataclass
@dataclass
class LayoutPattern:
name: str
css_method: str
columns: str
use_case: str
responsive: str
layouts = [
LayoutPattern("Holy Grail", "CSS Grid", "sidebar | content | sidebar", "Blog Dashboard", "Stack on mobile"),
LayoutPattern("Two Column", "CSS Grid", "content | sidebar", "Article + Related", "Sidebar below on mobile"),
LayoutPattern("Card Grid", "CSS Grid", "auto-fill minmax(300px, 1fr)", "Product Gallery", "1-4 columns auto"),
LayoutPattern("Full Width", "Flexbox", "100% content", "Landing Page", "Stack sections"),
LayoutPattern("Masonry", "CSS Columns", "Variable height cards", "Pinterest-like", "1-3 columns"),
LayoutPattern("Dashboard", "CSS Grid", "sidebar + grid areas", "Admin Panel", "Collapse sidebar"),
]
print("=== Layout Patterns ===")
for l in layouts:
print(f" [{l.name}] Method: {l.css_method}")
print(f" Columns: {l.columns}")
print(f" Use: {l.use_case} | Responsive: {l.responsive}")Component Library
# === Reusable Components ===
# Card Component (TailwindCSS)
# <div class="bg-slate-800 rounded-lg p-6 border border-slate-700
# hover:border-blue-500 transition-colors">
# <img src="image.jpg" alt="..." class="w-full h-48 object-cover rounded">
# <h3 class="text-xl font-bold mt-4">Title</h3>
# <p class="text-slate-400 mt-2">Description...</p>
# <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-600
# rounded hover:bg-blue-700 transition-colors">Read More</a>
# </div>
# Navigation (Responsive)
# <nav class="flex items-center justify-between p-4 bg-slate-900">
# <a href="/" class="text-xl font-bold">Logo</a>
# <button class="md:hidden" onclick="toggleMenu()">☰</button>
# <ul class="hidden md:flex space-x-6">
# <li><a href="#" class="hover:text-blue-400">Home</a></li>
# <li><a href="#" class="hover:text-blue-400">About</a></li>
# <li><a href="#" class="hover:text-blue-400">Blog</a></li>
# <li><a href="#" class="hover:text-blue-400">Contact</a></li>
# </ul>
# </nav>
@dataclass
class Component:
name: str
html_tag: str
css_classes: str
variants: str
accessibility: str
components = [
Component("Button", "button", "px-4 py-2 rounded font-medium", "Primary Secondary Outline Ghost", "aria-label role=button"),
Component("Card", "div", "rounded-lg border p-6", "Default Elevated Outline", "article role"),
Component("Input", "input", "w-full px-3 py-2 rounded border", "Text Email Password Search", "label + aria-describedby"),
Component("Modal", "dialog", "fixed inset-0 z-50", "Small Medium Large", "aria-modal focus-trap"),
Component("Alert", "div", "p-4 rounded-lg border", "Info Success Warning Error", "role=alert aria-live"),
Component("Table", "table", "w-full border-collapse", "Default Striped Hover", "scope headers caption"),
Component("Badge", "span", "px-2 py-1 text-xs rounded-full", "Default Outline Dot", "aria-label"),
]
print("\n=== Component Library ===")
for c in components:
print(f" [{c.name}] Tag: {c.html_tag}")
print(f" CSS: {c.css_classes}")
print(f" Variants: {c.variants}")
print(f" A11y: {c.accessibility}")Performance
# === Web Performance Optimization ===
@dataclass
class PerfMetric:
metric: str
target: str
tool: str
improvement: str
metrics = [
PerfMetric("LCP (Largest Contentful Paint)", "<2.5s", "Lighthouse", "Optimize images, preload fonts"),
PerfMetric("FID (First Input Delay)", "<100ms", "Lighthouse", "Defer non-critical JS"),
PerfMetric("CLS (Cumulative Layout Shift)", "<0.1", "Lighthouse", "Set image dimensions, avoid FOUT"),
PerfMetric("FCP (First Contentful Paint)", "<1.8s", "Lighthouse", "Inline critical CSS"),
PerfMetric("TTFB (Time to First Byte)", "<600ms", "WebPageTest", "CDN, server optimization"),
PerfMetric("Total Page Size", "<500KB", "DevTools", "Compress images, minify CSS/JS"),
PerfMetric("HTTP Requests", "<30", "DevTools", "Bundle, sprite, lazy load"),
PerfMetric("Lighthouse Score", ">90", "Lighthouse", "Follow all recommendations"),
]
print("Performance Targets:")
for m in metrics:
print(f" [{m.metric}] Target: {m.target}")
print(f" Tool: {m.tool} | Fix: {m.improvement}")
checklist = {
"Images": "WebP format, srcset responsive, lazy loading",
"CSS": "Purge unused, minify, critical inline",
"JavaScript": "Defer/async, code split, tree shake",
"Fonts": "Preload, font-display swap, subset",
"Caching": "Cache-Control headers, Service Worker",
"Compression": "Brotli/Gzip on server",
"SEO": "Semantic HTML, meta tags, OG tags, sitemap",
"A11y": "Alt text, ARIA labels, keyboard nav, contrast",
}
print(f"\n\nOptimization Checklist:")
for k, v in checklist.items():
print(f" [{k}]: {v}")เคล็ดลับ
- Mobile First: ออกแบบมือถือก่อน ขยายไป Desktop
- CSS Variables: ใช้ CSS Variables สำหรับ Theme ปรับง่าย
- Lighthouse: ทดสอบ Lighthouse Score ทุกครั้งก่อน Deploy
- Semantic: ใช้ Semantic HTML เช่น header nav main article
- A11y: ทดสอบ Accessibility ด้วย axe DevTools
การนำความรู้ไปประยุกต์ใช้งานจริง
แหล่งเรียนรู้ที่แนะนำ ได้แก่ Official Documentation ที่อัพเดทล่าสุดเสมอ Online Course จาก Coursera Udemy edX ช่อง YouTube คุณภาพทั้งไทยและอังกฤษ และ Community อย่าง Discord Reddit Stack Overflow ที่ช่วยแลกเปลี่ยนประสบการณ์กับนักพัฒนาทั่วโลก
Web Design Template คืออะไร
โครงสร้างเว็บสำเร็จรูป Layout Header Footer Content HTML CSS JavaScript ฟรี เสียเงิน ลดเวลาพัฒนา CMS Static Site Generator
เลือก Template อย่างไร
Responsive Mobile Tablet Desktop Page Speed SEO Semantic Browser Compatibility Customization Documentation License Update Community
CSS Framework มีอะไรบ้าง
TailwindCSS Utility-first Bootstrap Component Bulma Flexbox Foundation Enterprise Material UI Google Chakra UI React Shadcn/ui Radix Customizable
สร้าง Template อย่างไร
Wireframe โครงสร้าง CSS Grid Flexbox Component Header Nav Card CSS Variables Theme Responsive Breakpoints Cross-browser Lighthouse Optimize
สรุป
Web Design Template Layout CSS Grid Flexbox TailwindCSS Bootstrap Component Library Responsive Mobile First Lighthouse SEO Accessibility Performance Production
