reply View all Tutorials & Projects

Build a To-Do List with ONLY HTML & CSS (No JavaScript Needed!)

You might be asking - how is it possible to build a to-do list using only HTML and CSS? Well, CSS has come a long way 🙂

Video Tutorial

Source Code

You can find the source code for this video below.

index.html
<!DOCTYPE html>
<html lang="en">
<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>To-Do List Without JavaScript</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="container">
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
		<div class="todo">
			<input class="todo__value" type="text" placeholder="(empty)">
			<input class="todo__checkbox" type="checkbox">
		</div>
	</div>
</body>
</html>
main.css
.container {
	display: flex;
	flex-direction: column;
	width: 300px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
	border-top: 5px solid #009578;
	border-bottom: 5px solid #009578;
}

.todo {
	display: flex;
	justify-content: space-between;
	padding: 1em;
}

.todo__value {
	background: transparent;
	border: none;
	outline: none;
	font-family: 'Quicksand', sans-serif;
	font-size: 1em;
	font-weight: bold;
	flex-grow: 1;
}

.todo:has(.todo__checkbox:checked) {
	color: #555555;
	background: #eeeeee;
	text-decoration: line-through;
	order: 1;
}

If you have any questions about this code, please leave a comment on the video.