Login

Xây dựng website portfolio cá nhân cho lập trình viên mới: nội dung, bố cục và code

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Với lập trình viên mới, portfolio là bằng chứng sống động nhất cho khả năng của bạn, nhiều khi thuyết phục hơn cả bảng điểm. Bài này hướng dẫn bạn quyết định nên đưa gì vào portfolio và dựng một trang cá nhân gọn gàng, responsive chỉ bằng HTML và CSS.

Nhà tuyển dụng muốn thấy gì

Người xem portfolio thường chỉ dành vài chục giây ban đầu, nên trang cần trả lời nhanh ba câu hỏi: bạn là ai, bạn làm được gì, và làm sao để liên hệ. Thay vì liệt kê tất cả những gì từng học, hãy chọn lọc:

  • Giới thiệu ngắn: hai đến ba câu về hướng bạn theo đuổi, ví dụ "lập trình viên web quan tâm đến front-end".
  • Ba đến sáu dự án tốt nhất: chất lượng quan trọng hơn số lượng.
  • Kỹ năng: chỉ những công nghệ bạn thật sự dùng được.
  • Liên hệ: email, GitHub, LinkedIn.

Cách trình bày một dự án

Mỗi thẻ dự án nên có tên, một câu mô tả vấn đề nó giải quyết, công nghệ sử dụng, liên kết đến bản chạy thử và mã nguồn. Nếu có thể, hãy nói rõ vai trò của bạn (nhất là với dự án nhóm) và điều khó nhất bạn đã vượt qua. Đừng thổi phồng: người phỏng vấn hoàn toàn có thể hỏi sâu vào bất kỳ dòng nào bạn ghi, và bạn nên giải thích được mọi thứ trong đó.

Bước 1: Khung HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nguyễn An - Lập trình viên Web</title>
  <meta name="description" content="Portfolio của Nguyễn An, lập trình viên web.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>Xin chào, mình là An</h1>
    <p>Lập trình viên web đang tập trung vào front-end và trải nghiệm người dùng.</p>
    <a class="btn" href="#projects">Xem dự án</a>
  </header>

  <main>
    <section id="projects">
      <h2>Dự án</h2>
      <div class="grid">
        <article class="card">
          <h3>Ứng dụng Todo</h3>
          <p>Quản lý công việc có lưu dữ liệu cục bộ, viết bằng JavaScript thuần.</p>
          <p class="tags">HTML · CSS · JavaScript</p>
          <a href="https://example.com/demo">Demo</a> ·
          <a href="https://github.com/example/todo">Mã nguồn</a>
        </article>
        <!-- thêm các thẻ dự án khác -->
      </div>
    </section>

    <section id="skills">
      <h2>Kỹ năng</h2>
      <ul class="skills">
        <li>HTML, CSS</li>
        <li>JavaScript</li>
        <li>Git, GitHub</li>
      </ul>
    </section>

    <section id="contact">
      <h2>Liên hệ</h2>
      <p>Email: <a href="mailto:an@example.com">an@example.com</a></p>
    </section>
  </main>

  <footer><p>© 2026 Nguyễn An</p></footer>
</body>
</html>

Các địa chỉ và tên trong ví dụ chỉ là minh họa, hãy thay bằng thông tin thật của bạn.

Bước 2: CSS đơn giản mà gọn

:root {
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #6d28d9;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--text); line-height: 1.6; background: var(--bg); }
main, .hero, footer { padding: 32px 20px; max-width: 960px; margin: 0 auto; }
.hero { padding-top: 72px; }
.hero h1 { font-size: 2rem; margin: 0 0 8px; }
.btn { display: inline-block; margin-top: 16px; padding: 10px 20px; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; }

.grid { display: grid; gap: 16px; }
.card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.tags { color: var(--muted); font-size: .9rem; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.skills li { background: #f3f4f6; padding: 6px 12px; border-radius: 999px; }

@media (min-width: 700px) {
  .hero h1 { font-size: 3rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

Việc dùng biến CSS (--accent) cho phép đổi màu chủ đạo ở một chỗ. Giao diện này mới chỉ là khởi đầu, bạn có thể thêm chế độ tối, hiệu ứng nhẹ hoặc ảnh chụp màn hình dự án.

Bước 3: Đưa lên mạng

Đẩy mã lên GitHub và bật GitHub Pages, hoặc dùng các dịch vụ lưu trữ tĩnh miễn phí khác. Có địa chỉ riêng để ghi vào CV là điểm cộng lớn. Nếu có thể, hãy đặt tên miền gọn như tên của bạn.

Những lỗi nên tránh

  • Đưa dự án làm theo video mà không chỉnh sửa gì, trong khi hàng nghìn người khác cũng làm giống hệt.
  • Liên kết demo hỏng hoặc repository trống không có README.
  • Giao diện không dùng được trên điện thoại.
  • Chữ lỗi chính tả, ảnh mờ, thông tin liên hệ sai.
  • Khoe kỹ năng mà bạn không tự tin trả lời khi bị hỏi.

Làm cho repository đẹp hơn

Nhà tuyển dụng thường bấm vào mã nguồn. Hãy viết README ngắn gồm mô tả, cách chạy, ảnh minh họa và những điều bạn đã học. Commit thường xuyên với thông điệp rõ ràng cũng nói lên thói quen làm việc của bạn.

Kết luận

Một portfolio tốt không cần cầu kỳ: nội dung chọn lọc, giao diện sạch, liên kết hoạt động và mọi thứ bạn nêu đều là sự thật. Hãy xem nó là sản phẩm sống, cập nhật mỗi khi bạn hoàn thành dự án mới.

Nếu cần các dự án thực hành chất lượng để bổ sung vào portfolio, bạn có thể tham khảo các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment