Khi mới học lập trình web, nhiều người thường loay hoay không biết bắt đầu luyện tập HTML và CSS từ đâu, dẫn đến kỹ năng chậm tiến bộ. Nhưng chỉ cần thực hành đúng cách với những bài tập thực tế, bạn sẽ nhanh chóng tự tin xây dựng giao diện website chuyên nghiệp. Trong bài viết này, mình đã tổng hợp bộ bài tập HTML CSS từ cơ bản đến nâng cao, giúp bạn rèn luyện từng bước và phát triển kỹ năng lập trình web một cách hiệu quả.
Có nên học HTML CSS không?
HTML và CSS là nền tảng quan trọng nhất để bắt đầu với lập trình web. Khi nắm vững hai ngôn ngữ này, bạn sẽ:
- Hiểu rõ nguyên lý hoạt động của website và cách trình duyệt hiển thị nội dung.
- Dễ dàng tiếp cận các công nghệ nâng cao như JavaScript, React hay framework front-end hiện đại.
- Tự tin thiết kế website cá nhân, portfolio hoặc landing page chuyên nghiệp để phục vụ học tập, công việc và kinh doanh.
Bài tập HTML & CSS cho người mới
Bạn đang học lập trình web và băn khoăn không biết nên bắt đầu luyện tập như thế nào? Đừng lo, trong bài viết này mình đã tổng hợp 5 bài tập HTML CSS cơ bản kèm lời giải chi tiết. Những ví dụ này sẽ giúp bạn hiểu cú pháp, rèn kỹ năng và tự tin xây dựng giao diện web ngay từ những bước đầu tiên.
Bài tập 1: Tạo trang giới thiệu cá nhân HTML CSS
Đây là phần bài tập giúp bạn làm quen với thẻ HTML cơ bản <h1>, <p>, <img>, <a>.
Đề bài: Tạo một trang web đơn giản để giới thiệu bản thân với các nội dung: tiêu đề tên, ảnh đại diện, đoạn mô tả ngắn và liên kết đến mạng xã hội.
Ví dụ mẫu:
<h1>Nguyễn Văn A</h1>
<p>Mình là một lập trình viên web yêu thích HTML & CSS.</p>
<img src="avatar.jpg" alt="Ảnh đại diện" width="150">
<p>Kết nối với mình tại <a href="https://lanit.com.vn/username">GitHub</a></p>
Bài tập 2: Tạo danh sách công việc cần làm
Bài tập này giúp bạn nắm rõ cách dùng danh sách có thứ tự (Ordered List) và CSS cơ bản.
Đề bài: Tạo danh sách công việc trong ngày bằng thẻ danh sách và thêm CSS để đổi màu chữ.
Ví dụ mẫu:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>To-do List</title>
<style>
h2 { color: darkblue; font-family: Arial, sans-serif; }
ol { color: darkgreen; font-size: 18px; }
</style>
</head>
<body>
<h2>Công việc hôm nay</h2>
<ol>
<li>Học HTML & CSS</li>
<li>Làm bài tập thực hành</li>
<li>Đọc tài liệu JavaScript</li>
</ol>
</body>
</html>
Bài tập HTML CSS 3: Tạo bảng thời khóa biểu
Đề bài:
Xây dựng bảng thời khóa biểu gồm các ngày trong tuần, có tiêu đề và kẻ viền bằng CSS.
Ví dụ mẫu:
Lời giải
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Thời khóa biểu</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f6f9;
text-align: center;
padding: 40px;
}
h2 {
color: darkblue;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 80%;
margin: 0 auto;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #ccc;
padding: 12px;
text-align: center;
}
th {
background: #2e86de;
color: white;
}
tr:nth-child(even) {
background: #f9f9f9;
}
tr:hover {
background: #eaf2ff;
}
</style>
</head>
<body>
<h2>Thời khóa biểu tuần</h2>
<table>
<tr>
<th>Buổi</th>
<th>Thứ 2</th>
<th>Thứ 3</th>
<th>Thứ 4</th>
<th>Thứ 5</th>
<th>Thứ 6</th>
</tr>
<tr>
<td><b>Sáng</b></td>
<td>Toán</td>
<td>Ngữ Văn</td>
<td>Tiếng Anh</td>
<td>Tin học</td>
<td>Thể dục</td>
</tr>
<tr>
<td><b>Chiều</b></td>
<td>Lịch sử</td>
<td>Địa lý</td>
<td>Hóa học</td>
<td>Sinh học</td>
<td>Âm nhạc</td>
</tr>
</table>
</body>
</html>Bài tập 4: Tạo form đăng ký tài khoản
Đề bài:
Tạo form đăng ký gồm: Họ tên, Email, Mật khẩu và nút Đăng ký. Form có border-radius và hiệu ứng hover cho nút.
Ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Form Đăng ký</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
width: 300px;
text-align: center;
}
.form-container h2 {
margin-bottom: 20px;
color: #333;
}
.form-container input {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
.form-container button {
background-color: #007bff;
color: white;
padding: 10px;
border: none;
border-radius: 6px;
cursor: pointer;
width: 100%;
font-size: 16px;
transition: background-color 0.3s ease;
}
.form-container button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Đăng ký</h2>
<form>
<input type="text" placeholder="Họ tên" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Mật khẩu" required>
<button type="submit">Đăng ký</button>
</form>
</div>
</body>
</html>Bài tập HTML CSS: Tạo Landing Page mini
Đề bài:
Tạo một landing page đơn giản gồm Header, Banner giới thiệu, Section dịch vụ và Footer. Sử dụng Flexbox để chia layout.
Ví dụ minh hoạ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page Mini</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background: #007bff;
color: white;
padding: 15px 20px;
text-align: center;
}
.banner {
background: url('https://via.placeholder.com/1200x300') no-repeat center/cover;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
font-weight: bold;
}
.services {
display: flex;
justify-content: space-around;
padding: 40px 20px;
background: #f9f9f9;
}
.service {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
width: 30%;
text-align: center;
}
.service h3 {
color: #007bff;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Trang Landing Page Mini</h1>
</header>
<section class="banner">
<p>Chào mừng bạn đến với Landing Page!</p>
</section>
<section class="services">
<div class="service">
<h3>Dịch vụ 1</h3>
<p>Mô tả ngắn gọn dịch vụ đầu tiên.</p>
</div>
<div class="service">
<h3>Dịch vụ 2</h3>
<p>Mô tả ngắn gọn dịch vụ thứ hai.</p>
</div>
<div class="service">
<h3>Dịch vụ 3</h3>
<p>Mô tả ngắn gọn dịch vụ thứ ba.</p>
</div>
</section>
<footer>
<p>© 2025 Landing Page Mini. All rights reserved.</p>
</footer>
</body>
</html>
Bài tập HTML và CSS nâng cao
Sau khi đã nắm vững các kiến thức cơ bản, việc luyện tập với những bài tập HTML và CSS nâng cao sẽ giúp bạn rèn luyện khả năng tư duy bố cục, xử lý giao diện chuyên nghiệp và tối ưu trải nghiệm người dùng. Đây là bước quan trọng để chuyển từ mức độ “làm quen” sang “ứng dụng thực tế”, đồng thời là nền tảng để bạn xây dựng các dự án web hoàn chỉnh.
Tạo website biểu mẫu khảo sát
Biểu mẫu (Form) trong HTML là một khu vực trên trang web cho phép người dùng nhập và gửi dữ liệu đến máy chủ. Nó thường được sử dụng để thu thập thông tin như: họ tên, email, mật khẩu, ý kiến khảo sát, đăng ký dịch vụ, đặt hàng online,…
Đề bài: Thực hành tạo một website với form khảo sát về LANIT theo mẫu sau:
Lời giải:
Để tạo một form khảo sát trên website, bạn cần nắm:
- Cấu trúc trang HTML cơ bản.
- Thẻ <form> và các thành phần nhập liệu.
- Cách dùng CSS để định dạng và bố cục form.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biểu mẫu khảo sát LANIT</title>
<style>
body {
background-color: #0254e3;
font-family: Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
form {
background-color: #fff;
max-width: 600px;
margin: 50px auto;
padding: 30px 20px;
border-radius: 8px;
box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.3);
text-align: left;
}
h1 {
text-align: center;
color: #0254e3;
}
h2 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
color: #333;
}
.form-control {
margin-bottom: 20px;
}
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 4px;
font-family: inherit;
padding: 10px;
width: 95%;
display: block;
}
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
margin-right: 8px;
}
button {
background-color: #0254e3;
color: #fff;
border: none;
border-radius: 4px;
font-family: inherit;
font-size: 18px;
font-weight: bold;
display: block;
width: 100%;
padding: 12px;
margin-top: 30px;
cursor: pointer;
}
button:hover {
background-color: #003da5;
}
</style>
</head>
<body>
<form>
<h1>Biểu mẫu khảo sát LANIT</h1>
<!-- Họ tên, email, tuổi -->
<div class="form-control">
<h2>Họ và tên</h2>
<input type="text" name="hoten" placeholder="Nhập họ và tên">
</div>
<div class="form-control">
<h2>Email</h2>
<input type="email" name="email" placeholder="Nhập email">
</div>
<div class="form-control">
<h2>Tuổi</h2>
<input type="number" name="tuoi" placeholder="Nhập tuổi">
</div>
<!-- Nghề nghiệp -->
<div class="form-control">
<h2>Hiện bạn đang là?</h2>
<input type="radio" name="nghenghiep" value="sinhvien"> Sinh viên <br>
<input type="radio" name="nghenghiep" value="it"> IT <br>
<input type="radio" name="nghenghiep" value="vanphong"> Nhân viên văn phòng <br>
<input type="radio" name="nghenghiep" value="khac"> Khác
</div>
<!-- Giới thiệu LANIT -->
<div class="form-control">
<h2>Bạn sẽ giới thiệu LANIT với bạn bè chứ?</h2>
<input type="radio" name="gioithieu" value="co"> Có <br>
<input type="radio" name="gioithieu" value="cothe"> Có thể <br>
<input type="radio" name="gioithieu" value="khong"> Không
</div>
<!-- Ngôn ngữ lập trình -->
<div class="form-control">
<h2>Ngôn ngữ lập trình và framework bạn đã biết?</h2>
<input type="checkbox" name="ngonngu" value="c"> C <br>
<input type="checkbox" name="ngonngu" value="c++"> C++ <br>
<input type="checkbox" name="ngonngu" value="c#"> C# <br>
<input type="checkbox" name="ngonngu" value="python"> Python <br>
<input type="checkbox" name="ngonngu" value="javascript"> JavaScript
</div>
<!-- Nút submit -->
<button type="submit">Gửi khảo sát</button>
</form>
</body>
</html>Xây dựng trang Portfolio
Bạn hoàn toàn có thể xây dựng một trang web portfolio bằng HTML và CSS để giới thiệu bản thân một cách chuyên nghiệp. Ở phần tiêu đề (header), hãy thiết kế các mục quan trọng như Giới thiệu, Dịch vụ, và Liên hệ để điều hướng người xem. Phần nội dung chính (body) là nơi bạn trình bày các dự án đã thực hiện, kỹ năng nổi bật cùng những thành tựu đạt được. Cuối cùng, đừng quên thêm thông tin liên hệ ở chân trang (footer) để giúp khách hàng hoặc nhà tuyển dụng dễ dàng kết nối với bạn
Đề bài: Yêu cầu: Thực hiện một trang web portfolio trình bày các sản phẩm/bài viết của bản thân.
Gợi ý cấu trúc trang web
Trang web nên có bố cục như sau:
- Header (tiêu đề chính):
- Họ tên, nghề nghiệp/ngành học
- Menu điều hướng (Giới thiệu – Bài viết – Liên hệ)
- Giới thiệu ngắn gọn (About):
- Đoạn mô tả ngắn về bản thân
- Danh mục sản phẩm/bài viết (Portfolio/Articles):
- Hiển thị các bài viết (mỗi bài có: ảnh minh họa, tiêu đề, mô tả ngắn, link xem chi tiết).
- Liên hệ (Contact):
- Email, số điện thoại, mạng xã hội
- Footer (chân trang):
- Copyright, lời cảm ơn hoặc slogan cá nhân
Lời giải tham khảo:
<!DOCTYPE html>
<html>
<head>
<title> Create a Portfolio Gallery using HTML and CSS </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* wildcard styling */
* {
box-sizing: border-box;
}
/* padding cho toàn bộ body */
body {
padding: 15px;
}
/* tạo kiểu cho body */
.container {
max-width: 1200px;
margin: auto;
}
h1 {
color: #0254e3;
}
/* trang trí anchor tag */
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
/* trang trí paragraph tag */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* trang trí hàng và cột */
.row {
margin: 0px -18px;
padding: 8px;
}
.row>.column {
padding: 6px;
}
.column {
float: left;
width: 25%;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* trang trí nội dung */
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
/* set window size chiều ngang 850 */
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
/* set window size chiều ngang 400 */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>LANIT BLOG</h1>
<h3>Hướng dẫn sử dụng dịch vụ LANIT</h3>
<hr>
<h2>Portfolio</h2>
<div class="row">
<div class="column">
<div class="content">
<img src=
"https://lanit.com.vn/wp-content/uploads/2025/08/huong-dan-dang-nhap-mail-server-bang-dien-thoai.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Hướng dẫn đăng nhập Mail Server bằng điện thoại</a>
</h3>
<p>Bạn muốn quản lý email công việc nhanh chóng ngay trên smartphone? Bài viết này sẽ hướng dẫn chi tiết cách đăng nhập
Mail Server.</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://lanit.com.vn/wp-content/uploads/2025/05/huong-dan-su-dung-tinh-nang-global-email-filters-tren-mail-hosting-cpanel.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Hướng dẫn sử dụng tính năng Global Email Filters trên mail hosting cPanel</a>
</h3>
<p>Loại bỏ thư rác, quảng cáo với 5 bước đơn giản khi cài đặt Global Email Filters trên mail hosting cPanel. Đọc ngay bài
viết để biết thêm thông tin! </p>
</div>
</div>
<div class="column">
<div class="content">
<img src="https://lanit.com.vn/wp-content/uploads/2024/05/huong-dan-vps.jpg" alt="" style="width:100%">
<h3>
<a href="#">Hướng Dẫn Sử Dụng VPS Trên Điện Thoại & Máy Tính</a>
</h3>
<p>LANIT gửi tới bạn cách dùng VPS trên cả 2 thiết bị điện thoại, máy tính. Để sử dụng VPS cần công cụ hỗ trợ “Remote
Desktop” điều khiển VPS. Theo dõi ngay bài viết dưới đây nhé!</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://lanit.com.vn/wp-content/uploads/2024/03/dung-thu-vps-theo-gio.jpg"
alt="" style="width:100%">
<h3>
<a href="#">Hướng Dẫn Đăng Ký Thuê VPS theo Giờ tại LANIT</a>
</h3>
<p>Bài viết này, LANIT sẽ hướng dẫn bạn cách đăng ký thuê VPS theo giờ nhanh chóng và dễ dàng. Mời anh chị theo dõi!</p>
</div>
</div>
</div>
</div>Qua các bài tập HTML và CSS, chúng ta không chỉ rèn luyện kỹ năng viết mã mà còn làm quen với cách tổ chức bố cục, phối hợp màu sắc và thiết kế giao diện trực quan cho website. Đây là bước khởi đầu quan trọng để nắm vững nền tảng xây dựng trang web, trước khi tiến xa hơn với JavaScript hay các framework hiện đại. Khi thực hành thường xuyên, bạn sẽ có khả năng tự thiết kế những website hoàn chỉnh, từ đơn giản đến chuyên nghiệp, phục vụ học tập, công việc hoặc phát triển dự án cá nhân.
