HTML, CSS and JavaScript: What Each One Actually Does

Every explanation of HTML, CSS, and JavaScript uses the house analogy. That is because it is genuinely the clearest way to understand what each technology does and why you need all three.

HTML is the structure. It is the walls, the floors, the roof, the doors, and the windows. Without HTML, there is nothing. No page, no content, no place for anything to exist. HTML defines what is on the page: a heading here, a paragraph there, an image, a button, a form with input fields. It does not care how things look. It only cares about what things are. An HTML-only page is like a concrete shell with rooms but no paint, no furniture, and no running water.

CSS is the decoration and layout. It is the paint colour on the walls, the curtain fabric on the windows, the furniture arrangement in each room, and the lighting that sets the mood. CSS takes the bare structure that HTML created and makes it look good (or terrible, depending on your CSS skills). Without CSS, every website on the internet would look like a plain white document with black serif text and blue underlined links. CSS controls colours, fonts, spacing, layout, animations, shadows, and responsiveness (how the page adapts its layout on different screen sizes, like phone versus laptop).

JavaScript is the functionality. It is the plumbing that makes water flow when you turn the tap, the electricity that powers the lights, the doorbell that actually rings when someone presses the button. JavaScript makes the page interactive and alive. When you click a button and a dropdown menu appears, that is JavaScript. When you submit a form and it checks whether you entered a valid email before sending, that is JavaScript. When new content loads on the page without a full refresh, that is JavaScript. Without it, your website is a beautiful poster on a wall: nice to look at, but it cannot do anything.

A house with only HTML is a concrete shell. Add CSS and it is a beautifully decorated shell, but nothing works. Add JavaScript and the lights turn on, the doors open and close, the thermostat adjusts, and the whole place comes alive. That is how every website works. The three technologies are always present, always working together.

HTML stands for HyperText Markup Language. The word "markup" is the key. You are marking up content to tell the browser what each piece of text is. Is this a heading? A paragraph? A link? An image? A list item? HTML answers those questions using tags.

Here is a simple example:

<h1>Welcome to My Website</h1>
<p>This is a paragraph of text. It can be as long as you want.</p>
<img src="photo.jpg" alt="A description of the photo">
<a href="https://mctaba.com">Visit McTaba</a>
<button>Click Me</button>

Every piece of HTML uses tags wrapped in angle brackets (< >). Most tags come in pairs: an opening tag (<h1>) and a closing tag (</h1>). The content goes between them. A few tags, like <img>, are self-closing because they do not wrap around text content.

The most common HTML tags you will use, and you will use these every single day:

• <h1> through <h6> for headings (h1 is the biggest and most important, h6 is the smallest)
• <p> for paragraphs of text
• <a> for links to other pages
• <img> for images
• <div> for generic containers that group elements together for layout and styling
• <ul> and <li> for unordered lists (bullet points)
• <form>, <input>, and <button> for forms and user input
• <nav>, <header>, <footer>, <main>, <section>, <article> for semantic structure (telling the browser what role each part of the page plays)

HTML is not difficult. It is repetitive and pattern-based. After a week or two of writing it, you will know the common tags by heart without thinking about it. The real skill is not memorising tags. It is choosing the right tag for the right content. Using <nav> for your navigation menu, <article> for blog post content, and <footer> for your footer makes your page accessible to screen readers and understandable to search engines. Using <div> for everything technically works but is considered bad practice.

CSS stands for Cascading Style Sheets. "Cascading" means styles flow downward: if you set a font on the body element, every element inside the body inherits that font unless you specifically override it. "Style Sheets" means CSS is a separate layer from your HTML. Structure in one place, appearance in another.

Here is a simple example:

h1 {
  color: #153564;
  font-size: 36px;
  text-align: center;
}

p {
  color: #333333;
  font-size: 18px;
  line-height: 1.6;
}

button {
  background-color: #fc8436;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #e5702a;
}

Each block has a selector (the element you are targeting, like h1 or button), curly braces, and a set of property-value pairs inside. color: #153564; says "make the text this navy colour." padding: 12px 24px; says "add 12 pixels of space on top and bottom, 24 pixels on left and right." button:hover says "when the mouse hovers over the button, use these styles instead."

