在前端开发中，掌握基础的 HTML、CSS 和 JavaScript 是非常重要的。为此，我们准备了一系列练手项目，帮助大家巩固基础，提高编程技能。以下是 50 个可以帮助你提升前端技术的练手项目，并提供了一些代码示例供参考。
1. 个人简历页面
创建一个简单的个人简历页面，利用 HTML 和 CSS 布局自己的基本信息、教育背景和技能。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>张三</h1>
<p>前端开发工程师</p>
</header>
<section>
<h2>教育背景</h2>
<ul>
<li>本科：计算机科学与技术 - XX大学</li>
<li>研究生：软件工程 - YY大学</li>
</ul>
</section>
<section>
<h2>技能</h2>
<p>HTML, CSS, JavaScript, React, Vue</p>
</section>
</body>
</html>
2. 图片画廊
利用 CSS Grid 布局创建一个图片画廊。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片画廊</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="img1.jpg" alt="图片1">
<img src="img2.jpg" alt="图片2">
<img src="img3.jpg" alt="图片3">
<img src="img4.jpg" alt="图片4">
</div>
</body>
</html>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
3. 计数器
实现一个简单的计数器，使用 JavaScript 增加和减少数字。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
<style>
.counter {
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="counter">
<h1 id="count">0</h1>
<button onclick="decrement()">-</button>
<button onclick="increment()">+</button>
</div>
<script>
let count = 0;
function increment() {
count++;
document.getElementById('count').innerText = count;
}
function decrement() {
count--;
document.getElementById('count').innerText = count;
}
</script>
</body>
</html>
4. 待办事项列表
创建一个简单的待办事项应用，允许用户添加和删除任务。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<style>
ul { list-style-type: none; }
</style>
</head>
<body>
<h1>待办事项</h1>
<input type="text" id="taskInput" placeholder="添加新任务">
<button onclick="addTask()">添加</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const input = document.getElementById('taskInput');
const taskText = input.value;
if (taskText) {
const li = document.createElement('li');
li.innerText = taskText;
li.onclick = function() {
this.remove();
};
document.getElementById('taskList').appendChild(li);
input.value = '';
}
}
</script>
</body>
</html>
5. 响应式导航栏
使用 CSS 和 JavaScript 创建一个响应式导航栏，使其在小屏幕上变为可折叠的样式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式导航栏</title>
<style>
.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
padding: 1em;
}
.navbar a { color: white; text-decoration: none; }
.menu { display: none; }
@media (max-width: 600px) {
.menu { display: block; }
.navbar a { display: none; }
.navbar.active .menu { display: none; }
.navbar.active a { display: block; }
}
</style>
</head>
<body>
<div class="navbar" id="navbar">
<div class="menu" onclick="toggleMenu()">☰</div>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</div>
<script>
function toggleMenu() {
const navbar = document.getElementById('navbar');
navbar.classList.toggle('active');
}
</script>
</body>
</html>
以上是前端开发基础的 5 个练手项目，涵盖了 HTML、CSS 和 JavaScript 的基本用法。这些项目可以帮助你循序渐进地掌握前端知识，逐步提升自己的技能。在接下来的内容中，我们还会继续分享更多的练手项目，鼓励大家保持学习和实践的热情。希望大家在项目中不断挑战自己，收获成长！
