Build & Deploy a TODO APP with JavaScript

👌 Coupon code: CODING2GO(10% discount on all web hosting plans with a duration of 12 months or more)

In this JavaScript beginner project, we will build and deploy a todo application using HTML, CSS, and JavaScript (JS), and then upload it using the web hosting service Hostinger.
You will learn important concepts such as CSS variables (custom properties), CSS Flexbox layouts, responsive web design, as we make the website/web app responsive for desktop, tablet, and smartphone (mobile version). In this practical project, you will learn important JavaScript concepts such as event listeners, DOM manipulation, localStorage, create, delete, and save elements. In HTML and CSS, we use modern icons with SVG elements from Google Fonts Icons/Material Icons, create our own custom checkbox (styling input checkbox), and design the responsive todo app with media queries and Flexbox.

Resources
🔥 Use the code CODING2GO for a 10% discount

⏱️ Timestamps:
00:00 Introducing the project
02:47 Preparations
03:33 HTML Code
07:53 CSS Code
18:33 Responsive webdesign
19:43 JavaScript Code
28:10 Store Todos with LocalStorage
35:48 how to upload a website with hostinger

👉 Learn HTML5 and SEO with our Udemy Course:
👉 Related Tutorials:

#todo-app #javascript #deploy

Background music licenses in the video

Track: "Little Things"

Track: "Scared Of The Glizzy"

Track: "Luz Solar"

What topics are covered?
Todo list, todo-list-application, todo app, javascript, html, css, JS, responsive, javascript project, web dev project, beginner project, tutorial, localStorage, data saving, saving todos, for beginners, CSS Flexbox, CSS Variables, CSS Custom properties, uploading website, web hosting, hostinger, putting website online, todo web app, deploy

👍 Subscribe and like if you enjoyed it 😉

[lazareabuladze]

i just discovered your channel bro you are amazing! huge respect for teaching us

[beeleaveme]

I marathoned your videos, excellent content, you have "few" subscribers now but I guarantee you that with the quality you put in your videos, more people will get to know you

[kumaishhaider]

Bro you're teaching style is so good and I'm really glad i subscribed you. Keep up the good work man. You'll get millions of subscribers one day if you keep working hard and making videos useful for us. Thanks for the video Man 🖤.

[awos]

If anyone struggling with the js dont forget to add # in const todoListUl = and other ids

[KunalVats-vf]

damnnn broo this channel is really really underrated, best explanations and tutoring . Thanks mannn!!!!

[tonytodd]

Everything needs to be changeable/editable!

[Agent_Ebbs]

Your videos are as informative as always 😊 thank you. For a self taught learner, this means a lot to me.

[jidnyasabhavsar]

you delivered a very unique content, it helps me a lot !! keep going!!

[skye]

This helps me a lot, thank you very much!

[LuckyLootTube]

Does anyone know how I can run this type of TO DO APP into a public notes for my community? I guess I need to create some database or something, right? I was thinking to kind of store all the notes that are written to a public google sheet.

[shibgatmahmud]

What fonts and theme do you use in VSCode?

[reyanreyaz]

A single big word breaks out of the text container and pushes the trash can way over to the right. To fix that, just add a line of CSS to .todo .todo-text:- word-break: break-word;

[officialdjbobroblox]

bruh hostinger is paid i want something free :(

[nr]

You shoud not clear your todo list evrey time you and new todo