CSS is where many beginners get frustrated, and not because the concepts are hard. The syntax is straightforward. The frustration comes from CSS not always behaving the way you expect. You centre something and it does not look centred. You change a margin and the element below it jumps in the wrong direction. You set a width and the element overflows its container. Layout (how elements are positioned relative to each other) is the hardest part of CSS by far.

Two layout tools make CSS dramatically easier: Flexbox (for one-dimensional layouts, like arranging items in a row or column) and CSS Grid (for two-dimensional layouts, like a page with a sidebar and a content area). Learn Flexbox first. It solves the majority of layout problems you will face as a beginner. Add Grid when you need more complex arrangements.

In modern development, many teams use Tailwind CSS, a utility-first framework that lets you write styles directly in your HTML using short class names:

<button class="bg-orange-500 text-white px-6 py-3 rounded-lg hover:bg-orange-600">
  Click Me
</button>

You do not need to learn Tailwind on day one. But know that it exists and is increasingly standard in professional projects. Once you understand core CSS concepts, Tailwind is a fast and productive way to apply them.

JavaScript is the only one of the three that is a real programming language. HTML is a markup language (it describes structure). CSS is a styling language (it describes appearance). JavaScript is where you write actual logic: if this condition is true, do that. Loop through this list of items. Store this piece of data in a variable. Calculate the total price. Send a request to the server and handle the response.

Here is a simple example:

// Store some data in variables
let userName = 'Kiptoo';
let cartTotal = 4500;

// A function that greets someone
function greet(name) {
  return 'Hello, ' + name + '! Welcome back.';
}

// Use the function
console.log(greet(userName));
// Output: Hello, Kiptoo! Welcome back.

// Conditional logic
if (cartTotal > 5000) {
  console.log('You qualify for free delivery!');
} else {
  console.log('Add KES ' + (5000 - cartTotal) + ' more for free delivery.');
}
// Output: Add KES 500 more for free delivery.

// Get a button from the page and make it do something
const button = document.querySelector('#checkout-btn');
button.addEventListener('click', function() {
  alert('Processing your order...');
});

This is where the real programming concepts live: variables (storing data), functions (reusable blocks of code), conditionals (if/else decisions), loops (repeating actions), arrays (ordered lists of things), and objects (structured collections of related data). These concepts are not unique to JavaScript. They exist in every programming language. Once you learn them in JavaScript, picking up Python, Java, Go, or any other language is significantly faster because you already understand the underlying logic.

JavaScript is where most beginners spend the bulk of their learning time. HTML and CSS can be grasped in a few weeks. JavaScript takes months to become comfortable with, and years to use with real fluency. That is normal. The language has quirks and rough edges (like the difference between == and ===, or the bizarre behaviour of this in different contexts) that even experienced developers complain about.

The payoff is worth the struggle. JavaScript is the most versatile language in web development. With JavaScript alone, you can build the frontend (React, Vue, Angular), the backend (Node.js), mobile apps (React Native), and desktop apps (Electron). No other single language opens as many doors in the web development world. That is why it is the first language McTaba and most modern programmes teach.

In a real project, HTML, CSS, and JavaScript live in separate files that are connected together. Here is what a basic project structure looks like:

my-website/
  index.html     (structure)
  styles.css     (styling)
  script.js      (behaviour)

Your HTML file references the other two:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
  <p id="greeting">Click the button to get a personalised greeting.</p>
  <input type="text" id="name-input" placeholder="Enter your name">
  <button id="greet-btn">Greet Me</button>

  <script src="script.js"></script>
</body>
</html>

The CSS file styles the elements:

