This is the first part of a tutorial series where I will be showing you how to create a simple to-do list web application.
In this part, we will be creating a single HTML page to display a list of items on a to-do list.
This entire tutorial series can be completed by only using a simple text editor like Notepad on Windows or TextEdit on Mac. Although, the experience will probably be more enjoyable and easier if you were to use a rich text editor such as Sublime Text, Atom, or Notepad++. Download links for each of these editors are below, it doesn’t really matter if you choose to use a simple text editor, one of the rich text editors listed below, or another program the end result will be the same.
Sublime Text – https://www.sublimetext.com/
Atom – https://atom.io/
Notepad++ – https://notepad-plus-plus.org/
The first thing we need to do is create a folder/directory to contain our web application. This can be called whatever you want. Next, we need to create a single HTML file, this will require changing the default extension if you are using a simple text editor to ‘.html’ instead of ‘.txt’. Our webpage file will be called ‘index.html’.
The reason we name our webpage ‘index’ is because that is the default file a browser will look for when navigating to a website is called ‘index’. For example, when you navigate to “www.google.com” your browser is loading a webpage file named ‘index’ on the Google server. When you navigate to ‘www.yahoo.com/entertainment/’ your browser is loading a webpage file called ‘index’ within a folder/directory called ‘entertainment’ on the Yahoo server. However, you can specify the file you want to load too like “www.yahoo.com/entertainment/news.html”.
The first thing we need to do is define the start and end of our HTML document, imagine the browser is reading the page from the top to the bottom, it needs to know when the HTML code starts and where it ends. In our index file type the following opening and closing HTML tags.
There are two main parts to any HTML document, a head and a body. The head component contains details about the page, other scripts to include and attributes we wish to attach to our page. The body of the HTML document will contain the actual parts of the page, what we want to be displayed in the browser. Inside our HTML tags create a head and body element, both with opening and closing tags.
<html> <head> </head> <body> </body> </html>
Within the head tag, we are going to give the webpage a title, that is defined within a title tag. The title of a webpage will appear in the tab header when opened in a browser. Below we define the title ‘To Do List App’ and this will be displayed in the tab bar of the browser. When you have added the title tag, save the document, and open it in any browser to see the result.
<head> <title>To Do List App</title> </head>
You will notice that the actual webpage is blank, that is because we have not added anything to the body of our webpage yet. Within the body tag, we are going to add a heading element and a list of to-do list items.
<body> <h1>To Do List</h1> <ul> <li>Washing up</li> <li>Do the laundry</li> <li>Work out</li> <li>Etc...</li> </ul> </body>
The ‘h1’ tag is a heading tag, there are 6 different types of heading tags in HTML (h1, h2, h3… h6). Each different type of heading tag has different attributes such as size and thickness (bold). The ‘ul’ tag is an unordered list with various list items or ‘li’ tags inside. An unordered list is a bullet point list whereas an ordered list, or ‘ol’ tag, will number all the list items starting from the number 1. Each list item tag contains text, similar to our title tag, that will be the contents of the list item and will be displayed on the webpage. Save the document and open it in a browser, if you already have it opened in a browser you can simply refresh the page to get the latest version.
This is the end of Part 1, where we have created a simple webpage. Experiment with the difference between an unordered and ordered list tag and as well as the different heading tags. You could also try adding and removing list items from your new to-do list but adding or removing the list items.
Remember all of the code for this tutorial series can be seen at the following link: https://github.com/acroynon/tutorial-to-do-list-app
and a demo of the to-do list application can be seen at the following link: https://acroynon.github.io/tutorial-to-do-list-app/
Continue to Part 2