How To Create A Simple To Do List App Using HTML, CSS, JS, and PHP

In this series of tutorials, you will learn how to create a basic to-do list web application. This tutorial series is aimed at beginner programmers who may have created a simple webpage/website before or people who are interested in how websites are created from the ground up. At the end of this tutorial series, you will have a simple web application that interacts with server-side code and a database that you could put in your portfolio when applying for jobs or finding clients.

The aim of this tutorial is to give you the basic building blocks of web development and show you how easy it can be to create a web application. There will still be plenty to learn after this tutorial, and the web application will be able to be extended and improved even when you finish all the tutorial parts. However, the finished application would make a good portfolio item for beginner developers as it demonstrates an understanding of both client and server-side as well as interactions with a database.

Each part of the tutorial series will contain a section called ‘further reading’. In this section there will be other posts linked that go more in-depth on the various things touched upon in that tutorial, you do not have to read any of the ‘further reading’ material to complete the tutorial. There are also more posts on this website pertaining to the topics covered in this tutorial series that are not linked in the ‘further reading’ section of each part.

You can check out the entire code of each section here: https://github.com/acroynon/tutorial-to-do-list-app
and a live demonstration of what the application will look like at the end of this tutorial here: https://acroynon.github.io/tutorial-to-do-list-app/

Below are links to all the parts of the tutorial series:

Part 1 – Introduction and basic HTML page

Part 2 – Adding CSS to the webpage

Part 3 – Adding JS to strike-through the items

Part 4 – Add new items to the list

Part 5 – Changing the data model

Part 6 – LocalStorage

Part 7 – Remove items from the list

Part 8 – PHP basic router

Part 9 – PHP basic database

Part 10 – PHP REST methods

Part 11 – Hooking it all together

Leave a Reply