10 minutes·Lesson 4 of 4

Writing Your Very First Webpage

The idea

Reading about HTML, CSS, and JavaScript is useful. Writing them yourself is where learning actually happens. In this lesson you will write a complete webpage from scratch.

All you need is a text editor and a browser. If you have a computer you have everything required.

Setting up

Open any text editor on your computer. Notepad on Windows, TextEdit on Mac, or any code editor like Visual Studio Code (VS Code) works. VS Code is free and widely used by professional developers. You can download it at code.visualstudio.com.

Create a new file and save it with the name index.html. The .html extension tells your browser this is an HTML (HyperText Markup Language) file.

The basic structure of every HTML page

Every HTML page starts with the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Webpage</title>
  </head>
  <body>

  </body>
</html>

<!DOCTYPE html> tells the browser this is an HTML5 document. Always include this at the very top.

<html lang="en"> is the root element that wraps everything. The lang="en" attribute tells browsers and screen readers the page is in English.

<head> contains information about the page that is not displayed on screen. The title, character encoding, and links to CSS files go here.

<meta charset="UTF-8"> sets the character encoding. UTF-8 (Unicode Transformation Format, 8-bit) supports virtually every character and symbol in the world.

<meta name="viewport"> makes your page work correctly on mobile devices. Without it your page will appear zoomed out on phones.

<title> sets the text that appears in the browser tab.

<body> is where all the visible content of your page goes.

Adding content

Now add some content inside the <body> tags:

<body>
  <h1>Hello, World</h1>
  <p>This is my first webpage. I built it myself.</p>
  <p>I am learning frontend development.</p>
  <a href="https://yourcareerex.com">Learn more at CareerEx</a>
</body>

Save the file and open it in your browser by double-clicking it. You will see a plain page with your heading, two paragraphs, and a link.

Adding CSS

The page works but it looks plain. Add some CSS inside a <style> tag in the <head>:

<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
    color: #333;
  }

  h1 { color: #42BCB1; font-size: 36px; }
  p { font-size: 16px; line-height: 1.6; }
  a { color: #42BCB1; text-decoration: none; font-weight: bold; }
  a:hover { text-decoration: underline; }
</style>

Save and refresh. Same HTML, completely different appearance. That is CSS (Cascading Style Sheets) at work.

Adding JavaScript

Now make the page interactive. Add a button and JavaScript just before the closing </body> tag:

<button id="myButton">Click me</button>
<p id="response"></p>

<script>
  const button = document.getElementById('myButton')
  const response = document.getElementById('response')

  button.addEventListener('click', function() {
    response.textContent = 'JavaScript is working.'
    response.style.color = '#42BCB1'
    response.style.fontWeight = 'bold'
  })
</script>

Save and refresh. Click the button. The paragraph updates without a page reload. That is JavaScript modifying the DOM (Document Object Model) in real time.

Key Takeaways

Every HTML page starts with the same basic skeleton including DOCTYPE, html, head, and body tags. The head contains metadata and links to styles. The body contains all visible content. CSS (Cascading Style Sheets) can be written inside a style tag in the head. JavaScript can be written inside a script tag at the bottom of the body. Saving a file with an .html extension and opening it in a browser is all you need to see your work.

Try it yourself

Preview

Key Takeaways

Every HTML page starts with the same skeleton including DOCTYPE html head and body tags
The head contains metadata and links to styles
The body contains all visible content
CSS can be written inside a style tag in the head
JavaScript goes inside a script tag at the bottom of the body

Quick Quiz

1.Where does visible page content go in an HTML document?

2.What does <meta charset='UTF-8'> do?

3.Where should you place a <script> tag containing JavaScript?

4.What happens when you save an HTML file and open it in a browser?

← What HTML, CSS, and JavaScript Each Do Next: HTML Elements and Tags →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx

10 minutes·Lesson 4 of 4

Writing Your Very First Webpage

The idea

Reading about HTML, CSS, and JavaScript is useful. Writing them yourself is where learning actually happens. In this lesson you will write a complete webpage from scratch.

All you need is a text editor and a browser. If you have a computer you have everything required.

Setting up

Create a new file and save it with the name index.html. The .html extension tells your browser this is an HTML (HyperText Markup Language) file.

The basic structure of every HTML page

Every HTML page starts with the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Webpage</title>
  </head>
  <body>

  </body>
</html>

<!DOCTYPE html> tells the browser this is an HTML5 document. Always include this at the very top.

<html lang="en"> is the root element that wraps everything. The lang="en" attribute tells browsers and screen readers the page is in English.

<head> contains information about the page that is not displayed on screen. The title, character encoding, and links to CSS files go here.

<meta charset="UTF-8"> sets the character encoding. UTF-8 (Unicode Transformation Format, 8-bit) supports virtually every character and symbol in the world.

<meta name="viewport"> makes your page work correctly on mobile devices. Without it your page will appear zoomed out on phones.

<title> sets the text that appears in the browser tab.

<body> is where all the visible content of your page goes.

Adding content

Now add some content inside the <body> tags:

<body>
  <h1>Hello, World</h1>
  <p>This is my first webpage. I built it myself.</p>
  <p>I am learning frontend development.</p>
  <a href="https://yourcareerex.com">Learn more at CareerEx</a>
</body>

Save the file and open it in your browser by double-clicking it. You will see a plain page with your heading, two paragraphs, and a link.

Adding CSS

The page works but it looks plain. Add some CSS inside a <style> tag in the <head>:

<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
    color: #333;
  }

  h1 { color: #42BCB1; font-size: 36px; }
  p { font-size: 16px; line-height: 1.6; }
  a { color: #42BCB1; text-decoration: none; font-weight: bold; }
  a:hover { text-decoration: underline; }
</style>

Save and refresh. Same HTML, completely different appearance. That is CSS (Cascading Style Sheets) at work.

Adding JavaScript

Now make the page interactive. Add a button and JavaScript just before the closing </body> tag:

<button id="myButton">Click me</button>
<p id="response"></p>

<script>
  const button = document.getElementById('myButton')
  const response = document.getElementById('response')

  button.addEventListener('click', function() {
    response.textContent = 'JavaScript is working.'
    response.style.color = '#42BCB1'
    response.style.fontWeight = 'bold'
  })
</script>

Save and refresh. Click the button. The paragraph updates without a page reload. That is JavaScript modifying the DOM (Document Object Model) in real time.

Key Takeaways

Try it yourself

Preview

Key Takeaways

Every HTML page starts with the same skeleton including DOCTYPE html head and body tags
The head contains metadata and links to styles
The body contains all visible content
CSS can be written inside a style tag in the head
JavaScript goes inside a script tag at the bottom of the body

Quick Quiz

1.Where does visible page content go in an HTML document?

2.What does <meta charset='UTF-8'> do?

3.Where should you place a <script> tag containing JavaScript?

4.What happens when you save an HTML file and open it in a browser?

← What HTML, CSS, and JavaScript Each Do Next: HTML Elements and Tags →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx