Build a Todo list app in HTML, CSS & JavaScript in 2024 | JavaScript for Beginners 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.
UPDATED VERSION (With Local Storage): • Build a Todo List App ...
Source code: github.com/TylerPottsDev/yt-j...
// JOIN THE NEW DISCORD SERVER!
/ discord
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@soumelee5661]

2:38 html file 7:51 css file 21:26 js file

[@yassminh]

I've been learning JS for 3 months now and stuck on how to take what I've been learning and create stuff with it. This has been a great intro into it's possibilities. Fun tutorial! Thank you :)

[@TylerPotts]

Great to hear!

[@alexandrabalanescu8340]

Same here 😩 how are you doing now though?

[@kritisrivastava6451]

Same!

[@jasonlago5129]

Im glad im not the only one. I feel like im stuck in "basics Hell" and just need that final push

[@PeteGoode]

try this: find a record keeping problem in your home to solve Example: A digital book catalog create a book catalog where you can check books in / out tasks: 1. create a new record (book title, author, etc) 2. generate a list showing books in various ways - alphabetically by title - alphabetically by author - alphabetically by subj - alphabetically by genre 3. create check in / out functions - record date & time - record to whom level it up later by scanning the UPC or entering the ISBN to auto populate the book details.

[@mr6462]

Thanks for the little pieces here and there that really gave me hopes of making progress!

[@Gugapoeta]

omg.. spent the last six hours trying to understand a tutorial on how to make a todo list with JS and couldn't figure out lots of stuff. Came here and thats it, half an hour passed and I got it all! 🤣 huge thanks to you Tyler!!!

[@babylee3975]

As a new developer i must say that you did a good job in breaking down the explanations properly and this video really helped. Good job👍🏾

[@TylerPotts]

Glad it helped!

[@ondrejmuzik8345]

great video, i love tutorials where i dont just copy but i learn along with it

[@MartinExequielFuraca]

I was trying to practice with several projects, but i was really bored. This was absolutely helpfull and fun, thank you SO MUCH!

[@TylerPotts]

Ayy awesome! We all love a fun project! :D

[@Woeden]

Man i love the way you code, learned a lot of vscode shortcuts along with JS. Great tutorial.

[@TylerPotts]

Woo happy I could help!

[@SameerSinghGarden]

Thankyou so much for the tutorial, learnt many new things !

[@mrtech7940]

it took me more 3 hours to complete the project ,yet i ve learned lots of things .Thanks budddy so much

[@TylerPotts]

Happy to help!

[@devsharma181]

Thanks for such a great tutorial! Will expand this project

[@nanakwamedickson4296]

This was absolutely helpful. Straight to the point.

[@TylerPotts]

Happy to hear that! :D

[@Blentux]

Very well structured tutorial. Thought I could already do it myself with my basic JavaScript skills. Had no actual problems until I came to the part with deleting posts (I didn't even had an edit function built in.) But this taught me a lot, thanks for that :)

[@TylerPotts]

Woo! Happy I could help!

[@ZimTech97]

Great Video!! Helped me understand JS better than i did before

[@lucasAlmeida-ue7iw]

Tyler you are incredible. That was insane buddy!

[@TylerPotts]

Thanks, Lucas!

[@yungshabba5119]

Best tutorial i've done so far. Thanks Tyler !

[@TylerPotts]

Glad it helped!

[@wii3willRule]

Thank you for the tutorial! This was my first js development experience-- I hope to expand on this project!

[@TylerPotts]

Woo! JavaScript is cool! 😎

[@nsikakakpan6638]

Thanks, TYLER POTTS, I fully understood this video, and it really helped me a lot to improve my Javascript Skills.

[@waqaspathan3337]

for people saying he went too fast: This is supposed to be a very brief tutorial, if you want more details and deeper understanding, don't click on a short video. Thank you Tyler for this! I have a lot of experience with python but I wanted to begin learning javascript so this was an excellent tutorial, please continue!

[@TylerPotts]

Thank you, Waqas. I'm happy you enjoyed it! :D

[@TomasMisura]

thanks a lot for this video. I have been programing quite long time but still could learn couple of programming techniques that helps me a lot!

[@MehmedAk]

Thank you for the video, definitely helped jump start things at the JS side.

[@TylerPotts]

Glad it helped!

[@ace_ctrl]

gonna use this video to create my first project, thanks so much!!

[@CodeEnthusiast78912]

thank you i learned so much even though you didn't explain much, i searched the terms i didn't know

[@ameerspace]

Hey, Thanks for sharing. I really like the way you have explained to create a todo list. Really appreciate your efforts.

[@ItzShrav]

thanks man, this was my first web dev project took me 3 days to finish this video But i did it! appreciate you bro

[@NyashaMafunda]

thank you... simple and straight forward

[@zafiroula100]

Idk why everyone complains about the speed. Im a beginner too and i find that you explained everything in detail. I love your videos, the styling here is really good, well done🙌👏

[@TylerPotts]

Thank you Iris!

[@user-gx1vp7wl7c]

Very help full and have learnt a lot. Thank you dude :)

