Build the foundation of web development - learn how websites are structured and styled
Imagine building a house. HTML (HyperText Markup Language) is like the blueprint and structure of your house - it defines where the walls go, where the doors are, and how rooms are organized. HTML is the skeleton of every website you visit!
HTML is a markup language that tells web browsers how to structure content on a webpage. It uses "tags" (like labels) to mark different parts of content - headings, paragraphs, images, links, etc.
Example: A simple HTML structure
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="about.html">Learn More</a>
Foundation of Web
Every website uses HTML - it's the universal language of the web
Easy to Learn
Simple syntax that reads like English
Career Essential
Required skill for web developers, designers, and marketers
Immediate Results
See your code come to life instantly in a browser
Every HTML document follows a standard structure - like how every book has a cover, table of contents, and chapters. Let's understand each part!
Basic HTML Document Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
<!DOCTYPE html>
Tells the browser "this is an HTML5 document". Always put this at the very top! Think of it as saying "Hey browser, I'm speaking HTML5 language."
<html>
The root element that wraps everything. Like the cover of a book that contains all pages. The lang="en" attribute tells browsers and screen readers the content is in English.
<head>
Contains metadata (information about the page) that doesn't show on the page itself. Like the book's copyright page - important info but not part of the story. Includes the page title, character encoding, styles, and scripts.
<body>
Contains all the visible content - text, images, videos, links, etc. This is what users actually see and interact with. Like the actual story in a book!
HTML tags usually come in pairs: an opening tag <tag> and a closing tag </tag>. The closing tag has a forward slash. Some tags like <img> and <br> are self-closing and don't need a closing tag!
HTML has over 100 tags, but you'll use about 20-30 regularly. Let's learn the most important ones that you'll use every day!
Headings (h1 to h6)
Used for titles and section headings. h1 is the most important (like a book title), h6 is the least important (like a small subsection). Only use one h1 per page!
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
Paragraph <p>
For regular text content. Each paragraph automatically adds space above and below. Think of it like pressing Enter twice in a word processor.
<p>This is a paragraph of text. It can be as long as you want!</p>
Line Break <br>
Creates a line break without starting a new paragraph. Like pressing Enter once. This is a self-closing tag (no closing tag needed).
First line<br>Second line
Bold <strong> and Italic <em>
Make text stand out. <strong> makes text bold (important), <em> makes it italic (emphasized). There's also <b> and <i> but strong/em are better for accessibility.
<strong>Bold text</strong>
<em>Italic text</em>
Links <a>
Creates clickable links to other pages or websites. The hrefattribute specifies where the link goes. "a" stands for "anchor".
<!-- Link to another page -->
<a href="about.html">About Us</a>
<!-- Link to external website -->
<a href="https://google.com" target="_blank">Google</a>
Images <img>
Displays images. The src attribute specifies the image file, and altprovides description for screen readers and if image fails to load.
<img src="photo.jpg" alt="A beautiful sunset">
Unordered List <ul>
Creates a bulleted list (like this one!). Each item uses <li> (list item).
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered List <ol>
Creates a numbered list. Perfect for step-by-step instructions or rankings.
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
Division <div>
A generic container for grouping content. Like a box that holds other elements. Used extensively for layout and styling. Doesn't have any special meaning - just a container.
<div>
<h2>Section Title</h2>
<p>Some content here</p>
</div>
Span <span>
Like div but for inline content (doesn't create a new line). Used to style part of text or group inline elements.
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>
If HTML is the structure of a house, CSS (Cascading Style Sheets) is the interior design! CSS makes websites beautiful by controlling colors, fonts, layouts, spacing, and animations. Without CSS, every website would look like a plain text document from the 1990s!
CSS is a styling language that describes how HTML elements should look on screen. It controls everything visual - colors, sizes, positions, animations, and responsive behavior.
/* Make all h1 tags blue and centered */
h1 {
color: blue;
text-align: center;
}
Make Sites Beautiful
Transform plain HTML into stunning, professional designs
Responsive Design
Make websites work perfectly on phones, tablets, and desktops
Creative Control
Express your creativity and build unique user experiences
Industry Standard
Every web developer must know CSS - it's non-negotiable!
CSS has a simple pattern: you select an HTML element, then declare what styles you want to apply. Let's break down the syntax!
CSS Rule Structure
/* Selector { Property: Value; } */
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
Selector: Targets which HTML elements to style (h1)
Property: What aspect to style (color, font-size)
Value: How to style it (blue, 24px)
Declaration: Property + Value pair
Element Selector
Selects all elements of a specific type. Simple and straightforward!
/* Styles ALL paragraphs */
p {
color: gray;
}
Class Selector (.classname)
Selects elements with a specific class attribute. Most commonly used! You can apply the same class to multiple elements. Use a dot (.) before the class name.
<!-- HTML -->
<p class="highlight">Special text</p>
/* CSS */
.highlight {
background-color: yellow;
}
ID Selector (#idname)
Selects a single element with a specific ID. IDs must be unique on a page! Use a hash (#) before the ID name. Best for unique elements like headers or main containers.
<!-- HTML -->
<div id="header">Site Header</div>
/* CSS */
#header {
background-color: navy;
}
Universal Selector (*)
Selects ALL elements on the page. Use sparingly! Often used for CSS resets.
/* Applies to everything */
* {
margin: 0;
padding: 0;
}
Use descriptive names for classes and IDs! Instead of "box1", use "sidebar" or "hero-section". Use hyphens for multi-word names: "main-nav", "btn-primary". This makes your code readable!
CSS has hundreds of properties, but you'll use about 30-40 regularly. Let's learn the essential ones that you'll use every single day!
/* Color */
color: blue; /* Text color */
color: #FF5733; /* Hex color */
color: rgb(255, 87, 51); /* RGB color */
/* Font */
font-family: Arial, sans-serif;
font-size: 16px; /* Size in pixels */
font-weight: bold; /* or 700 */
font-style: italic;
/* Text alignment and decoration */
text-align: center; /* left, right, center, justify */
text-decoration: underline; /* none, underline, line-through */
text-transform: uppercase; /* lowercase, capitalize */
line-height: 1.5; /* Space between lines */
/* Background */
background-color: lightblue;
background-image: url('image.jpg');
background-size: cover; /* contain, cover, 100% */
background-position: center;
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */
The Box Model - Every HTML element is a box! Understanding this is crucial.
Content: The actual content (text, image)
Padding: Space between content and border (inside)
Border: Line around the padding
Margin: Space outside the border (pushes other elements away)
/* Margin (outside spacing) */
margin: 20px; /* All sides */
margin: 10px 20px; /* Top/bottom, left/right */
margin: 10px 20px 30px 40px; /* Top, right, bottom, left (clockwise) */
margin-top: 10px;
margin-right: 20px;
/* Padding (inside spacing) */
padding: 15px; /* Same syntax as margin */
padding-left: 25px;
/* Border */
border: 2px solid black; /* Width, style, color */
border-radius: 10px; /* Rounded corners */
border-top: 3px dashed red;
/* Width and Height */
width: 300px; /* Fixed width */
width: 50%; /* Percentage of parent */
max-width: 1200px; /* Maximum width */
height: 200px;
min-height: 100px;
/* Display */
display: block; /* Takes full width, new line */
display: inline; /* Flows with text */
display: inline-block; /* Inline but can have width/height */
display: none; /* Hides element */
The best way to learn CSS is by experimenting! Open your browser's DevTools (F12 or right-click> Inspect), and try changing CSS values in real-time. You'll see changes instantly!
You can add CSS to your HTML in three different ways. Each has its use case!
Add CSS directly to an HTML element using the style attribute. Quick but messy - avoid for production code! Only use for quick tests or email templates.
<h1 style="color: blue; font-size: 24px;">Hello</h1>
Add CSS in a <style> tag inside the <head> section. Good for single-page sites or when you want all code in one file.
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
Create a separate .css file and link it to your HTML. This is the professional way! Keeps HTML and CSS separate, makes code reusable, and easier to maintain.
HTML file (index.html):
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS file (styles.css):
h1 {
color: blue;
font-size: 24px;
}
Always use external CSS files for real projects! It keeps your code organized, makes it easier to maintain, and allows you to reuse styles across multiple pages. One CSS file can style your entire website!
Let's build a simple personal card using everything we've learned! This combines HTML structure with CSS styling.
What we'll build: A card with your name, photo, description, and social links
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<img src="photo.jpg" alt="My photo" class="profile-pic">
<h1>John Doe</h1>
<p class="title">Web Developer</p>
<p class="description">
I love building beautiful websites and learning new technologies!
</p>
<div class="social-links">
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
<a href="#">GitHub</a>
</div>
</div>
</body>
</html>
CSS (styles.css):
/* Reset and body styling */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Card container */
.card {
background-color: white;
border-radius: 15px;
padding: 40px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
}
/* Profile picture */
.profile-pic {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
/* Name */
h1 {
margin: 10px 0;
color: #333;
}
/* Title */
.title {
color: #666;
font-size: 18px;
margin-bottom: 15px;
}
/* Description */
.description {
color: #777;
line-height: 1.6;
margin-bottom: 25px;
}
/* Social links */
.social-links a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.social-links a:hover {
background-color: #0056b3;
}
Congratulations! You've learned the foundation of web development. Next, we'll dive into JavaScript to make your websites interactive and dynamic. Get ready to bring your pages to life!