Step 1: HTML

HTML Recap

  • All HTML documents must start with a document type declaration: <!DOCTYPE html>

  • The HTML document begins with <html> and ends with </html>

  • The document title (<title> </title>), styles, scripts, and other meta information is between <head> and </head>

  • The visible part of the HTML document is between <body> and </body>

  • <h1> to <h6> defines HTML headings

  • <ul>is used to define a bulletted list (every item defined inside <li>)

Exercises

  • Create a file called index.html

  • Add the main tags

  • Add a headling with the title of your app

  • Add a bulletted list

From basic HTML markup and styling to a dynamic list of tasks

The file you've just written is the first step towards building your application! The page should look like the following snippet:

1.1 —index.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Awesome Tasks</title>
  </head>
  <body>
    <h2>Awesome Tasks</h2>
    <ul id="task-list">
      <li>Buy coffee</li>
      <li>Buy milk</li>
    </ul>
  </body>
</html>

If you open this file in a web browser, you will see a pretty boring HTML page that shows a title and a static list of things to do. Not that much to be honest - but we'll build up from here!

PreviousIntroduction to Awesome TasksNextStep 2: playing with the DOM

Last updated

Was this helpful?