Skip to content
UX/UI Engineer Roadmap

Workshop: Personal Portfolio

Project Brief

Section titled “Project Brief”

Personal Portfolio (1 page)

สร้างหน้าเว็บ Portfolio แนะนำตัวเอง ใช้ HTML + CSS ที่เรียนมาทั้งหมด — Flexbox, Grid, Responsive Design แล้ว deploy ขึ้นอินเทอร์เน็ต
  • Header + Navigation bar
  • About section แนะนำตัวเอง
  • Skills grid แสดงทักษะ
  • Contact section ช่องทางติดต่อ
  • Responsive — ใช้ได้ทั้ง mobile, tablet, desktop
  • Deploy ขึ้น GitHub Pages
Deploy to: GitHub Pages
What you'll build Preview
Home About Skills Contact
Alex Frontend Developer
Skills
〈/〉 HTML
🎨 CSS
⚡ JavaScript
↔ Flexbox
▦ Grid
📱 Responsive
Contact
alex@email.com
© 2025 Alex. Built with HTML & CSS

Project Structure

Section titled “Project Structure”
  • Directoryportfolio/
    • index.html หน้าเว็บหลัก
    • style.css ไฟล์ CSS ทั้งหมด

Step-by-Step Instructions

Section titled “Step-by-Step Instructions”

  1. สร้าง Project Folder

    เปิด Terminal แล้วสร้างโฟลเดอร์โปรเจกต์:

    Terminal window
    mkdir portfolio
    cd portfolio
    touch index.html style.css
    code .

  2. สร้าง HTML Structure

    เริ่มจาก HTML boilerplate (พิมพ์ ! แล้วกด Tab ใน VS Code) จากนั้นเพิ่ม:

    • <link> เชื่อม CSS file
    • Google Fonts (Inter หรือ font ที่ชอบ)
    • Semantic HTML tags: <header>, <main>, <section>, <footer>
    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>
      <!-- เพิ่มเนื้อหาในขั้นตอนถัดไป -->
    </body>
    </html>

  3. สร้าง Header + Navigation

    ใช้ <header> กับ <nav> สร้าง navigation bar:

    • Logo หรือชื่อคุณอยู่ฝั่งซ้าย
    • ลิงก์ไปแต่ละ section อยู่ฝั่งขวา
    • ใช้ href="#section-id" เพื่อกดแล้วเลื่อนไปหา section นั้น
    <header>
      <nav>
        <a href="#" class="logo">Your Name</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>

  4. สร้าง Hero + About Section

    สร้าง section แนะนำตัวเอง:

    • หัวข้อใหญ่ (ชื่อ + ตำแหน่ง)
    • คำอธิบายสั้นๆ เกี่ยวกับตัวเอง
    <section id="about" class="about">
      <h1>สวัสดี, ฉันชื่อ [ชื่อคุณ]</h1>
      <p>UX/UI Designer ที่กำลังเรียนรู้การเขียนโค้ด</p>
      <p>ชอบออกแบบสิ่งที่ใช้ง่ายและสวยงาม</p>
    </section>

  5. สร้าง Skills Grid

    แสดง skill ที่มีเป็น grid:

    • ใช้ CSS Grid จัด card
    • แต่ละ card แสดงชื่อ skill + คำอธิบาย
    <section id="skills" class="skills">
      <h2>Skills</h2>
      <div class="skills-grid">
        <div class="skill-card">
          <h3>HTML & CSS</h3>
          <p>สร้างหน้าเว็บ responsive</p>
        </div>
        <!-- เพิ่ม skill cards อื่นๆ -->
      </div>
    </section>

  6. สร้าง Contact Section + Footer

    ใส่ช่องทางการติดต่อ:

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

    <footer>
      <p>&copy; 2025 Your Name. All rights reserved.</p>
    </footer>

  7. เขียน CSS ให้ครบ

    เปิด style.css แล้วเพิ่ม:

    • Reset + Variables — box-sizing: border-box, สี, spacing
    • Layout — ใช้ Flexbox จัด navbar, ใช้ Grid จัด skills
    • Responsive — เขียนแบบ mobile-first แล้วเพิ่ม @media สำหรับจอใหญ่
    • Hover + Transition — เพิ่ม effect ให้ลิงก์และ card
    • Typography — ใช้ Google Fonts, กำหนดขนาด heading

  8. Deploy ขึ้น GitHub Pages

    Terminal window
    git init
    git add .
    git commit -m "add personal portfolio"
    git remote add origin https://github.com/YOUR_USERNAME/portfolio.git
    git push -u origin main

    จากนั้นไปที่ Settings > Pages เลือก branch main แล้วกด Save

เมื่อทำเสร็จแล้ว ไปดูเฉลยได้ที่ Solution เพื่อเทียบกับงานของคุณ