HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Reusable Components

In modern web development, we don't build web pages as giant blocks of code. We break them down into smaller, reusable UI Components.

Think of components like Lego blocks: a Button component, a Card component, a Navbar component. You design the HTML and CSS for a "Card" once, and then you can reuse that exact same HTML structure and CSS class anywhere on your website!

Benefits:

Consistency: The UI looks the same everywhere.
Maintainability: If you want to change the border radius of your cards, you change one CSS class, and it updates across the entire site.
Speed: You can build new pages quickly by snapping existing components together.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; background: #eef2f5; padding: 30px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
    
    /* 
      This is our Reusable "Card" Component CSS.
      We write it once, and can apply it to hundreds of HTML divs.
    */
    .ui-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      width: 300px;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .ui-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .ui-card-img { width: 100%; height: 180px; object-fit: cover; }
    .ui-card-body { padding: 20px; }
    .ui-card-title { margin: 0 0 10px 0; color: #2c3e50; font-size: 1.25em; }
    .ui-card-text { color: #7f8c8d; font-size: 0.95em; line-height: 1.5; margin-bottom: 20px; }
    
    /* Reusable Button Component */
    .ui-btn {
      display: inline-block; padding: 8px 16px; background: #3498db; color: white; text-decoration: none; border-radius: 20px; font-weight: bold; font-size: 0.9em;
    }
    .ui-btn:hover { background: #2980b9; }
  </style>
</head>
<body>

<div class="ui-card">
    <img src="https://picsum.photos/id/10/300/180" class="ui-card-img" alt="Forest">
    <div class="ui-card-body">
      <h3 class="ui-card-title">Forest Retreat</h3>
      <p class="ui-card-text">Explore the dense forests and reconnect with nature in this beautiful landscape.</p>
      <a href="#" class="ui-btn">Learn More</a>
    </div>
  </div>

<div class="ui-card">
    <img src="https://picsum.photos/id/11/300/180" class="ui-card-img" alt="Landscape">
    <div class="ui-card-body">
      <h3 class="ui-card-title">Mountain Hike</h3>
      <p class="ui-card-text">Join our guided tours through the steepest mountains and enjoy the view.</p>
      <a href="#" class="ui-btn">Book Now</a>
    </div>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Reusable Components

Reusable Components

Benefits:

Try It Yourself

Topics