Chào mừng bạn đến với mini project đầu tiên!
Sau 6 bài học lý thuyết và thực hành cơ bản, đây chính là lúc để bạn tổng hợp tất cả kỹ năng đã học và xây dựng một sản phẩm thật sự – đó là một trang giới thiệu cá nhân nho nhỏ, nhưng đầy đủ “mùi vị của web”.
Bây giờ bạn đã có:
- HTML: để tạo ra khung sườn
- CSS: để thiết kế cho giao diện đẹp lung linh
- JavaScript: để tạo ra sự tương tác sinh động
Trong bài này, chúng ta sẽ kết hợp mọi thứ để làm một trang giới thiệu cá nhân như một chiếc CV online đơn giản – nơi bạn có thể:
- Tự giới thiệu bản thân
- Nêu kỹ năng, sở thích
- Gắn ảnh đại diện
- Có hiệu ứng đổi theme hoặc lời chào
- Giao diện đẹp, dễ nhìn, hiển thị tốt cả trên máy tính và điện thoại
Mục tiêu project
- Ứng dụng toàn bộ kiến thức đã học về HTML, CSS, JavaScript
- Làm ra một giao diện gọn gàng, có bố cục rõ ràng
- Thêm một số tương tác JS (ví dụ: đổi màu nền, hiện lời chào)
- Hiểu được cách tổ chức file HTML – CSS – JS riêng biệt
Gợi ý cấu trúc giao diện
----------------------------
| Ảnh đại diện |
| Tên đầy đủ |
| Mô tả ngắn gọn |
----------------------------
| Giới thiệu | Kỹ năng | Liên hệ |
----------------------------
| [Nút đổi màu] [Hiện lời chào] |
----------------------------
1. Tạo cấu trúc HTML (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>Trang cá nhân của Tôi</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<img src="avatar.jpg" alt="Ảnh đại diện" class="avatar" />
<h1 id="ten">Nguyễn Văn A</h1>
<p class="mota">Một người yêu lập trình, thích học hỏi và ăn cơm gà.</p>
<div class="section">
<h2>Giới thiệu</h2>
<p>Sinh năm 2000, tốt nghiệp CNTT, hiện đang học lập trình web.</p>
</div>
<div class="section">
<h2>Kỹ năng</h2>
<ul>
<li>HTML, CSS</li>
<li>JavaScript</li>
<li>Làm mì tôm siêu ngon</li>
</ul>
</div>
<div class="section">
<h2>Liên hệ</h2>
<p>Email: nguyenvana@example.com</p>
</div>
<div class="action">
<button id="doi-mau">Đổi màu nền</button>
<button id="chao">Hiện lời chào</button>
</div>
<p id="loi-chao" class="highlight"></p>
</div>
<script src="script.js"></script>
</body>
</html>
2. Viết CSS cho giao diện (file style.css)
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
transition: background-color 0.3s;
}
.container {
max-width: 600px;
margin: auto;
text-align: center;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
.section {
margin-top: 20px;
text-align: left;
}
.section h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
ul {
padding-left: 20px;
}
button {
margin: 10px 5px;
padding: 10px 15px;
border: none;
background-color: #3498db;
color: white;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #2980b9;
}
.highlight {
font-weight: bold;
color: #27ae60;
margin-top: 15px;
font-size: 18px;
}
3. Thêm JavaScript (file script.js)
const nutDoiMau = document.getElementById("doi-mau");
const nutChao = document.getElementById("chao");
const loiChao = document.getElementById("loi-chao");
const ten = document.getElementById("ten");
function randomColor() {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
nutDoiMau.addEventListener("click", function () {
document.body.style.backgroundColor = randomColor();
});
nutChao.addEventListener("click", function () {
loiChao.innerText = "Xin chào, " + ten.innerText + " 👋";
});
4. Bài tập nâng cao (tuỳ chọn)
- Thêm form liên hệ có ô input và nút “Gửi”
- Khi rê chuột vào avatar → ảnh phóng to nhẹ (dùng
transform: scale) - Làm phiên bản responsive: khi xem trên điện thoại, layout hiển thị tốt
5. Kiểm tra checklist
- Tạo HTML có ảnh đại diện, tên, mô tả, kỹ năng
- Dùng CSS tạo bố cục đẹp mắt
- Dùng JavaScript để xử lý sự kiện click
- Có nút đổi màu nền, nút hiện lời chào
- Có cảm giác “đây là website thật”
Kết bài – Dự án đầu tiên đã hoàn thành!
Xin chúc mừng bạn, bạn vừa hoàn thành mini project đầu tiên của mình!
Nó không chỉ giúp bạn ôn tập HTML – CSS – JavaScript, mà còn giúp bạn có sản phẩm đầu tay để lưu trữ, chia sẻ với bạn bè hoặc làm nền tảng cho CV sau này.
Thảo luận