Beginner Free Learning Path

Web Development Beginner Course

Learn how the web really works — from your first HTML page to a responsive, interactive profile site. Master HTML, CSS, JavaScript basics, and the developer tools pros use every day.

4–6 weeks 20 lessons 3 projects 1 capstone No experience required

Start Learning

What Is Web Development?

10 min

What you'll learn

Understand frontend vs backend
Learn how browsers render pages
Set up your first HTML file

Web development is how websites come to life. The frontend is everything you see (HTML, CSS, JavaScript running in your browser), while the backend handles data, logins, and servers you never see. In this first lesson you'll create a real HTML file and open it in your browser — your first tiny website.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, Web!</h1>
</body>
</html>

Output

browser

A browser tab titled 'My First Page' showing 'Hello, Web!' in large bold text.

💡 Tip: Save the file as index.html — browsers automatically open index.html when you visit a folder.

MDN — Getting started with the web

Try it yourself

Change the <h1> text to your name and add a second line using <p>.

Next Lesson

HTML Document Structure

12 min

What you'll learn

Learn the skeleton of every HTML page
Understand head vs body
Add metadata

Every HTML page follows the same skeleton: DOCTYPE tells the browser 'this is modern HTML', <head> holds invisible info like the title, and <body> holds everything visible. Understanding this structure means you'll never be lost in any HTML file.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <h1>Visible content lives here</h1>
</body>
</html>

Output

browser

A properly structured page with the title shown on the browser tab and the heading visible in the window.

🔎 Important: The viewport meta tag is what makes your site look right on phones — always include it.

MDN — Document structure

Try it yourself

Add lang='en' to your <html> tag and a short description meta tag.

Lesson 01 Next Lesson

Headings & Paragraphs

10 min

What you'll learn

Use h1–h6 correctly
Structure readable text with <p>
Add line breaks

Headings create hierarchy: h1 is the main title (use it only once per page), h2 is a section, h3 a sub-section, down to h6. Paragraphs (<p>) hold your normal text. Good heading structure helps both readers and search engines understand your page.

headings.html

<h1>My Blog</h1>
<h2>Today's Post</h2>
<p>This is my first blog post. It has two sentences.</p>
<h3>Why I started coding</h3>
<p>Because building things is fun!</p>

Output

browser

A large 'My Blog' title, a smaller 'Today's Post' heading, a normal paragraph, then a smaller sub-heading with another paragraph.

✓ Best Practice: Never skip heading levels (h1 straight to h3) — it confuses screen readers and hurts SEO.

MDN — Headings

Try it yourself

Create a small page with one h1, one h2, and two paragraphs about your hobby.

Lesson 02 Next Lesson

Links & Navigation

12 min

What you'll learn

Create clickable links with <a>
Link to pages and sections
Open links safely

The anchor tag <a> turns text into a clickable link. The href attribute is the destination. Links are what make the web a web — connecting your page to others, to email, and even to specific parts of the same page.

links.html

<a href="https://example.com">Visit Example</a><br>
<a href="#about">Jump to About</a>

<h2 id="about">About Section</h2>
<p>This is the about text.</p>

Output

browser

A clickable 'Visit Example' link that opens example.com, and a 'Jump to About' link that scrolls to the About heading.

💡 Tip: Add target='_blank' rel='noopener' to open links in a new tab safely.

MDN — Anchor element

Try it yourself

Create two links: one to your favorite website and one that jumps to a section on the same page.

Lesson 03 Next Lesson

Images

10 min

What you'll learn

Embed images with <img>
Understand alt text
Control size

The <img> tag displays images. It's self-closing (no closing tag). The alt attribute describes the image for screen readers and shows if the image fails to load — it's also an SEO ranking signal, so write it carefully.

images.html

<img
  src="https://picsum.photos/300/200"
  alt="A random scenic photo"
  width="300"
  height="200"
>

Output

browser

A 300x200 image displayed on the page with 'A random scenic photo' as its fallback text.

🔎 Important: Always add descriptive alt text — it's required for accessibility and helps image SEO.

MDN — Image element

Try it yourself

Add an image of your choice and write a short descriptive alt text for it.

Lesson 04 Next Lesson

Lists: Ordered & Unordered

10 min

What you'll learn

