SheTech
  • SheTech JS bootcamp
  • Level 1 - awesome tasks
    • Introduction to Awesome Tasks
    • Step 1: HTML
    • Step 2: playing with the DOM
    • Step 3: add a new task
    • Step 4: dynamic list of tasks
    • Step 5: adding new items
    • Step 6: removing items
    • Step 7: add some style
    • Step 8: marking items as done
    • Step 9: saving items in the localstorage
    • Step 10: adding filters and bulk actions
    • Step 11: add counters
    • From Awesome Task to the next big thing!
  • Level 2 - timeline
    • Live Timeline
    • Step 1: basic HTML page
    • Step 2: add util library
    • Step 3: show all posts
    • Step 4: add form
    • Step 5: collect form data
    • Step 6: create a new post
    • Step 7: validating posts
    • Step 8: refactoring
    • Step 9: refresh button
    • Step 10: auto refresh
  • Code Editors
  • Useful resources
  • API Reference
  • Glossary
Powered by GitBook
On this page
  • HTML Recap
  • Exercises
  • From basic HTML markup and styling to a dynamic list of tasks

Was this helpful?

  1. Level 1 - awesome tasks

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:

<!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 4 years ago

Was this helpful?

1.1 —

index.html