← Back to Articles

Getting Started with Web Development: HTML, CSS, and JavaScript

The web is built on three core technologies: HTML, CSS, and JavaScript. Together, they make up nearly every website and web application you have ever used. If you want to learn web development, understanding these three technologies is the essential first step.

This guide introduces each one, explains how they work together, and provides examples and exercises to help you start building your own web pages.

How the Web Works (A Brief Overview)

When you visit a website:

  1. You type a URL (like www.example.com) into your browser
  2. Your browser sends a request to a web server — a computer that stores the website’s files
  3. The server sends back the website’s files — HTML, CSS, JavaScript, images, etc.
  4. Your browser reads these files and renders (displays) the web page

The three languages have distinct roles:

  • HTML: Defines the structure and content (text, images, links, headings)
  • CSS: Defines the appearance and layout (colors, fonts, spacing, positioning)
  • JavaScript: Defines the behavior and interactivity (animations, form validation, dynamic content)

Think of it like building a house:

  • HTML = the walls, rooms, and foundation (structure)
  • CSS = the paint, furniture, and decorations (style)
  • JavaScript = the plumbing, electricity, and smart devices (functionality)

Part 1: HTML (HyperText Markup Language)

HTML is the standard language for creating web pages. It uses tags (enclosed in angle brackets) to define elements on the page.

Basic HTML Structure

Every HTML page follows this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Let’s break this down:

  • <!DOCTYPE html> — Tells the browser this is an HTML5 document
  • <html> — The root element that contains everything
  • <head> — Contains metadata (information about the page, not displayed on screen)
  • <title> — Sets the text shown in the browser tab
  • <body> — Contains the visible content of the page

Common HTML Elements

Headings

HTML has six levels of headings, from <h1> (most important) to <h6> (least important):

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Paragraphs and Text

<p>This is a paragraph of text.</p>
<strong>This text is bold.</strong>
<em>This text is italic.</em>
<a href="https://www.example.com">Click here to visit Example.com</a>

The href attribute specifies the URL the link points to.

Images

<img src="photo.jpg" alt="A description of the image">

The alt attribute provides alternative text for screen readers and when the image cannot be displayed — it is important for accessibility.

Lists

<!-- Unordered (bullet) list -->
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Divisions and Spans

<div>A block-level container for grouping content</div>
<span>An inline container for styling a portion of text</span>

Semantic HTML

Modern HTML includes semantic elements that describe the meaning of content, not just its appearance:

<header>Site header content</header>
<nav>Navigation links</nav>
<main>Main content of the page</main>
<article>A self-contained piece of content</article>
<section>A thematic grouping of content</section>
<aside>Sidebar or tangential content</aside>
<footer>Site footer content</footer>

Using semantic elements improves accessibility (screen readers understand your page better), SEO (search engines can better index your content), and maintainability (developers can understand the structure more easily).

Part 2: CSS (Cascading Style Sheets)

CSS controls how HTML elements look — colors, fonts, sizes, spacing, layout, and more.

Adding CSS to HTML

There are three ways to add CSS:

1. Inline (directly on an element — not recommended for most cases):

<p style="color: blue; font-size: 18px;">Blue text</p>

2. Internal (in the <head> section):

<head>
    <style>
        p { color: blue; font-size: 18px; }
    </style>
</head>

3. External (in a separate .css file — best practice):

<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS Syntax

A CSS rule has a selector (what to style) and a declaration block (how to style it):

selector {
    property: value;
    property: value;
}

Example:

h1 {
    color: #333333;
    font-size: 32px;
    text-align: center;
}

Common CSS Properties

Colors and Backgrounds

color: #333;                    /* Text color */
background-color: #f0f0f0;     /* Background color */
background-image: url('bg.jpg'); /* Background image */

Colors can be specified as:

  • Named colors: red, blue, darkgreen
  • Hex codes: #FF5733, #333
  • RGB: rgb(255, 87, 51)
  • HSL: hsl(14, 100%, 60%)

Typography

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
text-align: center;
text-decoration: underline;

Spacing (The Box Model)

Every HTML element is a rectangular box with:

  • Content: The actual text or image
  • Padding: Space between the content and the border
  • Border: A line around the padding
  • Margin: Space outside the border
.box {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px;
    width: 300px;
}

CSS Selectors

/* Element selector */
p { color: blue; }

/* Class selector (for multiple elements) */
.highlight { background-color: yellow; }

/* ID selector (for one unique element) */
#main-title { font-size: 36px; }

/* Descendant selector */
article p { line-height: 1.8; }

/* Multiple selectors */
h1, h2, h3 { font-family: Georgia, serif; }

In HTML, you apply classes and IDs like this:

<p class="highlight">This paragraph is highlighted.</p>
<h1 id="main-title">Welcome</h1>

CSS Layout: Flexbox

Flexbox is the modern way to create layouts in CSS:

.container {
    display: flex;
    justify-content: space-between;  /* Horizontal alignment */
    align-items: center;              /* Vertical alignment */
    gap: 20px;                        /* Space between items */
}
<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Responsive Design

Responsive design makes websites look good on all screen sizes. The key tool is the media query:

/* Default styles (mobile first) */
.container {
    display: flex;
    flex-direction: column;
}

/* Styles for screens 768px and wider */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

Part 3: JavaScript

JavaScript adds interactivity to web pages. It can respond to user actions, manipulate the DOM (Document Object Model), fetch data from servers, and much more.