[@weareloved]

Thank you!! This tutorial was awesome!!!!!!!!!!!!!!

[@elizabetemichelledefreitas4941]

Great tutorial!! It really helped. Thank you so much!

[@TylerPotts]

Glad it helped!

[@HayWhy_Pappy]

Thanks man!

[@zanechan4274]

Nice demo to get us to comment and like XD You totally deserve it :)

[@martinsejiofo8794]

A million thanks, this was very helpful

[@dusanjovic7268]

thank you for not selling any course and giving this for free love you!

[@justinckho9390]

Great tutorial for beginners. Thank you very much!

[@TylerPotts]

You're very welcome!

[@joyceadee1147]

Hi Tyler thanks a lot for this, its been real fun coding with you, though the gradient part failed to work till i used normal colors but i have learned a lot , thanks big deal👌

[@TylerPotts]

Happy I could help you learn! - Sucks about the gradients!

[@ikleveland]

to fast, more explanations.... we get it, you can do it, just explain more, and slow down .... you will have a great channel if you do this !

[@TylerPotts]

Noted!

[@ikleveland]

@@TylerPotts You the man !!!

[@gamerparadise3694]

@@ikleveland you tell me how to make it save when i leave tne page plz cant figure it out

[@space_raven5082]

@@gamerparadise3694 currently there's a video in the description describing that!

[@ayushdudhani]

short videos are better ! I have seen some very long videos that never gets completed!

[@priya4023]

You are amazing!!! Thank you for this video! It helped me to create a todo list without confusing!!!!

[@TylerPotts]

You're very welcome!

[@user-kl1cq5ge7g]

Thanks for the step-by-step video. Easy to follow.

[@TylerPotts]

Glad it was helpful!

[@ahmadoudiallo7907]

Awesome. Thank to you I know how to create a nice Todo by following step by step you explanation in this video. Clear image that I can read even in my cell phone. Thank you much.

[@hackrecordz]

Hi Tyler! Thanks for the great video. To do list app is very useful for beginners in Javascript, so your video helped me a lot

[@TylerPotts]

You're very welcome!

[@alexphloyddrums]

Thank you, man. Great job!

[@TylerPotts]

Glad it helped!

[@ci2484]

Thanks for this, super helpful and informative! I learned a lot from this.

[@TylerPotts]

Glad it was helpful!

[@nobodyknows730]

Man, your tutorials are soo helpful. Thanks a lot for that.

[@TylerPotts]

Glad you like them!

[@jonathanndawula8584]

Thanks for this , am grateful for your work

[@dashanben]

It's a stunning video! Thank you!

[@TylerPotts]

Thank you very much!

[@cakeestv9973]

Great vid! :)

[@FadwaInfo]

loved it. thank you

[@yajie7756]

great video, thank you!

[@TylerPotts]

Thank you for watching!

[@wisdom4070]

that's really awesome

[@WiLDeveD]

Amazing Tyler ! thanks bro...

[@TylerPotts]

Glad you liked it!

[@learnenglish7331]

This video is very helpful. Thank you so much

[@SHIVAMTIWARI-we9jq]

too good and thanks a lot

[@nhuyen9355]

Hi Tyler. Thanks for the lesson, great.

[@TylerPotts]

Glad you liked it!

[@dondelice257]

Very interesting video, thank you for helping me to fix the bug 🙏

[@allanlembe5079]

This video is just amazing 👏 😍. The way you explain things makes programming easier and more funny to understand.

[@TylerPotts]

Happy to hear that! Thank you!

[@danieltosin4669]

This was very helpful. Thank you so much

[@TylerPotts]

Glad it was helpful!

[@nurazizahlaili9652]

I really like this video, you can explanation so clearly. Thanks

[@TylerPotts]

Glad it was helpful!

[@mishabrusnika2769]

Nice "Tast Lisk". Well done

[@wesammuneer8926]

Thank you, Man; I learned a lot from this video.

[@TylerPotts]

Glad to hear it!

[@PSProduktions]

Thank you so much for this, video! Learned a LOTT!! Thanks!

[@TylerPotts]

Happy to help!

[@PSProduktions]

@@TylerPotts :)

[@girldocode8408]

very helpful actually.

[@chukwuemekaorji9331]

Amazing this was amazing I love your tutorial, very helpful

[@TylerPotts]

Glad it was helpful!

[@kiranmoura2974]

hello... It was a knowlegeable video , thank you so much for this .

[@heriprasetyo6452]

I learn a lot. Thanks !

[@TylerPotts]

Glad it was helpful!

[@emotional_stuff]

going to implement back for this

[@anandkumarnitrourkela7404]

you are a crazy developer man. Huge respect ❣

