HTML5 Projects: Advanced To-Do List

with Joseph Lowery
please wait ...
HTML5 Projects: Advanced To-Do List
Video duration: 0s 45m 50s Intermediate


The HTML5 Projects series combines HTML5, CSS3, and recent JavaScript API technologies to enhance your web projects with interactivity and multimedia. This installment shows how to create a basic to-do list widget with an editable field so users can enter their tasks and delete them as they are completed, and a more advanced version with all the bells and whistles, including a drag-and-drop interface that allows for quick and easy sorting. Author Joseph Lowery covers HTML5 technologies such as web databases, content editing in the browser, and CSS transitions and transforms.

Topics include:
  • Making content editable
  • Saving edits
  • Setting up the core files for your app
  • Removing list items
  • Enabling drag-and-drop sorting
Design Web
HTML JavaScript CSS


- [Voiceover] Hi, I'm Joe Lowery, and I'm glad you've joined me for HTML5 Projects, Advanced To Do List. In this course, I'm going to show you two approaches to integrating To Do lists into your sites. The first is straight up simple. Very basic, but it does the job. So you can easily enter and edit as many list items as you need and then save them for later if desired, thanks to the wonders of the HTML 5 feature, local storage. Then, we'll tackle a much more enhanced version of the To Do list, with bells and whistles galore.

Once we're done, your site visitors will be able to add, edit, and delete your list items with ease. They will even be able to sort them in a prioritized order just by dragging them into position. This app takes advantage of some pretty heavy-duty Javascript, but don't worry. I'll explain how it all works from start to finish. Whichever approach you want to take, basic or advanced, this course will give you the tools to engage your site visitors with a fully interactive feature. Let's get started.

please wait ...