Web Development Fundamentals
Learn the building blocks of the web: HTML for structure, CSS for styling, and JavaScript for interactivity
Introduction - What is Web Development?
Welcome to the exciting world of web development! Every website you visit, from social media platforms to online stores, is built using three core technologies: HTML, CSS, and JavaScript. Think of them as the essential ingredients in a recipe.
Creating a website is like building a house. HTML is the foundation and walls - it provides structure. CSS is the paint, furniture, and decorations - it makes everything look beautiful. JavaScript is the electricity and plumbing - it makes things work and respond to your actions.
In this lecture, you'll learn how these three technologies work together to create the web experiences you use every day. By the end, you'll be able to build your very first web page!
HTML
The structure and content of web pages
CSS
The visual styling and layout
JavaScript
The behavior and interactivity
HTML Basics - The Structure of the Web
HTML stands for HyperText Markup Language. It's the standard language for creating web pages. HTML tells the browser what content to display and how it should be organized.
HTML uses a system of "tags" to mark up content. Tags are like labels that tell the browser "this is a heading" or "this is a paragraph" or "this is an image." Every HTML document follows a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Every HTML page has two main parts: the <head> (invisible information about the page) and the <body> (everything visible to users). Think of the head as the backstage area and the body as the stage where the show happens.
The <!DOCTYPE html> at the top tells the browser "this is an HTML5 document." The <html> tag wraps everything. Inside, we have the <head> for metadata and the <body> for content users will see.
HTML Elements & Tags - Building Blocks
HTML elements are the building blocks of web pages. An element consists of an opening tag, content, and a closing tag. Let's explore the most common ones:
Common HTML Elements
<!-- Headings (6 levels) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<!-- Paragraphs -->
<p>This is a paragraph of text.</p>
<!-- Links -->
<a href="https://example.com">Click here</a>
<!-- Images -->
<img src="photo.jpg" alt="Description">
<!-- Lists -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<!-- Divisions (containers) -->
<div>A container for grouping content</div>
Most HTML tags come in pairs (opening and closing), like <p> and </p>. However, some tags are "self-closing" like <img> and <br> because they don't contain content.
Each element serves a specific purpose. Headings (<h1> through <h6>) organize content hierarchically. Paragraphs (<p>) contain text. Links (<a>) connect pages. Images (<img>) display visuals. Lists (<ul>, <ol>) organize related items.
Think of HTML elements like LEGO blocks. Each block has a specific shape and purpose. You combine them in different ways to build whatever you imagine. A heading block, a paragraph block, an image block - stack them together to create your web page!
CSS Introduction - Styling Your Pages
CSS stands for Cascading Style Sheets. While HTML provides structure, CSS controls how everything looks - colors, fonts, spacing, layout, and even animations.
Imagine you've built a house with HTML (walls, doors, rooms). CSS is everything that makes it beautiful and comfortable - the paint colors, furniture placement, lighting, and decorations. Without CSS, websites would look plain and boring, like an unfinished house.
Three Ways to Add CSS
1. Inline CSS - Directly in HTML elements:
<p style="color: blue; font-size: 18px;">Blue text</p>2. Internal CSS - Inside the <head> section:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>3. External CSS - Separate file (best practice):
<!-- In HTML file -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* In styles.css file */
p {
color: blue;
font-size: 18px;
}External CSS files are the professional way to style websites. They keep your HTML clean, make styles reusable across multiple pages, and are easier to maintain as your site grows.
CSS Selectors & Properties
CSS uses "selectors" to target HTML elements and "properties" to define how they should look. It's like giving instructions: "Find all paragraphs, and make their text blue."
Common CSS Selectors
/* Element Selector - targets all paragraphs */
p {
color: navy;
}
/* Class Selector - targets elements with class="highlight" */
.highlight {
background-color: yellow;
}
/* ID Selector - targets element with id="header" */
#header {
font-size: 24px;
}
/* Combining Selectors */
p.highlight {
color: red;
background-color: yellow;
}Popular CSS Properties
Colors
color, background-color
Text
font-size, font-family, text-align
Spacing
margin, padding, width, height
/* Practical Example */
.button {
background-color: #6366f1; /* Purple background */
color: white; /* White text */
padding: 12px 24px; /* Internal spacing */
border-radius: 8px; /* Rounded corners */
font-size: 16px; /* Text size */
border: none; /* No border */
cursor: pointer; /* Pointer on hover */
}
.button:hover {
background-color: #4f46e5; /* Darker on hover */
}
The :hover selector is a "pseudo-class" that applies styles when you hover over an element. It's perfect for creating interactive buttons and links that respond to user actions!
CSS Box Model & Layout
Every HTML element is essentially a rectangular box. The CSS Box Model describes how these boxes are sized and spaced. It consists of: content, padding, border, and margin.
Imagine framing a photo. The content is the photo itself. The padding is the white matting around the photo. The border is the frame. The margin is the space between this frame and other pictures on the wall.
.box {
/* Content area */
width: 300px;
height: 200px;
/* Padding - space inside the border */
padding: 20px;
/* Border - the frame itself */
border: 2px solid #333;
/* Margin - space outside the border */
margin: 10px;
background-color: lightblue;
}Layout Techniques
CSS provides several ways to arrange elements on a page:
Flexbox - Perfect for one-dimensional layouts (rows or columns):
.container {
display: flex;
justify-content: space-between; /* Space items evenly */
align-items: center; /* Center vertically */
gap: 16px; /* Space between items */
}Grid - Perfect for two-dimensional layouts (rows AND columns):
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 20px; /* Space between items */
}Flexbox and Grid are the modern, professional ways to create layouts. They're much easier than old techniques and work great on mobile devices. Start with Flexbox for simple layouts, use Grid when you need complex 2D arrangements.
JavaScript Basics - Adding Interactivity
JavaScript is a programming language that makes web pages interactive. While HTML structures and CSS styles, JavaScript makes things happen - responding to clicks, validating forms, loading new content, and creating animations.
If your website is a TV, HTML is the screen and speakers (structure), CSS is the picture quality and color settings (style), and JavaScript is the remote control - it lets users interact, change channels, adjust volume, and control everything.
JavaScript Basics
Variables - Store information:
// Store text
let userName = "Sarah";
// Store numbers
let userAge = 25;
// Store true/false values
let isLoggedIn = true;Functions - Reusable blocks of code:
function greetUser(name) {
return "Hello, " + name + "!";
}
// Use the function
let greeting = greetUser("Sarah");
console.log(greeting); // Output: Hello, Sarah!Events - Respond to user actions:
// HTML
<button id="myButton">Click Me!</button>
// JavaScript
document.getElementById("myButton").addEventListener("click", function() {
alert("Button was clicked!");
});JavaScript runs in the browser, which means it happens on the user's computer, not on a server. This makes websites feel fast and responsive because they don't need to wait for server responses for every action!
DOM Manipulation - Making Things Move
The DOM (Document Object Model) is how JavaScript sees your HTML. It treats your web page as a tree of objects that you can access, modify, and control with JavaScript code.
DOM manipulation is how you make dynamic changes to your page - updating text, changing colors, adding new elements, or removing existing ones - all in real-time without reloading the page.
Common DOM Operations
Selecting Elements:
// By ID
let header = document.getElementById("header");
// By class name
let buttons = document.querySelectorAll(".button");
// By tag name
let paragraphs = document.getElementsByTagName("p");Changing Content:
// Change text
document.getElementById("title").textContent = "New Title!";
// Change HTML
document.getElementById("content").innerHTML = "<p>New paragraph</p>";
// Change style
document.getElementById("box").style.backgroundColor = "blue";Creating New Elements:
// Create a new paragraph
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph!";
// Add it to the page
document.getElementById("container").appendChild(newParagraph);Responding to User Input:
// HTML
<input type="text" id="nameInput" placeholder="Enter your name">
<button id="submitBtn">Submit</button>
<p id="output"></p>
// JavaScript
document.getElementById("submitBtn").addEventListener("click", function() {
let name = document.getElementById("nameInput").value;
document.getElementById("output").textContent = "Hello, " + name + "!";
});Think of JavaScript as a puppet master and the DOM as the puppet. JavaScript can pull any string (access any element) to make the puppet dance (change the page). Want to change the color? Pull the color string. Want to add content? Pull the content string. The page responds instantly to your commands!
Putting It All Together - Your First Web Page
Now let's combine HTML, CSS, and JavaScript to create a simple interactive web page. This example shows how all three technologies work together:
Complete Example: Interactive Counter
<!DOCTYPE html>
<html>
<head>
<title>Interactive Counter</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
}
.counter-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
text-align: center;
}
#count {
font-size: 72px;
font-weight: bold;
color: #667eea;
margin: 20px 0;
}
button {
background: #667eea;
color: white;
border: none;
padding: 12px 24px;
margin: 5px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #5568d3;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="counter-container">
<h1>Click Counter</h1>
<div id="count">0</div>
<button id="increment">Add 1</button>
<button id="decrement">Subtract 1</button>
<button id="reset">Reset</button>
</div>
<script>
let count = 0;
let countDisplay = document.getElementById("count");
document.getElementById("increment").addEventListener("click", function() {
count++;
countDisplay.textContent = count;
});
document.getElementById("decrement").addEventListener("click", function() {
count--;
countDisplay.textContent = count;
});
document.getElementById("reset").addEventListener("click", function() {
count = 0;
countDisplay.textContent = count;
});
</script>
</body>
</html>HTML creates the structure (heading, counter display, three buttons). CSS makes it beautiful (colors, spacing, rounded corners, hover effects). JavaScript makes it interactive (updates the number when buttons are clicked). This is web development in action!
Next Steps on Your Journey
Practice Daily
Build small projects to reinforce concepts
Use Dev Tools
Browser developer tools help you learn and debug
Study Real Sites
Inspect your favorite websites to see how they're built
The best way to learn web development is by building things! Start with small projects like a personal profile page, then gradually tackle bigger challenges. Every website you see started with these same basic building blocks.
Knowledge Check - Quiz
Test Your Understanding
Answer these questions to check your knowledge of web development fundamentals
1. What does HTML stand for?
2. Which technology is primarily responsible for styling and visual presentation?
3. What does the CSS Box Model consist of (from inside to outside)?
4. What is the DOM in web development?
Try the Enhanced Quiz!
Get detailed topic analysis, time tracking, and personalized recommendations.
Interactive Coding Exercises
Write real HTML, CSS & JavaScript code with step-by-step guidance.