Create bullet lists with <ul>
Create numbered lists with <ol>
Nest lists

Lists organize information. Unordered lists (<ul>) show bullets — great for features or ingredients. Ordered lists (<ol>) show numbers — perfect for steps. You can nest one list inside another for complex structures like menus.

lists.html

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

<h2>How to make tea</h2>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Pour and enjoy</li>
</ol>

Output

browser

A bulleted shopping list and a numbered three-step tea-making guide.

💡 Tip: Use <ol> only when order matters — a recipe's steps, not a grocery list.

MDN — Lists

Try it yourself

Create an ordered list of your morning routine and an unordered list of your hobbies.

Lesson 05 Next Lesson

HTML Forms Basics

15 min

What you'll learn

Build a simple form
Use inputs and labels
Add a submit button

Forms collect user input — the heart of sign-ups, search, and contact pages. Each input needs a <label> for accessibility. The type attribute controls what kind of input you get: text, email, password, and more.

form.html

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <button type="submit">Send</button>
</form>

Output

browser

A form with Name and Email fields and a Send button.

✓ Best Practice: Always pair every input with a label — clicking the label focuses the input, and screen readers need it.

MDN — Your first form

Try it yourself

Add a password input with a label to the form.

Lesson 06 Next Lesson

Semantic HTML Tags

12 min

What you'll learn

Use header, nav, main, footer
Understand why semantics matter
Improve SEO and accessibility

Semantic tags describe their meaning: <header> is the top, <nav> is navigation, <main> is core content, <footer> is the bottom. They don't look different, but they tell search engines and screen readers what each part of your page is for.

semantic.html

<header>
  <h1>My Site</h1>
</header>
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
<main>
  <p>Main content goes here.</p>
</main>
<footer>
  <p>© 2026 My Site</p>
</footer>

Output

browser

A page with a header, navigation links, main content area, and footer — visually simple but semantically meaningful.

🔎 Important: Search engines use semantic tags to understand your page structure — this directly affects rankings.

MDN — Semantics

Try it yourself

Convert a div-based layout into semantic tags (header, main, footer).

Lesson 07 Next Lesson

Introduction to CSS

15 min

What you'll learn

Link a stylesheet
Style with selectors
Change colors and text

CSS makes HTML look good. You select an element and apply rules: color, size, spacing, and more. The three ways to add CSS are inline, in a <style> tag, or — best practice — a separate .css file linked from your HTML.

style.css

/* style.css */
h1 {
  color: navy;
  font-family: Arial, sans-serif;
  text-align: center;
}
p {
  color: #444;
  line-height: 1.6;
}

Output

browser

Headings become navy, centered, and Arial font; paragraphs get dark gray with comfortable line spacing.

✓ Best Practice: Always use an external .css file — it keeps your HTML clean and lets you reuse styles everywhere.

MDN — CSS first steps

Try it yourself

Create a style.css that makes all h2 tags green and all paragraphs 18px.

Lesson 08 Next Lesson

CSS Colors & Fonts

12 min

What you'll learn

Use color names, hex, and rgb
Apply web-safe fonts
Style text with weight and size

Colors in CSS can be named (red), hex (#ff0000), or rgb(255, 0, 0). Fonts control how text looks — use font-family for the typeface, font-size for how big, and font-weight for boldness. Good typography makes pages readable and professional.

colors.css

body {
  background: #f5f5f5;
  color: #333;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}
h1 {
  color: #4338ca;
  font-weight: 700;
}
.accent {
  color: rgb(255, 183, 3);
}

Output

browser

A light gray page background with dark text, purple bold headings, and a class-based amber accent color.

💡 Tip: Stick to 2–3 fonts maximum per site — too many fonts slow the page and look messy.

MDN — CSS color

Try it yourself

Give the body a dark background with white text, and make a .highlight class yellow.

Lesson 09 Next Lesson

The CSS Box Model

15 min

What you'll learn

Understand margin, border, padding, content
Control spacing precisely
Debug layout with box model

Every element is a box: content at the center, padding inside the border, border around padding, margin outside. Mastering this model is the difference between layouts that 'just work' and ones that mysteriously overflow.

box.css

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 10px;
  border-radius: 8px;
}

Output

browser

A 200px-wide box with 20px inner spacing, a 2px border, 10px outer spacing, and rounded corners.

🔎 Important: Padding is inside the border, margin is outside — mixing them up is the #1 spacing bug.

MDN — The box model

Try it yourself

Create a box with 15px padding, 3px border, and 25px margin.

Lesson 10 Next Lesson

Flexbox Layout

18 min

What you'll learn

Center content easily
Arrange items in rows/columns
Build responsive layouts

Flexbox is the modern way to lay out items in one dimension — a row or a column. With display:flex, you can center things (the old nightmare), space them evenly, and make layouts that adapt. It's the tool you'll use most in real projects.

flex.css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 200px;
}
.box {
  width: 50px;
  height: 50px;
  background: #4338ca;
  border-radius: 8px;
}

