Build a Todo List App in HTML CSS JavaScript | EASY BEGINNER TUTORIAL

Learn how to build a todo list web app in HTML, CSS and JavaScript with the ability to display, create, edit, and delete your tasks. Task list, to-do list, shopping list.

This is the perfect project for beginner web developers who are looking to expand their knowledge of HTML CSS and JavaScript. This beginner JavaScript tutorial will teach you how to use local browser storage to create a fully functional to-do list app!

Build your next awesome project:

Source Code:

Chapters
00:00 What we are building / Finished To-Do List
01:35 Project setup
06:50 Making our HTML for the To-Do List
16:38 Styling our project with CSS
56:00 Adding JavaScript variables, arrays, and objects
01:06:24 Using the DOM (Document Object Model)
01:12:28 Initialize the To-Do JavaScript
01:21:12 addTask function
01:31:19 displayTasks function
01:50:24 toggleTask function
01:52:05 deleteAllTasks function
01:53:03 editTasks function

Hope you enjoyed this tutorial. Leave a like if you did, and feel free to subscribe for more tutorials like this in the future!

[josephryan]

I just checked the source code line by line in .html and..css and they match line by line perfect. Thanks for your work

[annamayatkinson]

Great video, thank you so much for explaining everything in such detail. Even the little mistakes you corrected in the course of the tutorial were very instructive! Thankssss

[NomanAli-zdbn]

Thanks alot thats what we want simple basics and easy to understand ❤

[alexgoldendragon]

This is so detailed, you deserve more subscribers!

[freguenshoodjean]

Thank you a lot, although the displayTask function is really challenging. .

[anjaneyulub]

I love your teaching I am excited to learn more from u Thank you : )

[tooma-g]

Thanks you have taught everything in detail, I have understood everything😄

[angiek]

Question how would u go about making categories for your list n move items between those to do categories

[Princessdiarytales]

Hey I am following every step but my output is not changing, I am typing every thing the same but my website doesn’t not even show the color or the font change. I need help please .

[hyojinkim]

HIII! thank you so much for the video. I have a quick question .. when i tried to make a Edit function, i declared "const firstText = todo[index].text;" and my console says "Cannot read properties of undefined (reading 'text') " like this. what should i do???!!! help me plzzz

[josephryan]

Hello awesome tutorials but I'm having an issue with the scrollbar and webkit stylings their not making any changes the scrollbar still is visible. Thanks

[nr]

look nice,
why you are set todoList.innerHTML = "" every operation list add and update you delete all and print agian...

[josephryan]

It's strange but the project opens better in Firefox but still no pointer cursor over input areas. Thanks

[function]

I love your teaching make video on make anything responsive, responsiveness tricks

[zinakemoum]

hello, it is interesting what you teach, i follow you very well

[raaajj_aryan]

very helpful. not like most of the others

[victoriaemeh]

How can you call this a beginner tutorial

[EliiiXD]

why do i feel like writing css is way harder than building basic backend side