Task-1 : create hello world heading using HTML

Steps:

  1. create an empty directory : Choose any name you like
  2. now inside that directory create index.html file
  3. Using emmet create boiler plate code :
type ! <- pres enter 
      or
type html:5 <- enter
  1. Now create div with id root

<aside> 💡

[ type : #root and hit ↵ Enter ]

</aside>

  1. Add h1 tag inside div now your index.html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root">
        <h1>Hello World </h1>
    </div>
</body>
</html>

Now run file and see output in browser

<aside> 💡

[ download live server plugin if you don't have it ]

</aside>

Screenshot 2025-07-17 at 9.49.27 PM.png

Task-2 : create same task using JS

Steps:

  1. add <script> tag to tell browser that we are using JS
  2. now create h1 element
  3. assign text to h1 element
  4. now grab id named root using DOM