Web Development Fundamentals
HTML • CSS • JavaScript
A Comprehensive Study Guide
Prepared: June 2026 | Complete Reference Notes
Table of Contents
PART 1 Introduction to Web Development
1.1 What is Web Development?.................................3
1.2 The Web Ecosystem: HTML, CSS & JavaScript................3
PART 2 HTML — Structure of the Web
2.1 What is HTML?............................................4
2.2 Core HTML Elements.......................................4
2.3 HTML in Modern Web Apps..................................5
PART 3 CSS — Styling the Web
3.1 What is CSS?.............................................5
3.2 The Cascade: How CSS Applies Rules.......................6
3.3 Specificity & Importance.................................6
3.4 CSS in Multi-Page Websites...............................7
PART 4 JavaScript — Behaviour & Logic
4.1 Introduction to JavaScript...............................8
4.2 Variables: var, let & const..............................9
4.3 Comparison Operators: ==, ===, and =.....................11
4.4 JavaScript in Real-World Applications....................13
PART 5 Putting It All Together
5.1 How HTML, CSS & JavaScript Work Together.................14
5.2 Modern JavaScript Best Practices.........................15
5.3 Summary Table............................................16
PART 1: Introduction to Web Development
1.1 What is Web Development?
Web development is the broad discipline of building and maintaining websites and web applications that run
in a browser or are delivered over the internet. It encompasses everything from a simple static single-page
website to complex, data-driven social networks and e-commerce platforms. Web development is generally
split into three concerns:
• Front-end (Client-side): Everything the user sees and interacts with directly in the browser — the
layout, fonts, colours, buttons, and animations.
• Back-end (Server-side): The logic, database interactions, authentication, and data processing that
happen behind the scenes on a server.
• Full-stack: Developers who work across both front-end and back-end are called full-stack developers.
1.2 The Web Ecosystem: HTML, CSS & JavaScript
Every webpage you visit is built on three foundational technologies that work together in a clear separation of
concerns:
Technology Role Analogy
HTML Structure & content The skeleton of a building
CSS Presentation & style The paint, decor & furnishings
JavaScript Behaviour & interactivity The electrical & plumbing systems
These three technologies are inseparable in modern web development. A browser interprets all three
simultaneously to render the final page the user sees. Understanding each technology deeply, and how they
interact, is the foundation of becoming a proficient web developer.
PART 2: HTML — Structure of the Web
2.1 What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to create the structure and
organisation of a webpage. It is not a programming language in the traditional sense — it does not contain
logic or algorithms. Rather, it uses tags (enclosed in angle brackets) to annotate text, images, links, and other
content, telling the browser how to display them.
HTML provides the semantic backbone of every web page. It describes the structure by defining elements
such as headings, paragraphs, images, links, forms, tables, and many more. A browser reads an HTML
document from top to bottom and renders each element according to its meaning and the styles applied to it.
A minimal HTML document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to web development.</p>
</body>
</html>
2.2 Core HTML Elements
HTML has a rich vocabulary of elements. The most commonly used categories are:
Structural / Semantic Elements
• <html> — The root element that wraps the entire document.
• <head> — Contains metadata: title, character set, linked CSS files, etc.
• <body> — Contains all visible page content.
• <header>, <nav>, <main>, <footer> — Semantic sectioning elements introduced in HTML5 to give
meaningful names to page regions, improving accessibility and SEO.
• <section>, <article>, <aside> — Further semantic grouping for content areas.
Text Content Elements
• <h1> to <h6> — Headings in descending order of importance. <h1> should be used once per page for
the main title.
• <p> — Paragraph of text.
• <strong> — Bold, semantically important text.
• <em> — Italic, emphasised text.
• <span> — Inline container with no default styling, used for targeting with CSS or JS.
• <div> — Block-level generic container, the workhorse of layout.
Media & Link Elements
• <a href='...'> — Anchor/hyperlink to another page or section.
• <img src='...' alt='...'> — Embeds an image with an alternative text description.
• <video>, <audio> — Embed multimedia content natively.
Form Elements
Forms are essential for gathering user input. They include elements like <form>, <input>, <textarea>,
<select>, and <button>. These are the building blocks of login pages, search bars, registration forms, and
checkout flows.
2.3 HTML in Modern Web Applications
In a modern web application, HTML serves as the structural skeleton that every other technology attaches to.
CSS selects HTML elements by their tag names, classes, and IDs to apply styles. JavaScript queries the
DOM (Document Object Model) — the browser's in-memory representation of the HTML document — to read
values, modify content, and respond to user events.
An important modern concept is semantic HTML: using the most meaningful tag for a piece of content rather
than always defaulting to <div> or <span>. Semantic HTML improves accessibility (screen readers
understand the structure), improves SEO (search engines rank well-structured pages higher), and makes
code more readable and maintainable.
Example: On an e-commerce website, a product listing would use <article> for each product, <figure> and
<figcaption> for the product image, and <button> for 'Add to Cart' — rather than wrapping everything in <div>
tags.
PART 3: CSS — Styling the Web
3.1 What is CSS?
CSS (Cascading Style Sheets) is the language used to describe the visual presentation of HTML documents.
While HTML says what the content is, CSS says how it should look. CSS controls every visual aspect of a
webpage: colours, fonts, sizes, spacing, layout, responsiveness, animation, and more.
CSS works by selecting HTML elements and applying property–value declarations to them. A CSS rule
consists of a selector (which element to target) and a declaration block (one or more property–value pairs
inside curly braces).
h1 {
color: #1a237e;
font-size: 32px;
font-family: 'Arial', sans-serif;
margin-bottom: 16px;
}
Key CSS Properties
Category Properties
Typography font-family, font-size, font-weight, line-height, letter-spacing, text-align
Color & Background color, background-color, background-image, opacity
Box Model margin, padding, border, border-radius, width, height, box-sizing
Layout display, position, flexbox (flex), grid, float, z-index
Effects box-shadow, text-shadow, transform, transition, animation
Responsive media queries (@media), max-width, min-width, viewport units (vw, vh)
3.2 The Cascade: How CSS Applies Rules
The 'C' in CSS stands for Cascading — and this is the most important concept to understand in CSS. The
cascade is the algorithm that determines which CSS rule wins when multiple rules could apply to the same
element. Conflicts arise constantly in real web development: external stylesheets, inline styles, browser
defaults, and developer overrides all compete. The cascade resolves this conflict using three main principles:
Principle 1 — Specificity
Specificity is a weight or score assigned to a CSS selector that determines how strongly it targets an
element. The more specific a selector, the higher its priority. CSS calculates specificity using a three-part
score (A, B, C):
• A (Inline styles): Styles applied directly on an HTML element via the style attribute have the highest
specificity (e.g., <p style="color:red">). Score: 1,0,0
• B (ID selectors): An ID selector like #main-title is very specific. Score: 0,1,0
• C (Class, attribute, pseudo-class selectors): Selectors like .btn, [type='text'], or :hover have
medium specificity. Score: 0,0,1
• Element & pseudo-elements: Tag selectors like p, h1, ::before have the lowest specificity. Score:
0,0,0,1
/* Specificity Example */
p { color: black; } /* Specificity: 0,0,0,1 */
.text { color: blue; } /* Specificity: 0,0,1,0 */
#intro { color: green; } /* Specificity: 0,1,0,0 */
<p style="color:red"> /* Specificity: 1,0,0,0 — WINS */
/* More specific selectors beat less specific ones */
div [Link] { color: purple; } /* beats just p or .highlight alone */
Principle 2 — Source Order
When two rules have equal specificity, the one that appears later in the stylesheet wins. This is called source
order or the 'last rule wins' principle. This is why the order in which you write your CSS rules matters
significantly. It also explains why CSS resets or normalisation stylesheets are placed at the top of a
stylesheet — they establish defaults that can be easily overridden by subsequent rules.
/* Both rules have equal specificity (0,0,1,0) */
.button { background: blue; }
.button { background: red; } /* This wins — it comes later */
Principle 3 — !important
The !important declaration overrides all other specificity rules. When added to a CSS declaration, that rule
takes the highest possible priority, regardless of where it appears in the stylesheet or how specific the
selector is. However, its use is generally discouraged in professional development because it breaks the
natural cascade and makes debugging very difficult.
p { color: black !important; } /* Overrides even inline styles */
/* Two !important rules: specificity decides between them */
.text { color: red !important; }
#intro { color: green !important; } /* #intro wins — higher specificity */
Best Practice: Use !important sparingly — only as a last resort when you cannot increase specificity in any
other way, such as when overriding third-party library styles.
3.3 CSS in Multi-Page Websites
CSS is declared in a structured order in real-world applications and multi-page websites. The same HTML
element can receive styles from multiple sources simultaneously. Understanding this layering is critical for
managing styles in large projects.
• Browser Default Styles: Every browser has a built-in stylesheet called the User-Agent Stylesheet.
This gives <h1> tags a large font size, links a blue colour, etc., before you write a single line of CSS.
• External Stylesheets: Linked via <link rel='stylesheet' href='[Link]'> in the <head>. This is the most
common and maintainable approach for large projects.
• Internal Styles (Style Block): Written inside <style> tags in the <head>. Useful for page-specific
styles or prototyping.
• Inline Styles: Written directly on an element as style='...'. Has the highest specificity (short of
!important) but is the hardest to maintain and reuse.
Practical Scenario: Building a News Website
Consider a multi-page news website. You would have:
/* [Link] — applied to every page */
body { font-family: 'Georgia', serif; margin: 0; padding: 0; }
nav { background: #1a237e; color: white; }
/* [Link] — only for article pages */
.article-body { max-width: 720px; line-height: 1.8; }
.article-body h2 { border-bottom: 2px solid #1a237e; }
/* [Link] — hero section, featured cards */
.hero { height: 100vh; background-image: url('[Link]'); }
This modular approach — splitting CSS into global and page-specific files — is a standard pattern in
professional web development. It keeps stylesheets manageable as projects grow.
CSS Ecosystem Diagram
HTML, CSS, and JavaScript form a connected ecosystem where each technology has a distinct role but they
communicate constantly:
HTML (Structure) <■■> CSS (Presentation) <■■> JavaScript (Behaviour)
| | |
DOM elements Style rules Event handlers
(markup) (selectors + props) (click, input, etc.)
PART 4: JavaScript — Behaviour & Logic
4.1 Introduction to JavaScript
JavaScript (JS) is a high-level, interpreted, dynamically-typed programming language that is the primary
language of the web browser. It was originally created in 1995 by Brendan Eich at Netscape and has since
become one of the most widely-used programming languages in the world, running both in browsers
(client-side) and on servers via [Link] (server-side).
While HTML defines what is on a page and CSS defines how it looks, JavaScript defines what it does.
JavaScript makes pages interactive and dynamic:
• Responding to user events (clicks, form submissions, keyboard input, mouse movement)
• Updating the page content without a full reload (via DOM manipulation)
• Fetching data from servers asynchronously (AJAX / Fetch API)
• Validating forms before they are submitted
• Creating animations, sliders, image carousels, and interactive UI components
• Communicating with back-end APIs to retrieve or send data in real time
JavaScript Data Types
JavaScript has seven primitive data types and one complex type (Object). Understanding types is
fundamental because JavaScript is dynamically typed — variables can hold any type and types can change
at runtime.
Type Example Description
String "Hello" or 'World' Text enclosed in quotes
Number 42 or 3.14 Integer and floating-point numbers
Boolean true or false Logical true/false values
Undefined let x; Declared but not yet assigned a value
Null let x = null; Intentional absence of a value
Symbol Symbol('id') Unique, immutable identifiers (ES6+)
BigInt 9007199254740991n Integers beyond Number.MAX_SAFE_INTEGER
Object { name: 'Ada', age: 25 } Complex data — includes Arrays, Functions
4.2 Variables: var, let, and const
Variables are named containers that store data values. JavaScript has three ways to declare variables, each
introduced at different points in the language's history and each with different scoping rules and behaviours.
Choosing the right keyword is one of the most fundamental decisions in JavaScript programming.
var — The Original Variable Declaration
var was the original way to declare variables in JavaScript, introduced in the very first version of the
language. It is function-scoped, meaning it is accessible throughout the entire function in which it is
declared, regardless of block boundaries like loops or if-statements. It is also hoisted — meaning the
variable declaration is moved to the top of its scope by the JavaScript engine before code runs, though its
value is not.
• Scope: Function-scoped (not block-scoped)
• Re-declaration: Can be re-declared in the same scope without error
• Re-assignment: Can be freely re-assigned
• Hoisting: Yes — hoisted to top of function scope, initialised as undefined
• Temporal Dead Zone: No — can be accessed before declaration (returns undefined)
// var examples
var name = 'John';
[Link](name); // 'John'
var name = 'Ada'; // Re-declaration allowed — no error
[Link](name); // 'Ada'
// var inside a block — STILL accessible outside the block!
if (true) {
var city = 'Lagos';
}
[Link](city); // 'Lagos' — var leaks out of the block
// Hoisting behaviour
[Link](score); // undefined (not an error!)
var score = 10;
[Link](score); // 10
When to use var: Generally avoided in modern JavaScript. You may encounter it in legacy code, older tutorials,
or when maintaining older projects. In modern JavaScript (ES6+), prefer let or const.
let — The Modern Mutable Variable
let was introduced in ES6 (ECMAScript 2015) to address the problems with var. It is block-scoped,
meaning it only exists within the nearest pair of curly braces {} that contain it — whether that's an if-block, a
for-loop, or any other block. This makes it far more predictable and less prone to bugs.
• Scope: Block-scoped — contained within { }
• Re-declaration: Cannot be re-declared in the same scope
• Re-assignment: Can be updated (re-assigned) freely
• Hoisting: Yes — but NOT initialised; accessing before declaration throws ReferenceError
• Temporal Dead Zone (TDZ): Yes — cannot access before declaration
// let examples
let age = 20;
[Link](age); // 20
age = 21; // Re-assignment allowed
[Link](age); // 21
// Block scoping
if (true) {
let city = 'Abuja';
[Link](city); // 'Abuja' — works inside block
}
[Link](city); // ReferenceError: city is not defined
// Loop example — let creates a new binding per iteration
for (let i = 0; i < 3; i++) {
[Link](i); // 0, 1, 2
}
[Link](i); // ReferenceError — i not accessible here
// Practical: counters, loop variables, temporary data
let score = 15;
score = 10; // Updated
[Link](score); // 10
When to use let: Use let for values that will change — counters, loop variables, temporary calculations, values
that are conditionally assigned, and any variable whose value you plan to re-assign later in the program.
const — Immutable Bindings
const was also introduced in ES6 alongside let. It declares a variable whose binding cannot be re-assigned
after its initial declaration. The word 'const' stands for 'constant', but it is important to understand exactly what
is constant: the binding (the reference stored in the variable), not necessarily the value itself.
This distinction is crucial: if a const variable holds a primitive (like a number or string), the value truly cannot
change. However, if a const holds an object or array, the properties of that object or the elements of that
array can still be modified — only the reference to the object/array is locked.
• Scope: Block-scoped — same as let
• Re-declaration: Not allowed
• Re-assignment: Not allowed — will throw TypeError
• Hoisting: Yes — but in Temporal Dead Zone; cannot access before declaration
• Mutability of contents: Objects and arrays can still be mutated (their internal values can change)
// const with primitives
const PI = 3.14;
[Link](PI); // 3.14
PI = 3.14159; // TypeError: Assignment to constant variable
const country = 'Nigeria';
[Link](country); // 'Nigeria'
// const with objects — reference is locked, but properties can change
const user = { name: 'Aminat' };
[Link] = 'Zainab'; // Allowed — mutating the object's property
[Link](user); // { name: 'Zainab' }
user = { name: 'Ada' }; // TypeError — cannot reassign the reference
// const with arrays
const colors = ['red', 'blue'];
[Link]('green'); // Allowed — mutating the array
[Link](colors); // ['red', 'blue', 'green']
colors = ['yellow']; // TypeError — cannot reassign
When to use const: Use const by default for everything. Only switch to let when you know the value will need to
change. Typical const uses: API endpoints, configuration values, mathematical constants, imported modules,
fixed arrays or objects.
Comparing var, let, and const
Feature var let const
Scope Function Block Block
Re-declarable Yes No No
Re-assignable Yes Yes No
Hoisted Yes (undefined) Yes (TDZ) Yes (TDZ)
Modern JS? Legacy Yes Yes (preferred)
Recommended for Old code only Changing values Fixed bindings
4.3 Comparison Operators: ==, ===, and =
JavaScript has three commonly confused operators that look similar but behave very differently.
Understanding the difference between them is essential for writing correct code and avoiding subtle,
hard-to-find bugs.
The Assignment Operator: = (Single Equals)
The single equals sign = is the assignment operator. It does not compare values; it assigns a value to a
variable. When you write x = 5, you are storing the value 5 in the variable x. It does not evaluate to true or
false — it stores data.
// = is ASSIGNMENT, not comparison
let name = 'John'; // Stores 'John' in name
let age = 20; // Stores 20 in age
let isLoggedIn = false; // Stores false in isLoggedIn
// Common mistake: using = where == or === is needed
if (age = 18) { // BUG! This assigns 18 to age, always truthy
[Link]('Adult');
}
if (age === 18) { // CORRECT — this compares age to 18
[Link]('Exactly 18');
}
The Equality Operator: == (Double Equals / Loose Equality)
The double equals == is the loose equality operator. It compares two values for equality, but before
comparing, it performs type coercion — automatically converting one or both values to a common type if
they are different. This can lead to surprising results that cause bugs if you are not aware of the coercion
rules.
// == performs type coercion before comparing
[Link](5 == '5'); // true — number 5 coerced to string '5'
[Link](0 == false); // true — 0 coerced to false
[Link](1 == true); // true — 1 coerced to true
[Link](null == undefined); // true
[Link]('' == false); // true — empty string coerced to false
[Link]([] == false); // true — empty array coerced
// Real-world use: form validation (checking user input)
let userInput = '25'; // Input from form is always a string
let expectedAge = 25;
if (userInput == expectedAge) {
[Link]('Match found (loose)');
}
While == has legitimate uses (e.g., checking for null or undefined simultaneously with null == undefined), it is
generally avoided in modern JavaScript due to the unpredictable nature of type coercion. Most style guides
and linters recommend using === instead.
The Strict Equality Operator: === (Triple Equals / Strict Equality)
The triple equals === is the strict equality operator. It compares both the value and the type of two
operands without performing any type coercion. If the types are different, it returns false immediately — no
conversion is attempted. This makes it more predictable and reliable than ==.
// === compares both value AND type — no coercion
[Link](5 === '5'); // false — different types (number vs string)
[Link](5 === 5); // true — same value AND same type
[Link](0 === false); // false — different types
[Link](null === undefined); // false — different types
// Practical use: authentication system
const storedPassword = 'secure123';
let enteredPassword = 'secure123';
if (storedPassword === enteredPassword) {
[Link]('Access granted');
} else {
[Link]('Access denied');
}
// In a checkout validation flow
let userRole = 'admin';
if (userRole === 'admin') {
showAdminPanel();
}
Elucidating == vs === in Depth
The fundamental difference is type coercion. Consider a web form where a user enters their age. The input
value comes in as a string. If you compare it with == to a number, JavaScript will coerce the string to a
number first — which might be what you want. But if you compare with ===, the types must match, making
the comparison explicit and intentional.
Expression == Result === Result Why
5 == '5' true false == coerces string '5' to number 5
0 == false true false == coerces false to 0
'' == false true false == coerces '' to 0, false to 0
null == undefined true false == special rule: null == undefined
5 === 5 true true Same type and value
'hi' === 'hi' true true Same type and value
true === 1 false false Different type (boolean vs number)
Golden Rule: Always use === (strict equality) by default in modern JavaScript. The strict equality operator is
more predictable, eliminates an entire class of type-coercion bugs, and is the standard in professional JavaScript
codebases. Only use == when you explicitly need type coercion (e.g., null == undefined checks).
4.4 JavaScript in Real-World Applications
Understanding JavaScript's theoretical features is only the first step. Seeing how these concepts apply in real
applications is what transforms theory into professional competence.
Behaviour (JavaScript) — DOM Manipulation
JavaScript adds interactivity and dynamic behaviour to web pages. It can react to user actions and modify the
page without reloading. This is achieved through the Document Object Model (DOM) — a tree-like
representation of the HTML document that JavaScript can read and modify.
// Responding to a button click
const btn = [Link]('subscribe-btn');
[Link]('click', function() {
[Link]('message').textContent = 'Subscribed!';
[Link] = '#4caf50';
});
// Form validation before submission
const form = [Link]('login-form');
[Link]('submit', function(e) {
const email = [Link]('email').value;
if () {
[Link]();
alert('Please enter a valid email address');
}
});
Asynchronous JavaScript — Fetch API & AJAX
One of the most powerful features of JavaScript is its ability to communicate with servers asynchronously —
fetching or sending data in the background without refreshing the page. This enables real-time updates, live
search, chat applications, dynamic dashboards, and more.
// Fetching data from an API
fetch('[Link]
.then(response => [Link]())
.then(data => {
[Link](product => {
renderProductCard(product);
});
})
.catch(error => [Link]('Error:', error));
// Using async/await (modern approach)
async function loadProducts() {
try {
const response = await fetch('/api/products');
const products = await [Link]();
renderProductList(products);
} catch (error) {
showErrorMessage(error);
}
}
Practical Example: E-Commerce Shopping Cart
An online shopping platform like Jumia or Amazon is an excellent example of all three web technologies
working together: HTML structures the product grid, cart, and checkout form; CSS styles the cards, buttons,
and responsive layout; JavaScript handles adding items to the cart, real-time price calculations, and form
validation at checkout.
// Shopping cart logic
const cart = [];
function addToCart(product) {
const existing = [Link](item => [Link] === [Link]);
if (existing) {
[Link] += 1;
} else {
[Link]({ ...product, quantity: 1 });
}
updateCartDisplay();
}
function updateCartDisplay() {
const total = [Link]((sum, item) => sum + [Link] * [Link], 0);
[Link]('cart-total').textContent = 'N' + [Link](2);
[Link]('cart-count').textContent = [Link];
}
PART 5: Putting It All Together
5.1 How HTML, CSS & JavaScript Work Together
The three core web technologies are not independent — they are deeply interdependent. A modern web
application is built by layering them carefully:
• HTML provides the DOM: Every HTML element becomes a node in the Document Object Model. CSS
targets these nodes to apply styles; JavaScript queries them to read or update content.
• CSS reads HTML structure: CSS selectors target elements by their tag name, class, ID, or position in
the HTML tree. Without HTML, there is nothing for CSS to select.
• JavaScript manipulates both: JavaScript can change HTML content (innerHTML, textContent),
modify CSS styles ([Link], classList), and even create or remove HTML elements dynamically.
• Separation of concerns: Keeping HTML (structure), CSS (presentation), and JS (behaviour) separate
makes code more maintainable, testable, and collaborative in a team.
// JavaScript dynamically updates HTML and CSS together
function toggleDarkMode() {
const body = [Link];
[Link]('dark-mode'); // Adds/removes CSS class
const btn = [Link]('theme-btn');
[Link] = [Link]('dark-mode')
? 'Light Mode' : 'Dark Mode'; // Updates HTML content
}
5.2 Modern JavaScript Best Practices
Variable Declarations
• Always use const by default. Declare with let only when you know the value will change.
• Never use var in new code — it causes scoping issues that are difficult to debug.
• Declare variables at the top of their scope for readability.
• Use meaningful, descriptive variable names (userAge not x; isAuthenticated not flag).
Equality Comparisons
• Always use === (strict equality) instead of == to avoid type coercion surprises.
• Configure ESLint with the eqeqeq rule to enforce === across a codebase.
• The only common exception: null == undefined (to check for both simultaneously).
Code Organisation
• Break code into small, focused functions that do one thing well.
• Use ES6+ features: arrow functions, template literals, destructuring, spread/rest operators.
• Handle errors explicitly with try/catch for async operations.
• Comment your code — especially complex logic — to aid future readers (including yourself).
5.3 Summary Reference Table
The following table provides a quick-reference summary of the key concepts covered in these notes:
Concept Technology Key Points
Document Structure HTML Tags, elements, attributes, semantic HTML, DOM
Presentation CSS Selectors, properties, cascade, specificity, box model
Behaviour JavaScript DOM manipulation, events, fetch API, async/await
var JS Variables Function-scoped, hoisted, re-declarable — avoid in modern JS
let JS Variables Block-scoped, re-assignable, not re-declarable — use for changing values
const JS Variables Block-scoped, not re-assignable — use by default
= (assign) JS Operators Stores a value in a variable
== (loose eq) JS Operators Compares with type coercion — avoid; prefer ===
=== (strict eq) JS Operators Compares value AND type — use this by default
Cascade CSS Specificity → Source order → !important
Specificity CSS inline > #id > .class > tag
Async JS JavaScript fetch(), .then(), async/await, error handling
DOM JavaScript In-memory tree of HTML; manipulate via getElementById, querySelector
These notes cover the foundational pillars of front-end web development. Mastery of HTML, CSS, and
JavaScript — and how they interact — is the prerequisite for all advanced topics including React, [Link],
TypeScript, REST APIs, databases, and full-stack development. Return to these fundamentals regularly;
every advanced concept builds upon them.
Web Development Fundamentals Notes • HTML | CSS | JavaScript • June 2026