Writing Your First Code — Complete Beginner's Guide to Coding

Your first HTML page

Open VS Code. Create a new file called index.html. Type the code below exactly as shown, then open the file in your browser by right-clicking it and selecting 'Open with browser'.

index.html — your very first webpage

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>I just wrote my first webpage.</p>
    <p>This text is inside a paragraph tag.</p>
  </body>
</html>

NOTE

What does each part mean?. tells the browser this is an HTML file. <html> is the root container. <head> holds invisible info like the page title. <body> holds everything visible on the page. <h1> is a large heading. <p> is a paragraph.

Your first JavaScript program

Now let's add some interactivity. Update your file to include a button that does something when clicked.

index.html — with JavaScript added

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p id="message">Click the button below.</p>
    <button onclick="changeMessage()">Click me!</button>

    <script>
      function changeMessage() {
        document.getElementById("message").innerText = "You clicked the button!";
      }
    </script>
  </body>
</html>

TIP

What just happened?. You wrote a function called changeMessage. When the button is clicked (onclick), the browser runs that function. The function finds the element with id='message' and changes its text. You just made a webpage that responds to user input. That's interactivity — and it's the foundation of every app you've ever used.

Your first Python script

Python is read almost like plain English. Create a file called hello.py in VS Code and type this:

hello.py — your first Python program

python

# This is a Python comment — the # symbol marks it

# Print a message to the terminal
print("Hello, World!")

# Create a variable
name = "Nelson"
age = 25

# Use those variables in a message
print("My name is " + name + " and I am " + str(age) + " years old.")

# A simple calculation
price = 100
discount = 20
final_price = price - discount
print("Final price: $" + str(final_price))

Run it in your terminal

bash

# Navigate to where you saved the file, then:
python hello.py

# Output:
# Hello, World!
# My name is Nelson and I am 25 years old.
# Final price: $80