Tạo trang cá nhân/portfolio với HTML cơ bản
Trong bài học này, bạn sẽ xây dựng một trang portfolio cá nhân chỉ với HTML cơ bản. Trang portfolio giúp bạn giới thiệu bản thân, kỹ năng, dự án và thông tin liên hệ đến nhà tuyển dụng hoặc khách hàng. Bạn sẽ sử dụng Semantic HTML để tạo một bố cục chuyên nghiệp và có tổ chức.
1. Portfolio với HTML cơ bản
1.1. Cấu trúc thư mục dự án
Trước khi viết code, bạn cần tổ chức các file theo cấu trúc sau:
/portfolio/
│── index.html (Trang chủ - Portfolio)
│── assets/ (Chứa hình ảnh, icon, v.v.)
│── css/ (Chứa file CSS - nếu có)
│── js/ (Chứa file JavaScript - nếu có)
1.2. Viết mã HTML cho Portfolio
Bố cục cơ bản của Portfolio
- Header: Chứa tên cá nhân, ảnh đại diện và menu điều hướng.
- Giới thiệu: Một đoạn mô tả ngắn về bản thân.
- Kỹ năng: Hiển thị các kỹ năng dưới dạng danh sách hoặc bảng.
- Dự án: Danh sách các dự án đã thực hiện.
- Liên hệ: Một form để người dùng gửi tin nhắn.
1.3. Viết mã HTML cho Portfolio
File index.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Cá Nhân</title>
</head>
<body>
<!-- Header -->
<header>
<h1>Họ và Tên</h1>
<p>Web Developer | Designer</p>
<nav>
<ul>
<li><a href="#about">Giới thiệu</a></li>
<li><a href="#skills">Kỹ năng</a></li>
<li><a href="#projects">Dự án</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<!-- Giới thiệu bản thân -->
<section id="about">
<h2>Giới thiệu</h2>
<img src="assets/avatar.jpg" alt="Ảnh đại diện" width="150">
<p>Xin chào! Tôi là một lập trình viên đam mê phát triển web và thiết kế giao diện người dùng.</p>
</section>
<!-- Kỹ năng -->
<section id="skills">
<h2>Kỹ năng</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>React, Vue.js</li>
<li>Thiết kế giao diện UX/UI</li>
</ul>
</section>
<!-- Dự án -->
<section id="projects">
<h2>Dự án</h2>
<ul>
<li><strong>Dự án 1:</strong> Website bán hàng <a href="#">(Xem chi tiết)</a></li>
<li><strong>Dự án 2:</strong> Blog cá nhân <a href="#">(Xem chi tiết)</a></li>
</ul>
</section>
<!-- Form liên hệ -->
<section id="contact">
<h2>Liên hệ</h2>
<form>
<label for="name">Họ và tên:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Tin nhắn:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<button type="submit">Gửi</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2025 - Portfolio cá nhân</p>
</footer>
</body>
</html>
2. Kết luận
Tóm tắt những gì bạn đã học được:
- Sử dụng Semantic HTML để xây dựng bố cục hợp lý.
- Hiển thị thông tin cá nhân, kỹ năng, dự án và liên hệ.
- Tạo form liên hệ để khách truy cập có thể gửi tin nhắn.
Hướng phát triển tiếp theo:
- Thêm CSS để trang web có giao diện đẹp hơn.
- Dùng JavaScript để làm form liên hệ tương tác hơn.
- Tạo phiên bản portfolio online và đăng tải trên GitHub Pages hoặc Netlify.
Hãy thử thách bản thân bằng cách tùy chỉnh trang web theo phong cách riêng của bạn!
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com