Web development is an exciting field that enables you to create interactive, visually appealing applications. This article will guide you through building your very first web application: a To-Do List App. This project is an excellent introduction to HTML, CSS, and JavaScript, giving you a hands-on approach to frontend development.

New to Frontend Development?
If you're new to frontend development, check out our previous guide: Frontend Development for Beginners: Your Essential Starting Point to learn the basics of HTML, CSS, and JavaScript!

1. What is a Web Application?
A web application is a software program that runs in a web browser. Unlike static websites, web applications are interactive, allowing users to perform tasks like adding tasks to a to-do list, completing them, and deleting them. You’ve probably used countless web applications, from social media platforms to online shopping websites.

2. Setting Up Your Development Environment
Before you start coding, make sure your environment is ready:

• Code Editor: Use a code editor like VS Code, Sublime Text, or Atom.
• Browser: Any modern browser will work. Google Chrome or Firefox are popular choices.
• Basic Setup: Create a project folder where you’ll save your HTML, CSS, and JavaScript files.

3. Core Frontend Technologies

• HTML (HyperText Markup Language): This is the foundation of your web app. It defines the structure and layout of the application.
• CSS (Cascading Style Sheets): CSS styles your HTML content, making it visually appealing.
• JavaScript: JavaScript adds interactivity to your web app, allowing users to perform actions like adding or deleting tasks.

4. Building the To-Do List App
Let’s dive into building your To-Do List Application. We’ll start by writing the HTML, then style it with CSS, and finally, add functionality with JavaScript.

Let’s set up a simple project structure:

1. Create a new folder for your project.
2. Inside it, create:

• index.html: The main HTML file.
• style.css: For styling the app.
• script.js: Your JavaScript code.

You can now link the CSS and JavaScript files to your HTML using simple and

a) Structuring the HTML
Start with the basic layout of your web application. For example, if you're building a To-Do List, your HTML might look like this:

   
    
To-Do App

      
      

        
        Add New Task
        
        

      
      

        
Incomplete Tasks
        
        

            Here Task Name
          
          

            Here Task Name
          
          

            Here Task Name
          
        
      

      
      

        
Completed Tasks
        
        

            Here Task Name 
            
            Delete
          
        
      
    

This sets up a simple interface where users can input tasks and see them listed.

b) Styling with CSS
Now, let’s style the app to make it visually appealing. Here’s a basic example:

* {
  box-sizing: border-box; /* Ensure consistent element sizing */
}

.container {
  background: #add4f6; /* Light blue background for the container */
  padding: 25px;
  max-width: 760px; /* Maximum width of the container */
  margin: 25px auto; /* Center the container */
  overflow: hidden;
  border-radius: 10px; /* Rounded corners */
  border: 4px solid #7fa2de; /* Border color */
  font-family: sans-serif; /* Font for the entire app */
}

h1,
h2 {
  margin: 0;
  text-align: center;
  text-transform: uppercase; /* Capitalized headings */
}

h2 {
  font-size: 20px;
  border-bottom: 1px solid #7fa2de; /* Divider below the title */
  padding-bottom: 10px;
  color: #575cab; /* Heading color */
}

.new-task-container {
  text-align: center; /* Center alignment for new task input */
}

.box {
  padding: 10px 15px;
  border: 2px solid #7fa2de;
  border-radius: 5px; /* Slightly rounded task boxes */
  background: #fff; /* White background for task lists */
  margin: 15px 0;
}

.todo-list {
  float: left;
  width: 46%; /* Incomplete tasks take up 46% width */
}

.complete-list {
  float: right;
  width: 46%; /* Completed tasks take up 46% width */
}

ul {
  list-style: none; /* Remove default list styling */
  padding: 0;
  margin: 0;
}

li {
  padding: 10px;
  border-bottom: 1px dotted #ccc; /* Dashed separator between tasks */
}

.update {
  float: right;
  background-color: blue;
  color: white;
  border: 0;
  padding: 3px 5px; /* Styling for the update button */
}

.delete {
  float: right;
  background-color: red;
  color: white;
  border: 0;
  padding: 3px 5px; /* Styling for the delete button */
}

This makes your app look clean and structured. You can customize the colors and layout as you like! ?

c) Adding Functionality with JavaScript
Now comes the fun part – adding JavaScript to make the app interactive! For a To-Do List, you want users to be able to add tasks and mark them as completed.

// Select DOM elements and assign them to variables
let newTask = document.querySelector('#new-task');
let form = document.querySelector('form');
let todoUl = document.querySelector('#items');
let completeUl = document.querySelector('.complete-list ul');

// Create a new task item with a checkbox and label
let createTask = function(task) {
    let listItem = document.createElement('li');
    let checkBox = document.createElement('input');
    let label = document.createElement('label');

    label.innerText = task;
    checkBox.type = 'checkbox';

    listItem.appendChild(checkBox);
    listItem.appendChild(label);

    return listItem;
}

// Add a new task
let addTask = function(event) {
    event.preventDefault();
    let listItem = createTask(newTask.value);
    todoUl.appendChild(listItem);
    newTask.value = ""; // Clear input field after adding

    // Bind new task to complete task function
    bindInCompleteItems(listItem, completeTask);
}

// Move task to completed list
let completeTask = function() {
    let listItem = this.parentNode;
    let deleteBtn = document.createElement('button');
    deleteBtn.innerText = 'Delete';
    deleteBtn.className = 'delete';
    listItem.appendChild(deleteBtn);

    // Remove checkbox and move task to completed list
    let checkBox = listItem.querySelector('input[type="checkbox"]');
    checkBox.remove();

    completeUl.appendChild(listItem);

    // Bind delete button to delete function
    bindCompleteItems(listItem, deleteTask);
}

// Delete task from completed list
let deleteTask = function() {
    let listItem = this.parentNode;
    let ul = listItem.parentNode;
    ul.removeChild(listItem);
}

// Bind incomplete tasks to complete task function
let bindInCompleteItems = function(taskItem, checkboxClick) {
    let checkBox = taskItem.querySelector('input[type="checkbox"]');
    checkBox.onchange = checkboxClick;
}

// Bind completed tasks to delete function
let bindCompleteItems = function(taskItem, deleteButtonClick) {
    let deleteButton = taskItem.querySelector('.delete');
    deleteButton.onclick = deleteButtonClick;
}

// Loop through incomplete tasks to bind complete task function
for(let i = 0; i 



5. Expanding the To-Do App: Features and Design

At this stage, you’ve created a fully functional To-Do List App that allows users to add, complete, and delete tasks. However, there are several ways you can expand and enhance the app both in terms of functionality and design:

a) Add Task Editing: You could allow users to edit a task after it’s been added. This would involve adding an "Edit" button next to each task, enabling users to modify the task name before saving it again.

b) Improve the Design: You can enhance the design by using CSS frameworks like Tailwind CSS or Bootstrap to make the app look more modern and responsive on different screen sizes. Experiment with animations for smoother transitions when tasks are added or removed.

6. Conclusion

? Congratulations! You’ve successfully built your first web application, a To-Do List App, using HTML, CSS, and JavaScript. ? Along the way, you learned how to structure your application using HTML, style it with CSS, and bring it to life with JavaScript. ✨ This project introduced you to the core aspects of frontend development, and you’re now equipped with the basic skills to build more complex applications. ?