Skip to content
UX/UI Engineer Roadmap

Solution: Personal Portfolio

Try the Complete App

Section titled “Try the Complete App”

ลองเล่น Personal Portfolio ที่สมบูรณ์แล้ว — ลอง scroll ดูแต่ละ section, hover ที่ skill cards, และคลิก nav links ดู

index.html
Complete Demo Interactive
Hello, I'm

Alex

Frontend Developer

View My Work

About

I'm a passionate frontend developer who loves building beautiful and functional web experiences. I focus on clean code, responsive design, and creating interfaces that are both intuitive and delightful to use.

Skills

HTML
CSS
JavaScript
Flexbox
Grid
Responsive

Get in Touch

alex@example.com
Built with HTML & CSS

Final Project Structure

Section titled “Final Project Structure”
  • Directoryportfolio/
    • index.html หน้าเว็บหลัก (HTML structure ทั้งหมด)
    • style.css ไฟล์ CSS (layout, responsive, styling)

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>My Portfolio</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>
<body>


  <!-- Header + Navigation -->
  <header class="header">
    <nav class="nav container">
      <a href="#" class="logo">Portfolio</a>
      <ul class="nav-links">
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>


  <main>


    <!-- About Section -->
    <section id="about" class="about container">
      <div class="about-content">
        <h1>สวัสดี, ฉันชื่อ <span class="highlight">นักออกแบบ</span></h1>
        <p class="about-subtitle">UX/UI Designer & Frontend Developer</p>
        <p class="about-text">
          ฉันเป็นนักออกแบบที่หลงใหลเรื่อง user experience
          กำลังเรียนรู้การเขียนโค้ดเพื่อทำให้ design กลายเป็นจริง
          ชอบสร้างสิ่งที่ใช้ง่ายและสวยงาม
        </p>
        <a href="#contact" class="btn">ติดต่อฉัน</a>
      </div>
    </section>


    <!-- Skills Section -->
    <section id="skills" class="skills">
      <div class="container">
        <h2 class="section-title">Skills</h2>
        <div class="skills-grid">
          <div class="skill-card">
            <div class="skill-icon">&#127912;</div>
            <h3>UI Design</h3>
            <p>ออกแบบ interface ที่สวยงามและใช้งานง่าย ด้วย Figma</p>
          </div>
          <div class="skill-card">
            <div class="skill-icon">&#128187;</div>
            <h3>HTML & CSS</h3>
            <p>สร้างหน้าเว็บ responsive ด้วย Flexbox และ Grid</p>
          </div>
          <div class="skill-card">
            <div class="skill-icon">&#128241;</div>
            <h3>Responsive Design</h3>
            <p>ทำเว็บให้แสดงผลดีทุกหน้าจอ mobile, tablet, desktop</p>
          </div>
          <div class="skill-card">
            <div class="skill-icon">&#129309;</div>
            <h3>UX Research</h3>
            <p>ทำความเข้าใจผู้ใช้และออกแบบ experience ที่ตอบโจทย์</p>
          </div>
          <div class="skill-card">
            <div class="skill-icon">&#9889;</div>
            <h3>Prototyping</h3>
            <p>สร้าง prototype แบบ interactive เพื่อทดสอบไอเดีย</p>
          </div>
          <div class="skill-card">
            <div class="skill-icon">&#128640;</div>
            <h3>Deployment</h3>
            <p>Deploy เว็บขึ้น GitHub Pages ด้วย Git workflow</p>
          </div>
        </div>
      </div>
    </section>


    <!-- Contact Section -->
    <section id="contact" class="contact">
      <div class="container">
        <h2 class="section-title">Contact</h2>
        <p class="contact-text">อยากคุยเรื่องงานหรือ project? ติดต่อได้เลย!</p>
        <div class="contact-links">
          <a href="mailto:your@email.com" class="contact-link">
            Email
          </a>
          <a href="https://github.com/yourusername" target="_blank" class="contact-link">
            GitHub
          </a>
          <a href="https://linkedin.com/in/yourusername" target="_blank" class="contact-link">
            LinkedIn
          </a>
        </div>
      </div>
    </section>


  </main>


  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>&copy; 2025 Portfolio. Built with HTML & CSS</p>
    </div>
  </footer>


</body>
</html>
Show style.css
style.css
/* ============================================
   1. Reset & Base
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ============================================
   2. CSS Variables
   ============================================ */
:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-text: #1f2937;
  --color-text-light: #64748b;
  --color-border: #e2e8f0;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
}


/* ============================================
   3. Typography & Body
   ============================================ */
body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
}


h1, h2, h3 {
  line-height: 1.2;
}


h1 {
  font-size: 2.25rem;
  font-weight: 700;
}


h2 {
  font-size: 1.75rem;
  font-weight: 600;
}


h3 {
  font-size: 1.125rem;
  font-weight: 600;
}


a {
  text-decoration: none;
  color: var(--color-primary);
}


a:hover {
  color: var(--color-primary-dark);
}


/* ============================================
   4. Layout
   ============================================ */
.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}


.section-title {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}


/* ============================================
   5. Header & Navigation (Flexbox)
   ============================================ */
.header {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}


.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}


.logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}


.logo:hover {
  color: var(--color-primary);
}


.nav-links {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
}


