How to create a simple to-do list with HTML, CSS, and JS

A to-do list is a simple yet effective tool for productivity. In this article, we will build a to-do list using HTML5, CSS, and JavaScript, focusing on using HTML5 semantic elements for better structure, JavaScript for dynamic interactions, and CSS for styling. This approach ensures a clean, accessible, and SEO-friendly web application.

To create a simple to-do list, we will follow the following steps:

Step 1: Add the HTML structure

HTML forms the backbone of your to-do list. It defines the container for tasks and buttons to add or delete them. We will be using HTML5 semantic tags and provide meaningful context to the content they wrap. They describe the purpose of the content to both developers and browsers. Using semantic tags improves accessibility for users with assistive technologies and boosts SEO by helping search engines better understand the structure of your web page:

Code explanation

• Line 1: We wrap the main content of the page using the <main> tag, which acts as a container for our to-do list.

• Lines 2–5: The <section> tag (with id="newtask") defines the task input section.

  • Lines 3–4: We use the <input> and <button> tags to provide a text field for task entry and a button to add tasks.

• Line 7: The <section> tag (with id="tasks") serves as the container where the added tasks will be displayed dynamically.

Want to build a SEO friendly real-world application with HTML? Try the project Build a Microblogging App Using PHP, HTML, JavaScript, and CSS.

Step 2: Add CSS for styling

Next, we use CSS to design a simple, clean, and responsive to-do list layout. Styling ensures your to-do list looks visually pleasing on all screen sizes.

Code explanation

• Lines 7–18: We center the content on the screen and ensure it is responsive.

• Lines 20–33: We style the input field and button to match the design theme.

• Lines 35–42: We style each task block with a background color, padding, and spacing to enhance readability.

Step 3: Add JavaScript for dynamic functionality

JavaScript adds interactivity by allowing users to add, display, and delete tasks dynamically.

Code explanation

• Line 1: We attach an onclick event to the “Add” button.

• Lines 4–6: We check if the input field is empty. If so, an alert prompts the user to enter a task.

• Lines 7–12: If a task is entered, it is added as an <article> within the #tasks section using template literals.

• Line 14: We clear the input field after adding a task.

• Lines 16–21: We add event listeners to all "Delete" buttons, which can be found after every task, to remove tasks upon clicking.

Enhance you understanding of HTML and CSS with the help of this project, Creating an Online CV with HTML and CSS.

To-do list in action

Let's now look at the complete code with HTML5, CSS, and JavaScript combined for a fully functional to-do list.

To gain a deeper understanding of web development and enhance your skills, check out this comprehensive course: Learn HTML, CSS, and JavaScript from Scratch. This course provides step-by-step guidance to learn these technologies and build functional, responsive web applications.