Understand the Project Files

Before adding functionality, take a quick look at where the application’s code will live.

index.html

Open index.html.

This file contains the application’s page structure, including the header, progress area, task controls, task list, buttons, and modal markup used by the prepared interface.

You do not need to rebuild this structure from scratch. We are starting with the prepared UI so the course can focus on making the application work.

css/style.css

Open css/style.css.

This is the prepared visual design for the application. It controls the layout, spacing, colors, buttons, task rows, responsive behavior, dark mode styles, and modal appearance.

For this course, leave the styling in place unless a lesson specifically asks you to change it.

js/script.js

Open js/script.js.

This is where we will build the application’s behavior.

As the course progresses, this file will handle tasks, rendering, events, filtering, searching, sorting, storage, modals, drag and drop, import/export, and the remaining application features.

Checkpoint

You should now know which file to open when a lesson tells you to change the page structure, styling, or application behavior.