Beginner Web Development Curriculum

Learn HTML, CSS, and JavaScript from scratch

I. HTML – The Structure of the Web

Lesson 1: Introduction to HTML

Objectives: Understand what HTML is and its role in web development. Identify the basic structure of an HTML document.

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
Practice: Create index.html with your name as a heading and a welcome paragraph.
Mini-Quiz:
  1. What does HTML stand for?
  2. Where does visible page content go?
  3. What is the purpose of <!DOCTYPE html>?

Lesson 2: Basic Text Elements

Objectives: Format text using headings, paragraphs, and emphasis.

<h1>Main Heading</h1>
<p>This is a paragraph.</p>
<strong>Bold text</strong>
<em>Italic text</em>
Practice: Create a short biography with an <h2> heading, a paragraph, and bold one important word.
  1. Which heading tag is the largest?
  2. What’s the difference between <strong> and <b>?

Lesson 3: Links & Navigation

Objectives: Add hyperlinks to a page.

<a href="https://example.com">Visit Example</a>
<a href="about.html" target="_blank">About Us</a>
Practice: Add a link to your favorite website and one to another page on your site.
  1. What attribute sets the link’s destination?
  2. How do you make a link open in a new tab?

Lesson 4: Images & Media

Objectives: Add images and embed videos.

<img src="photo.jpg" alt="Description" width="300">

<iframe src="https://www.youtube.com/embed/example"
width="560" height="315"></iframe>
Practice: Add a profile photo to your page with a description in the alt attribute.
  1. What is the alt attribute for?
  2. Which tag is used to insert an image?

Lesson 5: Lists

Objectives: Create ordered and unordered lists.

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>
Practice: Create a list of your top 3 favorite foods using <ol>.
  1. Which tag creates a bulleted list?
  2. Which tag creates a numbered list?

Lesson 6: Tables

Objectives: Create simple HTML tables.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Joe</td><td>25</td></tr>
</table>
Practice: Make a table with 2 columns: subject and teacher.
  1. What does <tr> represent?
  2. Difference between <th> and <td>?

Lesson 7: Forms & Inputs

Objectives: Create forms for user input.

<form>
  <label>Name: <input type="text"></label>
  <input type="submit" value="Send">
</form>
Practice: Create a sign-up form with name, email, and submit button.
  1. Which tag wraps form elements?
  2. Which input type hides typed characters?

Lesson 8: Semantic HTML

Objectives: Use semantic tags for structure and accessibility.

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
Practice: Wrap your homepage in proper semantic tags.
  1. Why use semantic HTML?
  2. Name two semantic tags.
HTML Final Project: Create a personal profile page with heading, image, paragraph, links, table, and contact form.

II. CSS – Styling the Web

III. JavaScript – Making the Web Interactive