A daily habit tracker is a simple project for practising front-end development. It can also teach important lessons about accessibility, semantic HTML and clear user feedback.

In this tutorial, we'll build a checklist that tracks completion of a few daily habits. The example uses generic habits and can be adapted for personal routines, study goals or reminders.

Step 1: Create the HTML

Save the following as index.html :

<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title> Daily Habit Tracker </title> <link rel= "stylesheet" href= "style.css" > </head> <body> <main class= "container" > <h1> Daily Habit Tracker </h1> <p> Mark each habit when you complete it.…