.nav-links a {
  color: var(--color-text-light);
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}


.nav-links a:hover {
  color: var(--color-primary);
  background: rgba(59, 130, 246, 0.08);
}


/* ============================================
   6. About / Hero Section (Flexbox Center)
   ============================================ */
.about {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}


.about-content {
  max-width: 600px;
}


.highlight {
  color: var(--color-primary);
}


.about-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}


.about-text {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}


.btn {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  padding: 12px 32px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
}


.btn:hover {
  background: var(--color-primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}


/* ============================================
   7. Skills Section (CSS Grid)
   ============================================ */
.skills {
  padding: var(--spacing-xl) 0;
  background: var(--color-bg-alt);
}


.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}


.skill-card {
  background: var(--color-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}


.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}


.skill-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}


.skill-card h3 {
  margin-bottom: var(--spacing-sm);
}


.skill-card p {
  color: var(--color-text-light);
  font-size: 0.9375rem;
}


/* ============================================
   8. Contact Section
   ============================================ */
.contact {
  padding: var(--spacing-xl) 0;
  text-align: center;
}


.contact-text {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  font-size: 1.125rem;
}


.contact-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}


.contact-link {
  display: inline-block;
  padding: 12px 32px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-weight: 600;
  transition: all 0.3s ease;
}


.contact-link:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}


/* ============================================
   9. Footer
   ============================================ */
.footer {
  padding: var(--spacing-lg) 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.875rem;
}


/* ============================================
   10. Responsive Design (Mobile-first)
   ============================================ */


/* Tablet (768px) */
@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }


  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .about {
    min-height: 85vh;
  }
}


/* Desktop (1024px) */
@media (min-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }


  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }


  .container {
    padding: 0 var(--spacing-lg);
  }
}


/* ============================================
   11. Smooth Scroll
   ============================================ */
html {
  scroll-behavior: smooth;
}

Code Explanation

Section titled “Code Explanation”

  1. HTML Structure — Semantic Tags

    ใช้ <header>, <main>, <section>, <footer> แทน <div> ทุกที่ เพื่อให้โครงสร้างสื่อความหมาย ดีต่อ SEO และ accessibility แต่ละ section มี id เพื่อให้ nav link (href="#about") กดแล้วเลื่อนไปถูกจุด

  2. CSS Variables — Design Tokens

    ประกาศสี, spacing, radius, shadow ไว้ที่ :root เป็น variables ทำให้เปลี่ยนธีมทั้งเว็บได้จากจุดเดียว ไม่ต้องไล่แก้ทีละ property

  3. Flexbox — Navigation & About

    Navigation ใช้ display: flex + justify-content: space-between จัด logo ซ้าย links ขวา ส่วน About section ใช้ display: flex + align-items: center + min-height: 80vh จัดเนื้อหาให้อยู่กลางจอแนวตั้ง

  4. CSS Grid — Skills Cards

    Skills section ใช้ display: grid จัด cards เริ่มจาก 1 คอลัมน์ (mobile) แล้วเพิ่มเป็น 2 คอลัมน์ (tablet) และ 3 คอลัมน์ (desktop) ผ่าน media queries

  5. Responsive Design — Mobile-first

    เขียน CSS สำหรับ mobile ก่อน (default) แล้วใช้ @media (min-width: 768px) และ @media (min-width: 1024px) เพิ่ม style สำหรับจอใหญ่ขึ้น ทำให้โค้ดสะอาดและ maintain ง่าย

  6. Hover & Transition — Micro-interactions

    ทุก interactive element (links, buttons, cards) มี transition: all 0.3s ease เพื่อให้การเปลี่ยนแปลงเป็น animation ที่นุ่มนวล เช่น card ลอยขึ้นเมื่อ hover, ปุ่มเปลี่ยนสี

  7. Sticky Header

    ใช้ position: sticky + top: 0 ทำให้ navigation bar ติดอยู่ด้านบนตลอดเวลาที่เลื่อนหน้าเว็บ พร้อม z-index: 100 ให้ header อยู่บน content อื่น

  8. Smooth Scroll

    html { scroll-behavior: smooth; } ทำให้การกดลิงก์ (#about, #skills, #contact) เลื่อนไปอย่างนุ่มนวลแทนที่จะกระโดดไปทันที

Deploy Commands

Section titled “Deploy Commands”
Terminal
# 1. สร้างโปรเจกต์
mkdir portfolio && cd portfolio


# 2. สร้างไฟล์
touch index.html style.css


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


# 4. Git workflow
git init
git add .
git commit -m "add personal portfolio with responsive design"


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


# 6. Deploy → Settings > Pages > main branch

What You Learned

Section titled “What You Learned”
  • เขียน HTML ด้วย semantic tags (header, nav, main, section, footer)
  • ใช้ CSS Variables จัดการ design tokens จากจุดเดียว
  • ใช้ Flexbox จัด navigation bar และจัดเนื้อหาตรงกลาง
  • ใช้ CSS Grid สร้าง skills card grid ที่ responsive
  • เขียน Responsive Design แบบ mobile-first ด้วย media queries
  • เพิ่ม hover effects และ transitions ให้ UI มีชีวิตชีวา
  • Deploy เว็บขึ้น GitHub Pages ด้วย Git workflow