Output

browser

Three purple boxes perfectly centered both horizontally and vertically with even 12px gaps.

✓ Best Practice: justify-content controls the main axis, align-items controls the cross axis — together they center anything.

MDN — Flexbox

Try it yourself

Use flexbox to put three boxes in a row with equal space between them.

Lesson 11 Next Lesson

Responsive Design with Media Queries

15 min

What you'll learn

Make pages mobile-friendly
Use breakpoints
Test responsive layouts

Responsive design means your site looks great on phones, tablets, and desktops. Media queries apply different CSS at different screen widths. A common breakpoint is 768px — below that, stack columns; above, show them side by side.

responsive.css

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Output

browser

Two side-by-side columns on desktop that automatically stack into one column on screens narrower than 768px.

🔎 Important: Always design mobile-first — it's easier to scale up than to squeeze down.

MDN — Responsive design

Try it yourself

Add a media query that turns a flex row into a column below 600px.

Lesson 12 Next Lesson

Introduction to JavaScript

15 min

What you'll learn

Add interactivity to pages
Run your first script
Understand what JS does

JavaScript makes pages interactive — clicks, animations, form checks, fetching data. It runs in the browser via a <script> tag. HTML is the skeleton, CSS the skin, and JavaScript the muscles that make things move.

script.js

<script>
  alert('Hello, World!');
  console.log('This appears in the console');
</script>

Output

browser

A popup alert saying 'Hello, World!' and a message logged to the browser's developer console.

💡 Tip: Open the console with F12 → Console tab to see console.log messages — your best debugging friend.

MDN — JS first steps

Try it yourself

Change the alert message and log your name to the console.

Lesson 13 Next Lesson

JavaScript Variables & Data Types

15 min

What you'll learn

Declare variables with let/const
Understand strings and numbers
Use basic operators

