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 KZread
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

Пікірлер: 450

  • @Gugapoeta
    @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!!!

  • @soumelee5661
    @soumelee5661 Жыл бұрын

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

  • @mr6462
    @mr6462 Жыл бұрын

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

  • @ondrejmuzik8345
    @ondrejmuzik8345 Жыл бұрын

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

  • @yassminh
    @yassminh2 жыл бұрын

    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

    @TylerPotts

    2 жыл бұрын

    Great to hear!

  • @alexandrabalanescu8340

    @alexandrabalanescu8340

    2 жыл бұрын

    Same here 😩 how are you doing now though?

  • @kritisrivastava6451

    @kritisrivastava6451

    Жыл бұрын

    Same!

  • @jasonlago5129

    @jasonlago5129

    Жыл бұрын

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

  • @PeteGoode

    @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.

  • @MartinExequielFuraca
    @MartinExequielFuraca2 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

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

  • @Noritoshi-r8m
    @Noritoshi-r8m2 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Woo happy I could help!

  • @ItzShrav
    @ItzShrav11 ай бұрын

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

  • @Blentux
    @Blentux2 жыл бұрын

    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

    @TylerPotts

    Жыл бұрын

    Woo! Happy I could help!

  • @mrtech7940
    @mrtech7940 Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Happy to help!

  • @dusanjovic7268
    @dusanjovic72682 жыл бұрын

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

  • @wii3willRule
    @wii3willRule2 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Woo! JavaScript is cool! 😎

  • @nsikakakpan6638
    @nsikakakpan6638 Жыл бұрын

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

  • @ZimTech97
    @ZimTech979 ай бұрын

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

  • @lucasAlmeida-ue7iw
    @lucasAlmeida-ue7iw2 жыл бұрын

    Tyler you are incredible. That was insane buddy!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thanks, Lucas!

  • @TomasMisura
    @TomasMisura4 ай бұрын

    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!

  • @nanakwamedickson4296
    @nanakwamedickson42962 жыл бұрын

    This was absolutely helpful. Straight to the point.

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Happy to hear that! :D

  • @yungshabba5119
    @yungshabba5119 Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad it helped!

  • @zafiroula100
    @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

    @TylerPotts

    Жыл бұрын

    Thank you Iris!

  • @devsharma181
    @devsharma1814 ай бұрын

    Thanks for such a great tutorial! Will expand this project

  • @ace_ctrl
    @ace_ctrl Жыл бұрын

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

  • @MehmedAk
    @MehmedAk Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad it helped!

  • @zanechan4274
    @zanechan4274 Жыл бұрын

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

  • @SameerSinghGarden
    @SameerSinghGarden11 ай бұрын

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

  • @waqaspathan3337
    @waqaspathan33372 жыл бұрын

    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

    @TylerPotts

    2 жыл бұрын

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

  • @ameeradda
    @ameeradda Жыл бұрын

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

  • @babylee3975
    @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

    @TylerPotts

    Ай бұрын

    Glad it helped!

  • @elizabetemichelledefreitas4941
    @elizabetemichelledefreitas49412 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it helped!

  • @justinckho9390
    @justinckho93902 жыл бұрын

    Great tutorial for beginners. Thank you very much!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    You're very welcome!

  • @joyceadee1147
    @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

    @TylerPotts

    Жыл бұрын

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

  • @CodeEnthusiast78912
    @CodeEnthusiast78912 Жыл бұрын

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

  • @user-gx1vp7wl7c
    @user-gx1vp7wl7c6 ай бұрын

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

  • @hackrecordz
    @hackrecordz2 жыл бұрын

    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

    @TylerPotts

    2 жыл бұрын

    You're very welcome!

  • @priya4023
    @priya40232 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    You're very welcome!

  • @weareloved
    @wearelovedАй бұрын

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

  • @alexphloyddrums
    @alexphloyddrums2 жыл бұрын

    Thank you, man. Great job!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it helped!

  • @martinsejiofo8794
    @martinsejiofo8794 Жыл бұрын

    A million thanks, this was very helpful

  • @ci2484
    @ci2484 Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad it was helpful!

  • @dashanben
    @dashanben2 жыл бұрын

    It's a stunning video! Thank you!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thank you very much!

  • @user-kl1cq5ge7g
    @user-kl1cq5ge7g Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad it was helpful!

  • @anandkumarnitrourkela7404
    @anandkumarnitrourkela74044 ай бұрын

    you are a crazy developer man. Huge respect ❣

  • @TylerPotts

    @TylerPotts

    3 ай бұрын

    Thanks a ton!!!

  • @nobodyknows730
    @nobodyknows7304 ай бұрын

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

  • @TylerPotts

    @TylerPotts

    3 ай бұрын

    Glad you like them!

  • @NyashaMafunda
    @NyashaMafunda3 ай бұрын

    thank you... simple and straight forward

  • @mishabrusnika2769
    @mishabrusnika27692 жыл бұрын

    Nice "Tast Lisk". Well done

  • @WiLDeveD
    @WiLDeveD2 жыл бұрын

    Amazing Tyler ! thanks bro...

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad you liked it!

  • @cakeestv9973
    @cakeestv9973 Жыл бұрын

    Great vid! :)

  • @tekskilldev8310
    @tekskilldev83102 жыл бұрын

    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

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @jonathanndawula8584
    @jonathanndawula858411 ай бұрын

    Thanks for this , am grateful for your work

  • @allanlembe5079
    @allanlembe5079 Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Happy to hear that! Thank you!

  • @ahmadoudiallo7907
    @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.

  • @FadwaInfo
    @FadwaInfo Жыл бұрын

    loved it. thank you

  • @PSProduktions
    @PSProduktions2 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Happy to help!

  • @PSProduktions

    @PSProduktions

    2 жыл бұрын

    @@TylerPotts :)

  • @ArtParlor
    @ArtParlor2 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thanks 😅

  • @yajie7756
    @yajie7756 Жыл бұрын

    great video, thank you!

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Thank you for watching!

  • @alicia4070
    @alicia40702 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

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

  • @koshobai

    @koshobai

    2 жыл бұрын

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

  • @nhuyen9355
    @nhuyen93552 жыл бұрын

    Hi Tyler. Thanks for the lesson, great.

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad you liked it!

  • @kareynjeri3982
    @kareynjeri39822 жыл бұрын

    i think this is among the most well explained tutorial

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thank you! :D

  • @chukwuemekaorji9331
    @chukwuemekaorji93312 жыл бұрын

    Amazing this was amazing I love your tutorial, very helpful

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @wesammuneer8926
    @wesammuneer8926 Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad to hear it!

  • @HayWhy_Pappy
    @HayWhy_Pappy Жыл бұрын

    Thanks man!

  • @danieltosin4669
    @danieltosin46692 жыл бұрын

    This was very helpful. Thank you so much

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @heriprasetyo6452
    @heriprasetyo64522 жыл бұрын

    I learn a lot. Thanks !

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @learnenglish7331
    @learnenglish7331 Жыл бұрын

    This video is very helpful. Thank you so much

  • @mh4074
    @mh40742 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thank you! Will do!

  • @Calupp
    @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

    @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!

  • @nurazizahlaili9652
    @nurazizahlaili96522 жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @dondelice257
    @dondelice257 Жыл бұрын

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

  • @wisdom4070
    @wisdom40708 ай бұрын

    that's really awesome

  • @DavidmekontsoSonwa
    @DavidmekontsoSonwa9 ай бұрын

    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...

  • @kiranmoura2974
    @kiranmoura2974 Жыл бұрын

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

  • @bereketsisay1791
    @bereketsisay1791 Жыл бұрын

    Thanks man....this helped alot

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad to hear it!

  • @fasanmichael
    @fasanmichael2 жыл бұрын

    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
    @vaniilla2 жыл бұрын

    Useful,Thank u!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @radhikagore9897
    @radhikagore9897 Жыл бұрын

    Useful 👍 Thank you

  • @java_king6822
    @java_king68222 жыл бұрын

    great, now i gonna try that

  • @juliethomas4826
    @juliethomas48262 жыл бұрын

    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

    @TylerPotts

    2 жыл бұрын

    Thank you, Julie! That made my day 😁

  • @juliethomas4826

    @juliethomas4826

    2 жыл бұрын

    @@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

    @TylerPotts

    2 жыл бұрын

    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

    @juliethomas4826

    2 жыл бұрын

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

  • @Cheetohzz

    @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

  • @bollybuck
    @bollybuck Жыл бұрын

    great job very very impressive editing 😍😍😍😍😍

  • @SHIVAMTIWARI-we9jq
    @SHIVAMTIWARI-we9jq Жыл бұрын

    too good and thanks a lot

  • @emotional_stuff
    @emotional_stuff2 жыл бұрын

    going to implement back for this

  • @mb-techmedia8494
    @mb-techmedia8494 Жыл бұрын

    This learn was really helpful. Thank you

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad it was helpful!

  • @nisarganisarga4708
    @nisarganisarga47082 жыл бұрын

    Thank you it was helpful

  • @etimalexis528
    @etimalexis5282 жыл бұрын

    My name is Marcel, I've been learning JavaScript for a while now and I must confess, this video was really helpful

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    I'm happy to hear it was helpful!

  • @girldocode8408
    @girldocode84088 ай бұрын

    very helpful actually.

  • @atakhanovcode
    @atakhanovcode Жыл бұрын

    very nice teacher. you are my best teacher

  • @animeshjha31
    @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

    @TylerPotts

    Жыл бұрын

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

  • @lawrencemotions8720
    @lawrencemotions87202 жыл бұрын

    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.

  • @PiMpMyCoMpUtEr
    @PiMpMyCoMpUtEr2 жыл бұрын

    great, really great !

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thank you!

  • @anupam6045
    @anupam6045 Жыл бұрын

    nice explanation and project

  • @tenc6491
    @tenc64912 жыл бұрын

    1:54 made me pause the video to make a cup of delicious-looking tea like yours. Hardcore tea lover here Imma continue this tutorial and get back.

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Haha, you got to make a good brew!

  • @tenc6491

    @tenc6491

    2 жыл бұрын

    You bet! That said, I loved your video tutorial and narrations. I am still halfway through Js part coz I am trying to sink in everything you teach here. I must say, it's looking beautiful thus far. Thanks for the share mate! Regards from France!

  • @OPIUMZAIT
    @OPIUMZAIT2 жыл бұрын

    great video and very helpful =]

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Glad it was helpful!

  • @mustafaguleroglu1947
    @mustafaguleroglu1947 Жыл бұрын

    Amazing!!!!!

  • @user-yr6zg7ux3k
    @user-yr6zg7ux3k2 жыл бұрын

    Thanks!

  • @saksham2248
    @saksham22482 жыл бұрын

    We really need that part two pls

  • @eduop4394
    @eduop43942 жыл бұрын

    muito bom mano

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    ❤❤

  • @anthonnytineo
    @anthonnytineo2 жыл бұрын

    Excelente video, saludos.

  • @dilbermt9203
    @dilbermt9203 Жыл бұрын

    Nice video bro

  • @JonathanLeon
    @JonathanLeon2 жыл бұрын

    Decent video. That’s a lot of CSS!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    It is definitely a lot of CSS 😅

  • @JonathanLeon

    @JonathanLeon

    2 жыл бұрын

    @@TylerPotts Yeah. I do like the variables however.

  • @sabafaraahani
    @sabafaraahani2 жыл бұрын

    It was helpful thanks🤩

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    You’re welcome 😊

  • @dailymeow3283
    @dailymeow32832 жыл бұрын

    Your colors and UI are always awesome

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Thanks I always try to pick out some nice looking colours 😁

  • @dimitnone6795

    @dimitnone6795

    2 жыл бұрын

    @@TylerPotts Did you pick those colors from a ready pallete ? Very nice choice!

  • @TylerPotts

    @TylerPotts

    2 жыл бұрын

    Nope I just created a new palette for the project :)

Келесі