[@TylerPotts]

Thanks a ton!!!

[@mb-techmedia8494]

This learn was really helpful. Thank you

[@TylerPotts]

Glad it was helpful!

[@bereketsisay1791]

Thanks man....this helped alot

[@TylerPotts]

Glad to hear it!

[@radhikagore9897]

Useful 👍 Thank you

[@mustafaguleroglu1947]

Amazing!!!!!

[@mh4074]

Really perfect job . Thank very much 🙏. More videos 😁

[@TylerPotts]

Thank you! Will do!

[@java_king6822]

great, now i gonna try that

[@ArtParlor]

That was the most epic intro I ever seen. Holy god

[@TylerPotts]

Thanks 😅

[@DavidmekontsoSonwa]

Wow,this video explains exactly what I didn't understood before and ofcourse I got to learn numerous new methods.🎉 But for now ,I want to know how to add the local storage as continues to this task lists...

[@nisarganisarga4708]

Thank you it was helpful

[@Calupp]

I honestly loved how fast you went with this. when stuff goes too slow I end up getting distracted and confused. also you're a css wizard. simple .css code and it looks and behaves great.

[@TylerPotts]

Haha, honestly, I hate CSS that's why it's simple - the simpler the better in my opinion 🤣- Thanks for the kind words, Inigo!

[@kareynjeri3982]

i think this is among the most well explained tutorial

[@TylerPotts]

Thank you! :D

[@mr.samaxy]

great job very very impressive editing 😍😍😍😍😍

[@user-yr6zg7ux3k]

Thanks!

[@pilloIMNG]

Loved this tutorial! Thanks for the help, I was stuck trying to build my own but came here and it was clear as the water, amazing explanation! One question tho, whould it any different it you didn't create the task_content_el? (div inside task_el)

[@PiMpMyCoMpUtEr]

great, really great !

[@TylerPotts]

Thank you!

[@atakhanovcode]

very nice teacher. you are my best teacher

[@anupam6045]

nice explanation and project

[@fasanmichael]

I got lost inside the function when you were creating new elements… Also, copilot was really interfering with your tutorial sadly But thanks for the hints on some features I had no idea existed in css! Keep it up!

[@vaniilla]

Useful,Thank u!

[@TylerPotts]

Glad it was helpful!

[@tekskilldev8310]

Tyler great video. I am not a beginner. However, it showed me how to complete CRUD operation with basic DOM manipulation techniques. Bravo! Great Job!

[@TylerPotts]

Glad it was helpful!

[@alicia4070]

Great video, but I think for any future beginner videos, going at a slower pace would help us noobies out a lot!

[@TylerPotts]

I'll try to take that into account! Thank you!

[@koshobai]

It's super convenient to use the video playback functions like .75x and whatnot

[@rajbannasa7662]

thank you so much sir

[@petermwansa4890]

Thank you bro

[@dilbermt9203]

Nice video bro

[@anthonnytineo]

Excelente video, saludos.

[@animeshjha31]

Hi Tyler, it was an intersesting project. The "not" condition in css was a bit new and confusing but the project as whole was very interesting and helpful. Thanks again 🙂

[@TylerPotts]

I'm happy you learned something! The not condition is super powerful! 💪

[@saksham2248]

We really need that part two pls

[@lawrencemotions8720]

This was a pretty good build i enjoyed it the only change i made straight away is i named task task_discription , const task_el , create_task and task_content_el, create_task_content.

[@amantidiriba3892]

thank u vary much

[@juliethomas4826]

Hey, I've never found a video worth commenting on before...until today! I found you so easy to follow! I started coding 8 weeks ago, mainly html and css, but wanted to get to grips with how to use javascript. This video was perfect as I really liked the way you show the divs with the tasks in for the css benefit, then take them away completely, showing us how to then add them with javascript. OK, your javascript part of the video was a little fast but that may well be that I wasn't confident with my code. All I can say is, very much appreciated, great video and thank you!!

[@TylerPotts]

Thank you, Julie! That made my day 😁

[@juliethomas4826]

@@TylerPotts to be honest, your video made my day because I've been struggling to get to grips with how to combine CSS styling and JavaScript. Your video showed exactly what I needed to see in a way that was understandable! If you get a minute to reply, did you make a video after this one? And if so which video? I've subscribed but haven't had a chance to look through yet.

[@TylerPotts]

There's a similar video which covers local storage as well which I've just created it's a task list app but for 2022!

[@juliethomas4826]

​@@TylerPotts awesome. I'll take a look. Definitely keep posting...you're a great youtuber!

[@Cheetohzz]

im in the same boat haha. also ya during the javascript part i can confidently say i was just writing what he was and not knowing what i was doing :D

[@OPIUMZAIT]

great video and very helpful =]

[@TylerPotts]

Glad it was helpful!

[@mr.kachoo8784]

Thank you bro is Good