Adding JavaScript to HTML

<!-- Internal script -->
<script>
    alert('Hello, World!');
</script>

<!-- External script (best practice) -->
<script src="script.js"></script>

Variables

// Modern JavaScript uses let and const
let score = 0;        // Can be changed later
const maxScore = 100; // Cannot be changed

score = 50;           // OK
// maxScore = 200;    // Error! const cannot be reassigned

Data Types

let name = "Alice";       // String
let age = 15;             // Number
let isStudent = true;     // Boolean
let grades = [90, 85, 92]; // Array
let person = {             // Object
    name: "Alice",
    age: 15
};

Functions

// Function declaration
function greet(name) {
    return "Hello, " + name + "!";
}

// Arrow function (modern syntax)
const greet = (name) => {
    return `Hello, ${name}!`;
};

// Using the function
console.log(greet("Alice")); // "Hello, Alice!"

Conditionals

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}

Loops

// For loop
for (let i = 0; i < 5; i++) {
    console.log("Count: " + i);
}

// Iterating over an array
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
    console.log(fruit);
}

DOM Manipulation

JavaScript can interact with HTML elements using the DOM (Document Object Model):

// Select an element
let heading = document.querySelector("h1");

// Change its text
heading.textContent = "New Title!";

// Change its style
heading.style.color = "blue";

// Add an event listener
let button = document.querySelector("#myButton");
button.addEventListener("click", function() {
    alert("Button was clicked!");
});

A Complete Example

Here is a simple interactive page that combines HTML, CSS, and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f4f8;
        }
        .counter {
            text-align: center;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .count {
            font-size: 64px;
            font-weight: bold;
            color: #333;
            margin: 20px 0;
        }
        button {
            font-size: 18px;
            padding: 10px 24px;
            margin: 0 8px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            color: white;
        }
        .increment { background-color: #27ae60; }
        .decrement { background-color: #e74c3c; }
        .reset { background-color: #3498db; }
    </style>
</head>
<body>
    <div class="counter">
        <h1>Simple Counter</h1>
        <div class="count" id="count">0</div>
        <button class="decrement" id="decrementBtn">- 1</button>
        <button class="reset" id="resetBtn">Reset</button>
        <button class="increment" id="incrementBtn">+ 1</button>
    </div>

    <script>
        let count = 0;
        const countDisplay = document.getElementById("count");

        document.getElementById("incrementBtn").addEventListener("click", () => {
            count++;
            countDisplay.textContent = count;
        });

        document.getElementById("decrementBtn").addEventListener("click", () => {
            count--;
            countDisplay.textContent = count;
        });

        document.getElementById("resetBtn").addEventListener("click", () => {
            count = 0;
            countDisplay.textContent = count;
        });
    </script>
</body>
</html>

This creates a simple counter that lets you increment, decrement, and reset a number — using all three web technologies together.

Learning Path: Where to Go From Here

Once you are comfortable with the basics of HTML, CSS, and JavaScript, here is a suggested path forward:

Foundational Skills

  1. HTML & CSS: Build several complete pages from scratch
  2. Responsive Design: Learn Flexbox and CSS Grid
  3. JavaScript Fundamentals: Variables, functions, loops, arrays, objects, DOM manipulation

Intermediate Skills

  1. Git & GitHub: Version control for managing your code
  2. CSS Frameworks: Bootstrap or Tailwind CSS for faster styling
  3. JavaScript ES6+: Modern syntax, promises, async/await, modules
  4. APIs: Fetching data from external services

Advanced Skills

  1. Front-End Frameworks: React, Vue, or Svelte
  2. Back-End Development: Node.js, Python (Django/Flask), or similar
  3. Databases: SQL (PostgreSQL, MySQL) or NoSQL (MongoDB)
  4. Deployment: Hosting your projects on the internet

Free Resources for Learning

  • MDN Web Docs (developer.mozilla.org): The definitive reference for HTML, CSS, and JavaScript
  • freeCodeCamp (freecodecamp.org): Free, project-based curriculum
  • The Odin Project (theodinproject.com): Full-stack curriculum with real-world projects
  • CSS-Tricks (css-tricks.com): Excellent CSS tutorials and guides
  • JavaScript.info: Comprehensive JavaScript tutorial

Tips for Beginners

  1. Build things: The fastest way to learn is to build projects, not just read tutorials
  2. Start simple: Begin with a personal homepage, then add features as you learn
  3. Read error messages: They often tell you exactly what went wrong
  4. Use browser developer tools: Right-click → Inspect to see the HTML and CSS of any website
  5. Do not memorize everything: Professional developers look things up constantly — that is normal
  6. Be patient: Web development has a lot of concepts. Give yourself time to absorb them
  7. Join a community: Forums, Discord servers, and local meetups can provide support and motivation

Practice Exercise

Create a simple “About Me” page using what you have learned:

  1. Create an HTML file with a proper structure
  2. Add a heading with your name
  3. Add a paragraph about yourself
  4. Add a list of your hobbies
  5. Include an image (or a placeholder)
  6. Add a link to a website you like
  7. Style everything with CSS — choose colors, fonts, and spacing
  8. Add one interactive feature with JavaScript (a button that shows a fun fact, a dark mode toggle, etc.)

Web development is one of the most accessible and rewarding skills you can learn. With nothing more than a text editor and a web browser, you can create things that millions of people can see and use. Start building today — your first web page is waiting.