📄 HTML & CSS

The Building Blocks of Every Website

👋 Welcome to HTML & CSS!

HTML and CSS are the foundation of web development. Every website you've ever visited uses these two technologies. HTML provides the structure and content, while CSS makes it look beautiful.

The best part? They're beginner-friendly and you can start creating web pages today!

🤔 What are HTML and CSS?

📄

HTML (Structure)

HyperText Markup Language

HTML is like the skeleton of a website. It defines:

Headings and paragraphs
Links and images
Forms and buttons
Page structure

🎨

CSS (Styling)

Cascading Style Sheets

CSS is like the clothing and makeup. It controls:

Colors and fonts
Layouts and spacing
Animations and effects
Responsive design

🏗️ Think of it like building a house:

HTML = The structure (walls, rooms, doors)
CSS = The decoration (paint, furniture, style)
JavaScript = The functionality (lights, plumbing, electricity)

📄 HTML Basics

Your First HTML Page

<!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>
        

Common HTML Elements

<!-- Headings (h1 is largest, h6 is smallest) -->
<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="image.jpg" alt="Description of image">

<!-- Lists -->
<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
</ul>

<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
</ol>

<!-- Buttons -->
<button>Click Me</button>

<!-- Divisions (containers) -->
<div>
    <p>Content inside a div</p>
</div>
        

Semantic HTML5 Elements

Modern HTML uses semantic elements that describe their meaning:

<!-- Page Structure -->
<header>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
    
    <section>
        <h2>Section Title</h2>
        <p>Section content...</p>
    </section>
    
    <aside>
        <p>Sidebar content</p>
    </aside>
</main>

<footer>
    <p>© 2024 My Website</p>
</footer>
        

HTML Forms

<form action="/submit" method="POST">
    <!-- Text Input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Password Input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <!-- Select Dropdown -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>
    
    <!-- Checkbox -->
    <input type="checkbox" id="subscribe" name="subscribe">
    <label for="subscribe">Subscribe to newsletter</label>
    
    <!-- Radio Buttons -->
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
    
    <!-- Submit Button -->
    <button type="submit">Submit</button>
</form>
        

🎨 CSS Basics

Three Ways to Add CSS

1. Inline CSS

<p style="color: blue; font-size: 18px;">
    Blue text
</p>
                

Not recommended for large projects

2. Internal CSS

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
                

Good for single-page sites

3. External CSS

<head>
    <link rel="stylesheet" 
          href="styles.css">
</head>
                

Best practice for most projects

CSS Selectors

/* Element Selector */
p {
    color: black;
}

/* Class Selector */
.highlight {
    background-color: yellow;
}

/* ID Selector */
#header {
    font-size: 24px;
}

/* Multiple Selectors */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

/* Descendant Selector */
div p {
    margin: 10px;
}

/* Child Selector */
div > p {
    padding: 5px;
}

/* Pseudo-classes */
a:hover {
    color: red;
}

button:active {
    transform: scale(0.95);
}

input:focus {
    border-color: blue;
}
        

CSS Box Model

Every HTML element is a box with these properties:

Content

Padding: Space inside the border

Border: The edge of the element

Margin: Space outside the border

.box {
    /* Content size */
    width: 300px;
    height: 200px;
    
    /* Padding (inside) */
    padding: 20px;
    /* or individually: */
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    
    /* Border */
    border: 2px solid black;
    border-radius: 10px; /* Rounded corners */
    
    /* Margin (outside) */
    margin: 20px;
    /* or individually: */
    margin-top: 10px;
    margin-right: auto; /* Center horizontally */
    margin-bottom: 10px;
    margin-left: auto;
}
        

Colors in CSS

/* Named Colors */
color: red;
background-color: blue;

/* Hexadecimal */
color: #FF0000; /* Red */
color: #00FF00; /* Green */
color: #0000FF; /* Blue */

/* RGB */
color: rgb(255, 0, 0); /* Red */
background-color: rgb(0, 255, 0); /* Green */

/* RGBA (with transparency) */
background-color: rgba(0, 0, 255, 0.5); /* 50% transparent blue */

/* HSL */
color: hsl(0, 100%, 50%); /* Red */
        

CSS Flexbox (Modern Layout)

Flexbox makes it easy to create flexible layouts:

/* Container */
.container {
    display: flex;
    justify-content: space-between; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    gap: 20px; /* Space between items */
    flex-wrap: wrap; /* Wrap to next line if needed */
}

/* Items */
.item {
    flex: 1; /* Grow to fill space */
    /* or */
    flex-basis: 200px; /* Base width */
    flex-grow: 1; /* Can grow */
    flex-shrink: 1; /* Can shrink */
}

/* Common Flexbox Patterns */

/* Center Everything */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Navigation Bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

/* Card Grid */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px; /* Grow, shrink, base 300px */
}
        

CSS Grid (Advanced Layout)

/* Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto;
    gap: 20px; /* Space between grid items */
}

/* Responsive Grid */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Grid Areas (Named Layout) */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
        

CSS Animations

/* Transitions (smooth changes) */
.button {
    background-color: blue;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: darkblue;
    transform: scale(1.1);
}

/* Keyframe Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.element {
    animation: fadeIn 1s ease-in-out;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.bouncing {
    animation: bounce 2s infinite;
}
        

📱 Responsive Design

Why Responsive Design?

Your website needs to look good on:

📱 Mobile phones (320px - 480px)
📱 Tablets (768px - 1024px)
💻 Laptops (1024px - 1440px)
🖥️ Desktops (1440px+)

Media Queries

/* Mobile First Approach (Recommended) */

/* Base styles for mobile */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

/* Large screens */
@media (min-width: 1440px) {
    .container {
        width: 1200px;
    }
}

/* Common Breakpoints */
@media (max-width: 480px) { /* Mobile */ }
@media (min-width: 481px) and (max-width: 768px) { /* Tablet */ }
@media (min-width: 769px) { /* Desktop */ }
        

💡 Best Practices

HTML Best Practices

Use semantic HTML5 elements
Always include alt text for images
Use proper heading hierarchy (h1 → h6)
Validate your HTML
Keep code indented and organized

CSS Best Practices

Use external stylesheets
Organize CSS logically
Use classes over IDs for styling
Avoid !important
Use CSS variables for colors
Mobile-first responsive design

🎓 Learning Resources

Our Training Course

Take our comprehensive HTML & CSS course:

📚 HTML & CSS Fundamentals Course →

📖 Documentation

MDN Web Docs
W3Schools
CSS-Tricks

💻 Practice

CodePen
JSFiddle
Frontend Mentor

🎮 Games

Flexbox Froggy
Grid Garden
CSS Diner

🚀 Start Building Today!

HTML and CSS are the foundation of web development. Master them and you're on your way!

Start Learning →