body { font-family: 'Montserrat', sans-serif; padding: 40px; }
h1 { color: #153564; }
#greet-btn {
  background: #fc8436;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#greet-btn:hover { background: #e5702a; }
#name-input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; }

The JavaScript file adds behaviour:

const button = document.getElementById('greet-btn');
const input = document.getElementById('name-input');
const greeting = document.getElementById('greeting');

button.addEventListener('click', function() {
  const name = input.value.trim();
  if (name) {
    greeting.textContent = 'Hello, ' + name + '! Welcome to my site.';
  } else {
    greeting.textContent = 'Please enter your name first!';
  }
});

When the browser loads this page, it reads the HTML first and builds the structure. Then it reads the CSS and applies the visual styling. Then it reads the JavaScript and attaches the interactive behaviour. The result: a page where the heading is navy, the button is orange, and clicking the button after typing your name produces a personalised greeting.

This separation of concerns (structure, style, behaviour in different files) is a foundational principle of web development. It keeps your code organised, readable, and maintainable. As your projects grow larger, you will use frameworks like React that blend these together inside component files, but the underlying principle stays the same: HTML defines what exists, CSS defines how it looks, JavaScript defines what it does.

Learn them in this order: HTML, then CSS, then JavaScript. There is no shortcut that skips any of them, and here is why the order matters.

Weeks 1 to 2: HTML. Learn the basic tags, how to structure a page, how headings work, how links and images work, and how forms accept user input. Build a few simple pages: a personal bio page, a recipe page with ingredients and steps, a list of your favourite things. These pages will look plain and ugly because you have no CSS yet. That is expected and fine. The entire goal at this stage is getting comfortable with HTML structure and understanding how browsers interpret your markup.

Weeks 3 to 6: CSS. Learn selectors, the box model (every element is a box with margin, border, padding, and content), Flexbox for layout, and media queries for responsive design (making pages look good on both phones and desktops). Take the HTML pages you already built and make them look professional. This is the stage where you will feel the most creative satisfaction early on, because you can take something plain and make it look genuinely good with just a few CSS rules.

Weeks 7 onward: JavaScript. Start with the fundamentals: variables, data types, functions, conditionals, loops, arrays, objects. Then learn DOM manipulation (using JavaScript to find, create, change, and remove elements on the page). Then move into more advanced topics: API calls with fetch, asynchronous programming with async/await, error handling, and eventually a framework like React that makes building complex interfaces manageable.

Do not try to learn all three simultaneously from day one. Each one builds on the previous. Without HTML, there is nothing for CSS to style. Without CSS, your JavaScript projects will look broken and unfinished even when they work perfectly. Without JavaScript, your pages are static documents that cannot respond to anything a user does.

One common mistake goes the other direction: spending too long perfecting HTML and CSS before starting JavaScript. You do not need to be a CSS master before writing your first line of JavaScript. Once you can build a page that looks reasonably good and is structured correctly, start JavaScript. You will keep improving your CSS skills alongside JavaScript for the rest of your career. Nobody ever "finishes" learning CSS. Professionals with 15 years of experience still look things up.

Once you have a solid working knowledge of HTML, CSS, and JavaScript (which takes roughly 3 to 4 months of consistent practice), the next step is learning a framework. Frameworks are pre-built tools that handle common patterns, so you can build complex applications faster instead of reinventing the wheel for every project.

For CSS: Tailwind CSS is the most popular utility-first CSS framework in 2026. Instead of writing CSS in a separate file, you apply utility classes directly to your HTML elements. It is fast, consistent, and increasingly standard in professional teams. Bootstrap is an older alternative that is still used but declining in popularity. Both save you from writing repetitive CSS by hand.

For JavaScript: React is the most widely used frontend framework and the most in-demand skill in both the African and global job markets. Vue.js and Angular are alternatives with their own strengths. McTaba teaches React because it has the largest community, the most job opportunities, the richest ecosystem of third-party libraries, and pairs naturally with Node.js for full stack development.

Frameworks are not replacements for HTML, CSS, and JavaScript. They are built on top of them. A React developer is still writing JavaScript (or TypeScript). A Tailwind developer is still applying CSS concepts. The fundamentals you learn now are what make frameworks make sense later. If you skip the fundamentals and jump straight to React, the framework becomes a confusing black box. You will copy-paste code that works without understanding why it works, and when it breaks, you will not know how to fix it.

If you are just starting out, resist the urge to jump to frameworks immediately. Spend a few weeks with plain HTML, CSS, and JavaScript. Build a couple of projects without any framework. Get comfortable with the DOM, with event listeners, with fetching data using the native fetch function. Then, when you start React, you will understand what problems it is solving and why its patterns (components, state, props) exist. That understanding is the difference between a developer who uses React and a developer who actually understands React.

For a deeper look at how frontend fits into the larger picture of building complete applications, see our guide on what full stack development actually means. For deciding whether to focus on the frontend side or the backend side first, see frontend vs backend: which should you learn first.