Learn how to create a to do list(ToDo List) using HTML and CSS without JavaScript. This step-by-step guide will show you how to make a pure CSS to do list.
Table of Contents
A to-do list is a simple web page element that allows users to input and manage a list of tasks or items. It is a practical and straightforward way to organize tasks, as well as a good exercise for practicing HTML and CSS skills. A to-do list created using only HTML and CSS, without the use of JavaScript or other programming languages, is often referred to as a "pure CSS to-do list." This approach results in a lightweight and fast-loading web page element that can be easily styled to match any website or application design.
With the help of To Do list, we can add a list of tasks that we need to get done in the future. Traditionally, they were written on paper or slag. Today, however, people are using technology to quickly note down their important tasks to set reminders for the upcoming time.
Let's start making an amazing To Do list /ToDo List using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our To-Do list.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our To-Do list using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the To-Do list is in place, the next step is to add styling to the list using CSS. CSS allows us to control the visual appearance of the To-Do list, including things like layout, color, and typography.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our to-do list. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our to-do list an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #9e96df;
}
.todo-list {
display: flex;
flex-direction: column;
padding: 0 75px 10px 30px;
background: #162740;
border: transparent;
}
.todo-list .todo-list__title {
padding: 3px 6px;
color: #f1faee;
background-color: #264456;
}
.todo-list .todo-list__label {
display: flex;
align-items: center;
margin: 40px 0;
font-size: 24px;
font-family: Lato, sans-serif;
color: #f1faee;
cursor: pointer;
}
.todo-list .todo-list__label input[type=checkbox] {
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.todo-list .todo-list__label input[type=checkbox] + .check {
position: absolute;
width: 25px;
height: 25px;
border: 2px solid #f1faee;
transition: 0.2s;
}
.todo-list .todo-list__label input[type=checkbox]:checked + .check {
width: 25px;
height: 15px;
border-top: transparent;
border-right: transparent;
transform: rotate(-45deg);
}
.todo-list .todo-list__label input[type=checkbox] ~ span {
position: relative;
left: 40px;
white-space: nowrap;
transition: 0.5s;
}
.todo-list .todo-list__label input[type=checkbox] ~ span::before {
position: absolute;
content: "";
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f1faee;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span {
color: #585b57;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span::before {
transform: scaleX(1);
transform-origin: left;
} Final Output:
Conclusion:
In this post, we learned how to create a pure CSS to-do list using HTML and CSS. We started by setting up the HTML structure of the to-do list, then added CSS styles to customize the design of the list. We also added interactivity to the list using CSS hover effects and transitions.
By following this step-by-step tutorial, you can create your own custom to-do list with ease. This is a great project for beginners in web development who want to practice their HTML and CSS skills.
If you want to learn more about HTML and CSS, there are many online resources available to help you improve your skills. You can also practice building different types of projects, such as a blog or a portfolio website, to further develop your skills.
We hope you found this tutorial helpful and informative. If you have any questions or feedback, please feel free to leave a comment below.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
