Daniel Mutai
Co-founder and tech lead, SpaceFix Digitals
Key Takeaways (TL;DR)
- HTML is the technology responsible for structure; it’s analogous to the skeleton in anatomy.
- CSS is a styling technology; we define the aesthetic features of our pages using it.
- JavaScript is where we get to the heart of front-end development and make sure that everything works as intended.
- These 3 are considered the pillars of the web.
From zero to actually understanding what's going on
Allow me to make a bold assertion: you’re not a visitor to the web. As a matter of fact, it’s the reason you’re reading this right now; it’s a wonderful piece of technology that continues to bring the world closer to each and every one of us. If I wanted to know more about a topic, I could whip out my device, head over to google (or any other browser) and type out my inquiry, and as though magic, I’m met with an answer or something close to that; the browser does a great job in bridging those millions of documents scattered across the globe, fetching them from their respective computers to where I am. But what really is underneath the hood, what really happens when I type an inquiry to me receiving it? Turns out, a lot, but we shall cover that in a later segment. Today, we’ll turn our focus to a question that’s perhaps equally important: What are those files made of?
Web files come in all shapes and sizes, made up of various technologies, but perhaps 3 of the most fundamental technologies that never seem to miss in any of the development process are: HTML, CSS and JavaScript. These 3 are considered the pillars of the web, whilst webpages can consist of more technologies, it’s very rare to find any of these lacking in the process. From a local website to Google itself, these are the blueprints of the web.
HTML
HTML is the technology responsible for structure; it’s analogous to the skeleton in anatomy. This technology is primarily responsible for the content within your files.
CSS
CSS is a styling technology; we define the aesthetic features of our pages using it. By combining HTML with CSS, we get something that seems presentable, but does it function?
JavaScript
JavaScript is where we get to the heart of front-end development and make sure that everything works as intended. When you press that button, something happens, and when you scroll a feature is unveiled. JavaScript is all about functionality.
We'll go through each technology one at a time, explaining what it does in plain English and exploring real code examples, to give you the mental model to understand them when you see in the wild.
📋 Table of Contents
Part 1: HTML — The Skeleton of the Web
• 1.1 What is HTML? • 1.2 Tags: The Building Blocks • 1.3 The Head and the Body • 1.4 What Goes in the Head? • 1.5 What Goes in the Body? • 1.6 Generic vs. Semantic Tags • 1.7 Divs, Classes, and IDsPart 2: CSS — Giving It Style
• 2.1 What is CSS? • 2.2 Selectors: Pointing at HTML Elements • 2.3 Three Ways to Add CSS • 2.4 The Box Model • 2.5 Colour Systems • 2.6 Keyframes & Animations • 2.7 Media Queries & Responsive DesignPart 3: JavaScript — Making It Come Alive
• 3.1 What is JavaScript? • 3.2 The DOM: The Bridge Between JS and HTML • 3.3 Variables: Storing Information • 3.4 Functions: Reusable Actions • 3.5 Logic: Making Decisions • 3.6 Reading JS Code as a BeginnerPutting It All Together
Part 1: HTML — The Skeleton of the Web
HTML stands for Hyper Text Markup Language. And it's a language that marks up text (quite literally) to give it structure. It tells the browser: 'This is a heading. This is a paragraph. This is an image. This is a link.'
As the name suggests, this isn’t a programming language; we can't do maths, make decisions, describe or ascribe logic, but only describe content. Hence, it’s categorised as a markup language
1.2 Tags: The Building Blocks
Everything in HTML is built with tags. A tag is a keyword wrapped in angle brackets:
<tagname> This is the content </tagname>
Notice there are two tags: an opening tag and a closing tag (the closing one has a forward slash /). The content sits between them. This pair is called an element.
Here are some of the most common tags you'll encounter:
<h1>This is the biggest heading</h1> <h2>This is a slightly smaller heading</h2> <h3>And even smaller...</h3> <p>This is a paragraph of text.</p> <a href="https://example.com">Click here (a link)</a> <img src="photo.jpg" alt="A description of the image"> <ul> <!-- unordered list --> <li>First item</li> <li>Second item</li> </ul> <button>Click me!</button>
Tags can also carry attributes, which give extra information and are placed inside the opening tag. In the examples above, href is an attribute of the <a> tag telling it where to go, and src is an attribute of <img> telling it what image to show.
1.3 The Head and the Body
Every HTML document follows a standard skeleton. It looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Invisible setup info goes here -->
<title>My First Webpage</title>
</head>
<body>
<!-- Everything the user SEES goes here -->
<h1>Hello, World!</h1>
<p>Welcome to my page.</p>
</body>
</html>The first line, <!DOCTYPE html>, just tells the browser: 'Hey, this is an HTML5 document.' Always include it.
The <html> tag wraps everything. It's the root of the entire page, and lang=”en” is HTML’s way of telling the browser that the content below it is in English.
Inside it, you'll always find two main sections: <head> and <body>.
1.4 What Goes in the Head?
The <head> section is the behind-the-scenes area. Users don't see any of it rendered directly on the page, but it's critically important. Here's what typically lives there:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A page about web development"> <title>My Awesome Website</title> <link rel="stylesheet" href="styles.css"> <script src="app.js" defer></script> </head>
- <meta charset> — tells the browser what character set to use (UTF-8 handles almost every language on earth).
- <meta viewport> — makes the page work properly on mobile phones.
- <meta description> — the text that shows up under your site's title in Google search results.
- <title> — the text that appears on the browser tab. This is also what gets bookmarked.
- <link rel='stylesheet'> — connects your CSS file (styling) to this HTML page.
- <script src='...'> — connects your JavaScript file to the page.
1.5 What Goes in the Body?
The <body> is where everything visible lives. Text, images, buttons, forms, navigation bars , everything we want to communicate to the viewer is built here.
<body>
<header>
<h1>My Travel Blog</h1>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>My Trip to Nairobi</h2>
<p>What an incredible city...</p>
<img src="nairobi.jpg" alt="Nairobi skyline">
</article>
</main>
<footer>
<p>© 20 26 My Blog</p>
</footer>
</body>1.6 Generic vs. Semantic Tags
This is one of the most important distinctions in modern HTML. Some tags carry meaning about the content they hold; these are called semantic tags. Others are completely neutral; these are generic containers.
Generic Tags
The two most common generic tags are <div> and <span>. They mean absolutely nothing on their own and can be thought of just boxes for grouping things.
- <div> is a block-level container (takes up the full width, starts on a new line).
- <span> is an inline container (sits within a line of text, like highlighting a word).
<div> <span>This word</span> is highlighted differently. </div>
Semantic Tags
Semantic tags describe the purpose of the content inside them. They're better for accessibility (screen readers understand them) and SEO (Google understands your page structure).
1.7 Divs, Classes, and IDs
You'll see the words class and id constantly in HTML. They're attributes (extra information given to an element, if you might recall, in this case, it’s more of a label) you attach to tags to give them a name, so CSS and JavaScript can target them later.
<!-- Using a class (reusable; many elements can share it) --> <div class="card"> <h2 class="card-title">Article Title</h2> <p class="card-text">Some text here...</p> </div> <!-- Using an id (unique; only ONE element should have it) --> <button id="submit-btn">Submit</button>
- Classes are like a category label. Many elements can share the same class. Use it for styling groups of similar things.
- Id’s are like a unique name. Only one element on the page should have a given ID. Use it when you need to target a very specific single element.
Part 2: CSS — Giving It Style
CSS stands for Cascading Style Sheets. And this technology deals primarily with the aesthetics of a page. CSS is responsible for making things look good, adding: colours, fonts, layout, spacing, animations, and responsiveness.
It works by targeting HTML elements and applying visual rules to them. Each rule says: 'Find this element, and make it look like this.'
2.2 Selectors: Pointing at HTML Elements
Before you can style something, you have to select it. CSS selectors are how you point at HTML elements. Here are the main types:
/* Targeting using an element name eg every <p> tag on the page */
p {
color: navy;
}
/* Targeting using classes eg elements with class="card" */
.card {
background-color: white;
border-radius: 8px;
}
/* Targeting using ID’s eg the element with id="submit-btn" */
#submit-btn {
background-color: green;
color: white;
}
/* Targeting anchor tags on special states eg <a> tags ONLY when hovered over */
a:hover {
color: red;
text-decoration: underline;
}
/* Targeting elements within a class scope eg <p> tags that are INSIDE a .card */
.card p {
font-size: 14px;
}The pattern for a CSS rule is always:
selector {
property: value;
another-property: another-value;
}- selector — what to target
- property — what aspect to change (colour, size, font, etc.)
- value — what to change it to
2.3 Three Ways to Add CSS
There are three ways you can apply CSS to HTML. From least recommended to most recommended:
1. Inline CSS — directly on the element
<p style="color: red; font-size: 18px;">This text is red.</p>
CSS written directly inside the HTML tag using the style attribute. This works, but it's messy. Imagine doing this for hundreds of elements, your HTML file becomes unreadable. Use it sparingly, only when truly needed for a one-off style.
2. Internal (On-Page) CSS: inside a <style> tag in the <head>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
.card {
border: 1px solid #ccc;
}
</style>
</head>CSS written in a <style> block inside the <head>. Better than inline for all your styles are in one place on the page. Good for small single-page projects.
3. External CSS: a separate .css file (recommended)
/* In your HTML file: */
<link rel="stylesheet" href="styles.css">
/* In your styles.css file: */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
h1 {
color: #1E40AF;
}CSS written in a completely separate file and linked to the HTML page. This is the professional standard. Your HTML stays clean, your CSS stays organised, and you can link the same stylesheet to multiple pages.
2.4 The Box Model
This is one of the most fundamental concepts in CSS. Every single HTML element , a paragraph, a button, a div, is treated as a box. And that box has four layers:
MARGIN
BORDER
PADDING
CONTENT
Hover over each layer to explore
.card {
width: 300px; /* content width */
padding: 20px; /* space inside the border */
border: 2px solid #ccc; /* the visible border */
margin: 16px; /* space outside the element */
}2.5 Colour Systems
CSS lets you specify colours in multiple ways. Each has its uses:
Interactive Colour Explorer
Keyword
red
Hex
#1E40AF
RGB
rgb(30, 64, 175)
RGBA
rgba(0,0,0, 0.5)
2.6 Keyframes & Animations
CSS can animate elements without any JavaScript! You do this in two steps: define the animation using @keyframes, then apply it to an element.
/* Step 1: Define what the animation does */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px); /* starts 20px above */
}
to {
opacity: 1;
transform: translateY(0); /* ends in normal position */
}
}
/* Step 2: Apply it to an element */
.card {
animation: slideIn 0.5s ease-in-out;
/* name duration timing */
}You can define multiple steps using percentages instead of just from/to:
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}2.7 Media Queries & Responsive Design
Ever been to a website and the content appears huge or extends past the screen bleeds and yet some appear to stay right in place? That’s the difference responsive design makes. Media queries let you apply different CSS rules depending on the screen size.
/* 1. DEFAULT STYLES (Mobile-First Approach)
We write the base CSS for the smallest screens first.
No special rules are needed for these default styles.
*/
.container {
width: 100%;
padding: 16px;
}
/* 2. THE '@' RULE: MEDIA QUERIES
We use the '@' symbol to declare special CSS rules.
'@media' tells the browser to only apply the styles inside the
curly braces IF a certain condition is met.
Condition: (min-width: 768px)
Translation: "Apply this CSS only when the screen is 768px or wider."
*/
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto; /* Centers the container horizontally */
}
}
/* We can add as many media queries as we need for larger screens.
This one targets desktop layouts.
*/
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/*
======================================================
3. THE '@' RULE: ANIMATIONS (@keyframes)
======================================================
To create an animation, we use the '@keyframes' rule followed
by a custom name for our animation (like 'fadeIn').
Inside, we define what the element should look like at the
start (0%) and at the end (100%) of the animation.
*/
@keyframes fadeIn {
0% {
opacity: 0; /* The element starts out completely invisible */
}
100% {
opacity: 1; /* The element becomes fully visible */
}
}
/* 4. APPLYING THE ANIMATION
Creating the @keyframes doesn't do anything until we attach it
to an element. We do this using the 'animation' property.
*/
.container {
/* This tells the container to use the 'fadeIn' animation we
created above, making it last for 2 seconds (2s).
*/
animation: fadeIn 2s ease-in-out;
}The key breakpoints most developers use:
< 576px
Mobile
576-768
Lg Phone
768-992
Tablet
992-1200
Laptop
> 1200px
Desktop
Part 3: JavaScript : Making It Come Alive
JavaScript (JS) is where things get exciting. HTML and CSS are static — once the page loads, they don't change. JavaScript makes the page interactive and dynamic.
Clicking a button and a menu appears - JavaScript. Typing in a search box and results appear instantly - JavaScript. A countdown timer on a webpage -JavaScript.
Unlike HTML and CSS, JavaScript is a real programming language. It can make decisions, repeat actions, remember data, and talk to servers.
3.2 The DOM: The Bridge Between JS and HTML
When a browser loads your HTML, it creates an internal model of the page called the DOM — the Document Object Model. Think of it as the browser's live memory of the page structure.
JavaScript talks to and modifies this live model. When JS changes the DOM, the page updates instantly — without reloading.
// Find an element on the page
const title = document.querySelector('h1');
// Change its text
title.textContent = 'Hello from JavaScript!';
// Change its style
title.style.color = 'red';
// Find a button and listen for a click
const btn = document.querySelector('#submit-btn');
btn.addEventListener('click', function() {
alert('Button was clicked!');
});3.3 Variables: Storing Information
Variables are containers that hold data. In modern JavaScript, you'll see three keywords to declare variables:
// let — for values that WILL change let score = 0; score = score + 10; // can reassign // const — for values that WON'T change const siteName = 'My Blog'; // siteName = 'Other Blog'; // This would cause an error // var — the old way (avoid in modern code) var oldStyleVariable = 'from the past';
JavaScript variables can hold different types of data:
let name = 'Amina'; // String (text)
let age = 25; // Number
let isLoggedIn = true; // Boolean (true or false)
let hobbies = ['reading', 'coding', 'hiking']; // Array (a list)
let user = { // Object (a collection of named data)
name: 'Amina',
age: 25,
city: 'Nairobi'
};
// Accessing data:
console.log(user.name); // 'Amina'
console.log(hobbies[0]); // 'reading' (arrays start at index 0)3.4 Functions: Reusable Actions
A function is a reusable block of code that performs a task. You define it once, then call it (run it) whenever you need it.
// 1. DECLARING A FUNCTION
// Think of 'name' as a placeholder or a "mailbox" (called a parameter).
// It waits for someone to put a real value inside it later.
function greet(name) {
// The 'return' keyword is the most important part.
// It "spits out" the final result so the rest of your program can use it.
return 'Hello, ' + name + '!';
}
// 2. CALLING (EXECUTING) THE FUNCTION
// Here, we provide the "real" value (called an argument).
// We often store the result in a variable to use it later.
const message1 = greet('Amina'); // The 'name' mailbox now holds 'Amina'
console.log(message1); // Output: 'Hello, Amina!'
const message2 = greet('Brian'); // We reused the same logic for a different result
console.log(message2); // Output: 'Hello, Brian!'
/* ======================================================
MODERN SYNTAX: ARROW FUNCTIONS (ES6+)
======================================================
*/
// 3. THE ARROW FUNCTION
// This is a more modern, concise way to write functions.
// We "assign" the function to a variable (const greet).
const greetModern = (name) => {
return 'Hello, ' + name + '!';
};
// 4. THE "SHORTHAND" ARROW FUNCTION
// If your function only has ONE line of code, you can remove:
// - The curly braces {}
// - The 'return' keyword (it is now "implicit" or automatic)
const greetShort = (name) => 'Hello, ' + name + '!';
// Testing the shorthand
console.log(greetShort('Zoe')); // Output: 'Hello, Zoe!'Parameters (like name above) are placeholders for data you'll pass in when you call the function. This is what makes functions reusable.
3.5 Logic: Making Decisions
Programs need to make choices. JavaScript uses conditional statements and loops to control the flow of logic.
If / Else: How we make decisions
// 1. THE DATA
// We start with a variable. Change this number to test different outcomes!
let temperature = 32;
// 2. THE "IF" (The First Check)
// The code inside the (parentheses) is a question that must be True or False.
if (temperature > 30) {
// This "block" of code ONLY runs if the condition above is TRUE.
console.log('It is hot outside!');
}
// 3. THE "ELSE IF" (The Backup Plan)
// If the first check was FALSE, the computer moves here to try a second check.
else if (temperature > 20) {
// This runs if it's NOT > 30, but IS > 20.
console.log('Nice weather.');
}
// 4. THE "ELSE" (The Catch-All)
// If NONE of the conditions above were true, this is the default result.
// It doesn't need a condition (parentheses) because it's the "leftovers."
else {
console.log('It is cold today.');
}
// RESULT: Since 32 is greater than 30, it stops at the first block.
// Output: 'It is hot outside!'Loops : doing something repeatedly
/* A for loop needs 3 specific instructions inside the (parentheses)
separated by semicolons:
1. START: let i = 1 -> Create a counter starting at 1.
2. CHECK: i <= 5 -> "Should I keep going?" (Keep going as long as i is 5 or less).
3. STEP: i++ -> "What do I do after each loop?" (Add 1 to the counter).
*/
for (let i = 1; i <= 5; i++) {
// This code runs over and over until the CHECK becomes false.
console.log('Count: ' + i);
}
// Output:
// Count: 1
// Count: 2
// Count: 3
// Count: 4
// Count: 5
/*
2. THE forEach LOOP: THE "ARRAY SPECIALIST"
When you have a list (an Array), you don't need a manual counter.
forEach automatically visits every "room" in the array for you.
*/
const cities = ['Nairobi', 'Lagos', 'Accra'];
// Think of this as: "For each city inside the cities array, do this..."
cities.forEach(function(city) {
// The 'city' variable inside the function automatically
// becomes the current item the loop is looking at.
console.log('City: ' + city);
});
/* How it works behind the scenes:
1. Grabs 'Nairobi' -> logs 'City: Nairobi'
2. Grabs 'Lagos' -> logs 'City: Lagos'
3. Grabs 'Accra' -> logs 'City: Accra'
4. Stops because there are no more items!
*/Events : responding to user actions
// 1. THE SETUP: FIND THE ELEMENTS
// We use document.querySelector to "grab" the elements from the HTML.
// '#' is for IDs, and '.' is for Classes.
const button = document.querySelector('#my-button');
const box = document.querySelector('.box');
// 2. THE LISTENER: THE "EARS" OF THE CODE
// .addEventListener() takes two main ingredients:
// a) The Event: What are we listening for? ('click')
// b) The Function: What should we do when it happens?
button.addEventListener('click', function() {
// 3. THE ACTION: DOM MANIPULATION
// Now we change the 'box' element's appearance and text.
// .style allows us to change CSS properties directly.
// Note: CSS 'background-color' becomes 'backgroundColor' in JS (camelCase).
box.style.backgroundColor = 'coral';
// .textContent changes the actual words inside the element.
box.textContent = 'You clicked me!';
console.log('The button was clicked and the box has changed!');
});3.6 Reading JS Code as a Beginner
When you encounter JavaScript 'in the wild', here's how to approach it:
Scan for familiar keywords. Look for const, let, function, if, for, return. These are anchors that tell you what's happening structurally.
Find what's being selected. Look for document.querySelector or getElementById — this tells you what HTML element the JS is targeting.
Find what's being triggered. Look for addEventListener — this tells you what event (click, keydown, etc.) kicks off the action.
Read the functions. Functions are labelled actions. A function called calculateTotal() probably calculates a total. A function called showMenu() probably shows a menu.
Use console.log(). Drop console.log(someVariable) into the code and open your browser's DevTools (F12) to see what any variable holds at any point.
// Let's read this code like a detective:
const form = document.querySelector('#login-form'); // 1. Find the login form
form.addEventListener('submit', function(event) { // 2. When it's submitted...
event.preventDefault(); // 3. Don't reload the page
const email = document.querySelector('#email').value; // 4. Grab the email input
const password = document.querySelector('#pass').value;// 5. Grab the password
if (email === '' || password === '') { // 6. If either is empty...
alert('Please fill in all fields.'); // Show an error
} else {
console.log('Form submitted for:', email); // 7. Otherwise, proceed
}
});See? Even unfamiliar code becomes readable when you break it down step by step.
Putting It All Together
You now have a working understanding of all three web technologies. Let's see them work together in one complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Toggle</title>
<style>
/* CSS - The Style */
body {
font-family: Arial, sans-serif;
background: #f9f9f9;
color: #111;
transition: background 0.3s, color 0.3s;
}
body.dark {
background: #1a1a2e;
color: #eee;
}
.container {
max-width: 600px;
margin: 80px auto;
text-align: center;
}
#toggle-btn {
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 8px;
background: #1E40AF;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1 id="headline">Hello, Web!</h1>
<p>Click the button to toggle dark mode.</p>
<button id="toggle-btn">Enable Dark Mode</button>
</div>
<script>
/* JavaScript - The Behaviour */
const btn = document.querySelector('#toggle-btn');
btn.addEventListener('click', function() {
// Toggles the 'dark' class on the body tag
document.body.classList.toggle('dark');
// Updates the button text based on the current mode
if (document.body.classList.contains('dark')) {
btn.textContent = 'Disable Dark Mode';
} else {
btn.textContent = 'Enable Dark Mode';
}
});
</script>
</body>
</html>What happens here: HTML defines the button and container. CSS styles the page, and defines what it looks like in 'dark' mode. JavaScript watches for a click on the button, toggles the dark class on the body (which CSS then responds to), and updates the button text.
Where to Go From Here
You've covered a lot of ground. You now understand:
- How HTML structures a page with tags, semantic elements, divs, classes, and IDs.
- How CSS selects and styles those elements — inline, internal, and external — using the box model, colours, animations, and media queries.
- How JavaScript manipulates the DOM, stores data in variables, organises code in functions, uses logic and loops, and responds to user events.
The best thing you can do now is build something. Even something tiny:
- A personal 'About Me' HTML page.
- Style it with an external CSS file.
- Add a button that changes the background colour when clicked.
Every professional developer started exactly where you are now. The only difference between then and now is practice.
Happy Coding 🎉
The web was built by people who once knew nothing about it.
Written by Daniel Mutai
Co-founder & Tech Lead, SpaceFix Digitals
Daniel is the co-founder and tech lead at SpaceFix Digitals, a digital agency specialising in crafting high-performance, visually stunning websites and web applications. With a passion for clean code and intuitive design, he helps businesses transform their online presence into powerful digital assets.
Continue Reading
SPACEFIX DIGITALS
Ready to Build Your Digital Presence?
Whether you're starting from scratch or upgrading an existing site, our team at SpaceFix Digitals will craft a website that turns visitors into customers.
Get in Touch →