Variables store data. Use const for values that never change, let for values that do (avoid var — it's outdated). Main data types are strings (text in quotes), numbers, booleans (true/false), and arrays (lists).

variables.js

const name = 'Sufyan';
let age = 21;
age = age + 1;
const isStudent = true;
console.log(name, age, isStudent);

Output

browser

Sufyan 22 true

✓ Best Practice: Default to const — only use let when you know the value will change. Your future self will thank you.

MDN — Variables

Try it yourself

Create a const for your city and a let for your score, then add 5 to the score.

Lesson 14 Next Lesson

JavaScript Functions

15 min

What you'll learn

Write reusable functions
Pass arguments and return values
Avoid repeating code

Functions bundle code into reusable blocks. You define them once and call them anywhere — passing in arguments and getting back return values. Functions are how you keep code DRY (Don't Repeat Yourself).

functions.js

function greet(name) {
  return 'Hello, ' + name + '!';
}

const message = greet('Sufyan');
console.log(message);

Output

browser

Hello, Sufyan!

💡 Tip: A function should do one thing and do it well — if it's doing three things, split it.

MDN — Functions

Try it yourself

Write an add() function that takes two numbers and returns their sum.

Lesson 15 Next Lesson

DOM Manipulation

18 min

What you'll learn

Select elements with querySelector
Change text and styles
Add and remove content

The DOM (Document Object Model) is how JavaScript sees your HTML. With document.querySelector() you can grab any element and change its text, class, or style. This is how every dynamic website updates content without reloading.

dom.js

const heading = document.querySelector('h1');
heading.textContent = 'Updated title';
heading.style.color = 'green';

const btn = document.querySelector('button');
btn.textContent = 'Clicked!';

Output

browser

The h1 changes to 'Updated title' in green, and the button text becomes 'Clicked!'.

🔎 Important: querySelector returns the FIRST match — use querySelectorAll for all matches.

MDN — Manipulating documents

Try it yourself

Select a paragraph and change its text to 'I learned DOM!'.

Lesson 16 Next Lesson

JavaScript Events

18 min

What you'll learn

Handle clicks and input
Use addEventListener
Build interactive UI

Events are things that happen — clicks, typing, hovering. With addEventListener you run code when an event fires. This is the heart of interactivity: every button, form, and menu you've ever used works this way.

events.js

const button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

const input = document.querySelector('input');
input.addEventListener('input', function() {
  console.log('You typed:', input.value);
});

Output

browser

Clicking the button shows an alert; typing in the input logs each keystroke to the console.

✓ Best Practice: addEventListener is better than onclick= attribute — it separates behavior from markup and allows multiple handlers.

MDN — Events

Try it yourself

Add a click event to a button that changes its own text.

Lesson 17 Next Lesson

Developer Tools & Debugging

12 min

What you'll learn

Open DevTools (F12)
Inspect elements and styles
Use the console for errors

DevTools is your superpower. Right-click anything → Inspect to see its HTML and CSS. The Console shows errors and your console.log output. Learning to debug with DevTools saves hours of guessing when something doesn't look or work right.

debug.js

console.log('Checkpoint 1');
console.error('This is an error message');
console.table([{name:'A', age:1},{name:'B', age:2}]);

Output

browser

A log message, a red error message, and a formatted table in the Console panel.

💡 Tip: F12 → Console is the first place to look when JavaScript 'does nothing' — the error is usually right there.

MDN — Browser dev tools

Try it yourself

Open DevTools, inspect any element on your page, and change its color live.

Lesson 18 Next Lesson

Capstone: Personal Profile Page

30 min

What you'll learn

Combine HTML, CSS, and JS
Build a complete responsive page
Publish your first real project

Time to put everything together. You'll build a personal profile page: a header with your name, a photo, an about section, a list of skills, and a button that reveals a fun fact using JavaScript — all responsive with CSS.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Profile</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Sufyan Khan</h1>
  </header>
  <main>
    <img src="me.jpg" alt="My photo">
    <h2>About</h2>
    <p>I'm learning web development on DocoDive.</p>
    <h2>Skills</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <button id="funBtn">Click for a fun fact</button>
    <p id="fact"></p>
  </main>
  <script src="script.js"></script>
</body>
</html>

Output

browser

A complete personal profile page with name, photo, skills, and an interactive fun-fact button.

✓ Best Practice: This single project uses every skill from the course — finish it and you're officially a web developer in training.

MDN — Complete beginner project

Try it yourself

Add a script.js that shows a fun fact when the button is clicked.

Lesson 19

Beginner Projects

Apply everything you've learned. Click each project to open its full guide.

About this project

Build a beautiful recipe card using pure HTML and CSS. You'll lay out a food image, list ingredients, and write cooking steps in a clean, readable card that looks like a real recipe site.

What you'll practice

HTML structure CSS box model Lists Images Flexbox

Step-by-step: How it works

Create a div with class recipe-card.
Add an img at the top for the dish photo.
Use h2 for the recipe name.
List ingredients in a ul and steps in an ol.
Style with padding, border-radius, and shadow.
Use Flexbox to center the card.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Recipe Card</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f0fdf4;
      font-family: Arial, sans-serif;
    }
    .recipe-card {
      width: 320px;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .recipe-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    .recipe-content { padding: 20px; }
    h2 { margin: 0 0 8px; color: #166534; }
  </style>
</head>
<body>
  <div class="recipe-card">
    <img src="https://picsum.photos/320/180" alt="A delicious dish">
    <div class="recipe-content">
      <h2>Spicy Noodles</h2>
      <p>Quick 10-minute meal.</p>
      <h3>Ingredients</h3>
      <ul><li>Noodles</li><li>Chili sauce</li><li>Garlic</li></ul>
      <h3>Steps</h3>
      <ol><li>Boil noodles.</li><li>Stir-fry garlic.</li><li>Mix and serve.</li></ol>
    </div>
  </div>
</body>
</html>

Live Preview

browser — recipe card

🍜

Spicy Noodles

noodles chili garlic

About this project

Build a page with a button that changes the background to a random color every time it's clicked — your first real JavaScript interactivity.

What you'll practice

addEventListener querySelector Math.random()

Step-by-step

Select the button with querySelector.
Attach a click event.
Generate three random RGB values (0–255).
Set body.style.backgroundColor.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Color Changer</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      transition: background 0.3s ease;
    }
    button {
      padding: 14px 28px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      background: #1e1b4b;
      color: white;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <button id="changeColor">Change Color</button>
  <script>
    const btn = document.querySelector("#changeColor");
    btn.addEventListener("click", function() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      document.body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
    });
  </script>
</body>
</html>

Live Preview

browser — color changer

Animating — each click changes this color

About this project

Build a minimal to-do list — type a task, click Add, and it appears below. Combines DOM manipulation, events, and dynamic content.

What you'll practice

createElement appendChild input value

Step-by-step

Select input, button, and list.
On click, read and trim input value.
Create an li, set text, append.
Add a remove button that deletes the task.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List</title>
  <style>
    body { max-width: 400px; margin: 40px auto; font-family: Arial; }
    .input-row { display: flex; gap: 8px; margin-bottom: 16px; }
    input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 8px; }
    button { padding: 10px 16px; background: #0d9488; color: white; border: none; border-radius: 8px; cursor: pointer; }
    ul { list-style: none; padding: 0; }
    li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #eee; }
    .remove { background: #fee2e2; color: #dc2626; padding: 4px 10px; }
  </style>
</head>
<body>
  <h1>My To-Do List</h1>
  <div class="input-row">
    <input id="taskInput" type="text" placeholder="Add a task...">
    <button id="addTask">Add</button>
  </div>
  <ul id="taskList"></ul>
  <script>
    const input = document.querySelector("#taskInput");
    const addBtn = document.querySelector("#addTask");
    const list = document.querySelector("#taskList");
    addBtn.addEventListener("click", function() {
      const text = input.value.trim();
      if (!text) return;
      const li = document.createElement("li");
      li.textContent = text;
      const removeBtn = document.createElement("button");
      removeBtn.textContent = "Remove";
      removeBtn.className = "remove";
      removeBtn.addEventListener("click", () => li.remove());
      li.appendChild(removeBtn);
      list.appendChild(li);
      input.value = "";
    });
  </script>
</body>
</html>

Live Preview

browser — to-do list

My To-Do List

Learn HTML

Learn CSS

Learn JavaScript

You've completed all 20 lessons. Ready to level up?

Continue to Web Development Intermediate to master layouts, JavaScript, and APIs.

Continue to Intermediate Web Dev Hub

Web Development Beginner Course

What Is Web Development?

What you'll learn

Try it yourself

HTML Document Structure

What you'll learn

Try it yourself

Headings & Paragraphs

What you'll learn

Try it yourself

Links & Navigation

What you'll learn

Try it yourself

Images

What you'll learn

Try it yourself

Lists: Ordered & Unordered

What you'll learn

Try it yourself

HTML Forms Basics

What you'll learn

Try it yourself

Semantic HTML Tags

What you'll learn

Try it yourself

Introduction to CSS

What you'll learn

Try it yourself

CSS Colors & Fonts

What you'll learn

Try it yourself

The CSS Box Model

What you'll learn

Try it yourself

Flexbox Layout

What you'll learn

Try it yourself

Responsive Design with Media Queries

What you'll learn

Try it yourself

Introduction to JavaScript

What you'll learn

Try it yourself

JavaScript Variables & Data Types

What you'll learn

Try it yourself

JavaScript Functions

What you'll learn

Try it yourself

DOM Manipulation

What you'll learn

Try it yourself

JavaScript Events

What you'll learn

Try it yourself

Developer Tools & Debugging

What you'll learn

Try it yourself

Capstone: Personal Profile Page

What you'll learn

Try it yourself

Beginner Projects

Project 1 Recipe Card

About this project

What you'll practice

Step-by-step: How it works

Spicy Noodles

Project 2 Interactive Color Changer

About this project

What you'll practice

Step-by-step

Project 3 Simple To-Do List

About this project

What you'll practice

Step-by-step

My To-Do List

You've completed all 20 lessons. Ready to level up?

Account Verified!