HTML5 & CSS3 Mastery

Master semantic HTML and modern CSS techniques for responsive design

Last generated Jan 9, 2026 UTC

HTML5 & CSS3 Mastery

Master modern web development with HTML5 and CSS3 through free flashcards and spaced repetition practice. This comprehensive lesson covers semantic HTML5 elements, CSS3 layout techniques including Flexbox and Grid, responsive design patterns, and modern styling features—essential skills for building React applications and professional web interfaces.

Welcome to HTML5 & CSS3 Mastery

💻 Before diving into React, you need a rock-solid foundation in HTML5 and CSS3. These technologies form the backbone of every web application. While React generates and manipulates HTML, understanding the underlying structure and styling capabilities is crucial for building maintainable, accessible, and visually appealing applications.

Think of HTML5 as the skeleton of your web page—it provides structure and meaning. CSS3 is the skin and clothing—it controls appearance, layout, and visual presentation. Together, they create the user interface that React will bring to life with interactivity.

Why This Matters for React Developers

🎯 React developers who deeply understand HTML5 and CSS3:

Write cleaner, more semantic JSX
Debug layout issues faster
Create better component APIs
Build accessible interfaces
Optimize for performance
Communicate effectively with designers

Core Concepts: HTML5 Semantic Elements

What Are Semantic Elements?

Semantic elements clearly describe their meaning to both the browser and the developer. Instead of using generic <div> and <span> tags everywhere, HTML5 introduced elements that convey structural meaning.

<table> <tr><th>Semantic Element</th><th>Purpose</th><th>Replaces</th></tr> <tr><td><code><header></code></td><td>Introductory content or navigation</td><td><code><div class="header"></code></td></tr> <tr><td><code><nav></code></td><td>Navigation links</td><td><code><div class="nav"></code></td></tr> <tr><td><code><main></code></td><td>Primary content (one per page)</td><td><code><div id="main"></code></td></tr> <tr><td><code><article></code></td><td>Self-contained content</td><td><code><div class="article"></code></td></tr> <tr><td><code><section></code></td><td>Thematic grouping of content</td><td><code><div class="section"></code></td></tr> <tr><td><code><aside></code></td><td>Sidebar or tangential content</td><td><code><div class="sidebar"></code></td></tr> <tr><td><code><footer></code></td><td>Footer information</td><td><code><div class="footer"></code></td></tr> </table>

Document Structure Flow

<pre> ┌─────────────────────────────────────────┐ │ <header> │ │ ┌─────────────────────────────────┐ │ │ │ <nav> │ │ │ │ Home | About | Services | Contact│ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────────┘

┌─────────────────────────────────────────┐ │ <main> │ │ ┌─────────────────┐ ┌──────────────┐ │ │ │ <article> │ │ <aside> │ │ │ │ │ │ │ │ │ │ <section> │ │ Sidebar │ │ │ │ Content... │ │ Links │ │ │ │ </section> │ │ │ │ │ │ │ │ │ │ │ │ <section> │ │ │ │ │ │ More content │ │ │ │ │ │ </section> │ │ │ │ │ └─────────────────┘ └──────────────┘ │ └─────────────────────────────────────────┘

💡 Pro Tip: Screen readers and search engines use semantic elements to understand page structure. This improves accessibility and SEO simultaneously.

Form Elements & Input Types

HTML5 dramatically expanded form capabilities with new input types and attributes:

<table> <tr><th>Input Type</th><th>Purpose</th><th>Mobile Benefit</th></tr> <tr><td><code>email</code></td><td>Email address validation</td><td>Shows @ key on mobile keyboard</td></tr> <tr><td><code>tel</code></td><td>Telephone number</td><td>Shows numeric keypad</td></tr> <tr><td><code>url</code></td><td>Web address</td><td>Shows .com key</td></tr> <tr><td><code>number</code></td><td>Numeric input</td><td>Shows number keyboard</td></tr> <tr><td><code>date</code></td><td>Date picker</td><td>Native date selector</td></tr> <tr><td><code>range</code></td><td>Slider control</td><td>Touch-friendly slider</td></tr> <tr><td><code>color</code></td><td>Color picker</td><td>Native color selector</td></tr> </table>

Core Concepts: CSS3 Layout Systems

The Evolution of Layout

🔄 CSS layout has evolved through several generations:

<pre> 1990s-2000s 2010s 2015+ 2017+ │ │ │ │ ▼ ▼ ▼ ▼ 📊 Tables → 🎈 Floats → 📦 Flexbox → 🎯 Grid (semantic (clearing (1D layout) (2D layout) abuse) headaches) </pre>

Flexbox: One-Dimensional Layout

Flexbox excels at distributing space along a single axis (row or column). Perfect for navigation bars, button groups, and component internals.

Key Flexbox Properties

Container Properties:

<table> <tr><th>Property</th><th>Values</th><th>Purpose</th></tr> <tr><td><code>display</code></td><td><code>flex</code></td><td>Activates flexbox</td></tr> <tr><td><code>flex-direction</code></td><td><code>row | column</code></td><td>Main axis direction</td></tr> <tr><td><code>justify-content</code></td><td><code>flex-start | center | space-between | space-around</code></td><td>Main axis alignment</td></tr> <tr><td><code>align-items</code></td><td><code>flex-start | center | stretch</code></td><td>Cross axis alignment</td></tr> <tr><td><code>flex-wrap</code></td><td><code>nowrap | wrap</code></td><td>Allow items to wrap</td></tr> </table>

Item Properties:

<table> <tr><th>Property</th><th>Purpose</th><th>Example</th></tr> <tr><td><code>flex-grow</code></td><td>How much to grow relative to siblings</td><td><code>flex-grow: 1</code></td></tr> <tr><td><code>flex-shrink</code></td><td>How much to shrink</td><td><code>flex-shrink: 0</code></td></tr> <tr><td><code>flex-basis</code></td><td>Initial size before growing/shrinking</td><td><code>flex-basis: 200px</code></td></tr> <tr><td><code>flex</code></td><td>Shorthand for all three</td><td><code>flex: 1 0 200px</code></td></tr> </table>

🧠 Memory Device for justify-content:

justify = just like reading direction (main axis)
align = across the reading direction (cross axis)

Flexbox Visual Model

<pre> flex-direction: row ┌─────────────────────────────────────────┐ │ FLEX CONTAINER │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ ←─── flex items │ └────┘ └────┘ └────┘ └────┘ │ │ ←──────────────────────────────→ │ │ MAIN AXIS (justify) │ │ │ │ ↑ │ │ │ CROSS AXIS (align) │ │ ↓ │ └─────────────────────────────────────────┘

flex-direction: column ┌─────────────────┐ │ FLEX CONTAINER │ │ ┌───────────┐ │ │ │ 1 │ │ ↑ │ └───────────┘ │ │ MAIN AXIS │ ┌───────────┐ │ │ (justify) │ │ 2 │ │ │ │ └───────────┘ │ ↓ │ ┌───────────┐ │ │ │ 3 │ │ │ └───────────┘ │ │ ←─────────────→ │ │ CROSS AXIS │ │ (align) │ └─────────────────┘ </pre>

CSS Grid: Two-Dimensional Layout

CSS Grid handles both rows and columns simultaneously. Ideal for page layouts, card grids, and complex component structures.

Grid Container Properties

<table> <tr><th>Property</th><th>Purpose</th><th>Example</th></tr> <tr><td><code>display</code></td><td>Activate grid</td><td><code>display: grid</code></td></tr> <tr><td><code>grid-template-columns</code></td><td>Define column tracks</td><td><code>200px 1fr 1fr</code></td></tr> <tr><td><code>grid-template-rows</code></td><td>Define row tracks</td><td><code>auto 1fr auto</code></td></tr> <tr><td><code>gap</code></td><td>Spacing between cells</td><td><code>gap: 20px</code></td></tr> <tr><td><code>grid-template-areas</code></td><td>Named layout regions</td><td>See example below</td></tr> </table>

Grid Item Properties

<table> <tr><th>Property</th><th>Purpose</th><th>Example</th></tr> <tr><td><code>grid-column</code></td><td>Span columns</td><td><code>grid-column: 1 / 3</code></td></tr> <tr><td><code>grid-row</code></td><td>Span rows</td><td><code>grid-row: 1 / 2</code></td></tr> <tr><td><code>grid-area</code></td><td>Assign to named area</td><td><code>grid-area: header</code></td></tr> </table>

Grid Layout Visualization

<pre> GRID SYSTEM (3 columns × 3 rows)

Column 1    Column 2    Column 3
  200px       1fr         1fr

┌───────────┬───────────┬───────────┐ │ │ │ │ Row 1 │ Header (spans all 3 columns) │ (auto) │ │ │ │ ├───────────┼───────────┼───────────┤ │ │ │ │ Row 2 │ Sidebar │ Main │ Main │ (1fr) │ │ Content │ Content │ │ │ (spans 2 columns) │ ├───────────┼───────────┴───────────┤ │ │ │ Row 3 │ Sidebar │ Footer │ (auto) │ │ │ └───────────┴───────────────────────┘

 gap: 20px creates spacing

</pre>

Core Concepts: Responsive Design

Mobile-First Approach

📱 Mobile-first means writing CSS for mobile devices first, then adding complexity for larger screens using media queries.

Why Mobile-First?

✅ Benefits:

Forces focus on essential content
Better performance (mobile doesn't download unused desktop CSS)
Progressive enhancement mindset
Easier to scale up than scale down

<pre> MOBILE-FIRST WORKFLOW

📱 Phone (320px+) → Add features → Base styles Single column

                 🖥️ Tablet (768px+)  →  Add features  →
                    Multi-column
                    Larger text
                    
                                      🖥️ Desktop (1024px+)
                                         Complex layouts
                                         Hover effects
                                         Large images

</pre>

Media Queries

Media queries apply CSS rules based on device characteristics:

/* Base styles - mobile first */
.container {
  width: 100%;
  padding: 1rem;
}

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

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

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

Common Breakpoints

<table> <tr><th>Device</th><th>Breakpoint</th><th>Typical Use</th></tr> <tr><td>📱 Small phone</td><td>320px</td><td>Base styles</td></tr> <tr><td>📱 Phone</td><td>480px</td><td>Larger phones</td></tr> <tr><td>📱 Tablet</td><td>768px</td><td>iPads, tablets</td></tr> <tr><td>💻 Desktop</td><td>1024px</td><td>Laptops</td></tr> <tr><td>🖥️ Large desktop</td><td>1200px+</td><td>Large monitors</td></tr> </table>

💡 Pro Tip: Use em units for breakpoints instead of px to respect user font size preferences: @media (min-width: 48em) instead of @media (min-width: 768px).

Responsive Units

<table> <tr><th>Unit</th><th>Relative To</th><th>Best For</th></tr> <tr><td><code>%</code></td><td>Parent element</td><td>Widths, flexible layouts</td></tr> <tr><td><code>em</code></td><td>Parent font size</td><td>Padding, margins, spacing</td></tr> <tr><td><code>rem</code></td><td>Root font size</td><td>Consistent sizing throughout</td></tr> <tr><td><code>vw</code></td><td>Viewport width (1% of width)</td><td>Full-width elements</td></tr> <tr><td><code>vh</code></td><td>Viewport height</td><td>Hero sections, full-height</td></tr> <tr><td><code>vmin</code></td><td>Smaller of vw or vh</td><td>Responsive typography</td></tr> <tr><td><code>vmax</code></td><td>Larger of vw or vh</td><td>Background elements</td></tr> </table>

Core Concepts: Modern CSS3 Features

Custom Properties (CSS Variables)

CSS Custom Properties enable reusable values and dynamic theming:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
}

.button:hover {
  background-color: var(--secondary-color);
}

🔧 Try This: CSS variables can be changed with JavaScript for dynamic theming:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Transitions & Animations

Transitions (State Change Animations)

.button {
  background-color: #3498db;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}

.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

Transition Properties: <table> <tr><th>Property</th><th>Purpose</th><th>Example</th></tr> <tr><td><code>transition-property</code></td><td>What to animate</td><td><code>background-color</code></td></tr> <tr><td><code>transition-duration</code></td><td>How long</td><td><code>0.3s</code></td></tr> <tr><td><code>transition-timing-function</code></td><td>Easing curve</td><td><code>ease-in-out</code></td></tr> <tr><td><code>transition-delay</code></td><td>Wait before starting</td><td><code>0.1s</code></td></tr> </table>

Animations (Keyframe Animations)

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification {
  animation: slideIn 0.5s ease-out forwards;
}

Transform Functions

<table> <tr><th>Function</th><th>Purpose</th><th>Example</th></tr> <tr><td><code>translate()</code></td><td>Move element</td><td><code>transform: translateX(20px)</code></td></tr> <tr><td><code>rotate()</code></td><td>Rotate element</td><td><code>transform: rotate(45deg)</code></td></tr> <tr><td><code>scale()</code></td><td>Resize element</td><td><code>transform: scale(1.5)</code></td></tr> <tr><td><code>skew()</code></td><td>Slant element</td><td><code>transform: skewX(10deg)</code></td></tr> </table>

💡 Performance Tip: Use transform and opacity for animations—they're GPU-accelerated and don't trigger layout recalculation.

Practical Examples

Example 1: Semantic HTML5 Blog Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Awesome Blog</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Understanding HTML5 Semantics</h2>
        <p><time datetime="2024-01-15">January 15, 2024</time></p>
      </header>
      
      <section>
        <h3>Introduction</h3>
        <p>Semantic HTML improves accessibility and SEO...</p>
      </section>
      
      <section>
        <h3>Key Benefits</h3>
        <ul>
          <li>Better accessibility</li>
          <li>Improved SEO</li>
          <li>Easier maintenance</li>
        </ul>
      </section>
      
      <footer>
        <p>Tags: <a href="#html">HTML5</a>, <a href="#semantics">Semantics</a></p>
      </footer>
    </article>
    
    <aside>
      <h3>Related Posts</h3>
      <nav>
        <ul>
          <li><a href="#css-grid">CSS Grid Guide</a></li>
          <li><a href="#flexbox">Flexbox Tutorial</a></li>
        </ul>
      </nav>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Blog. All rights reserved.</p>
  </footer>
</body>
</html>

Why This Works:

✅ Clear document structure with <header>, <main>, <article>, <aside>, <footer>
✅ Nested <section> elements group related content
✅ <time> element with datetime attribute for machine-readable dates
✅ Multiple <nav> elements where appropriate
✅ Screen readers can easily navigate between sections

/* Mobile-first navigation */
nav {
  background-color: #333;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
}

nav li {
  border-bottom: 1px solid #444;
}

nav a {
  display: block;
  padding: 1rem;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

nav a:hover {
  background-color: #555;
}

/* Tablet and up: horizontal navigation */
@media (min-width: 768px) {
  nav ul {
    flex-direction: row; /* Horizontal layout */
    justify-content: space-around;
  }
  
  nav li {
    border-bottom: none;
    border-right: 1px solid #444;
  }
  
  nav li:last-child {
    border-right: none;
  }
}

Key Concepts Demonstrated:

📱 Mobile-first: Base styles for mobile, then enhance for larger screens
🔄 Flexbox direction change: column → row with media query
⚡ Smooth transitions: Hover effects feel polished
🎯 Justify-content: Distributes navigation items evenly on desktop

Example 3: CSS Grid Dashboard Layout

<div class="dashboard">
  <header class="header">Dashboard Header</header>
  <nav class="sidebar">Navigation</nav>
  <main class="content">Main Content</main>
  <aside class="widgets">Widgets</aside>
  <footer class="footer">Footer</footer>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header  header"
    "sidebar content widgets"
    "footer  footer  footer";
  min-height: 100vh;
  gap: 20px;
}

.header  { grid-area: header; background: #3498db; }
.sidebar { grid-area: sidebar; background: #34495e; }
.content { grid-area: content; background: #ecf0f1; }
.widgets { grid-area: widgets; background: #95a5a6; }
.footer  { grid-area: footer; background: #2c3e50; }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "sidebar"
      "content"
      "widgets"
      "footer";
  }
}

Why Grid Shines Here:

🎯 Named areas: Visual ASCII layout in CSS matches actual layout
📐 Precise control: Fixed sidebar/widget widths, flexible content
🔄 Easy responsive: Completely reorganize layout with one media query
📏 Gap property: Consistent spacing without margin math

<pre> DESKTOP LAYOUT (Grid Areas): ┌─────────────────────────────────────────┐ │ header (spans 3 cols) │ ├───────────┬─────────────────┬───────────┤ │ │ │ │ │ sidebar │ content │ widgets │ │ │ │ │ ├───────────┴─────────────────┴───────────┤ │ footer (spans 3 cols) │ └─────────────────────────────────────────┘

MOBILE LAYOUT (Single Column): ┌─────────────┐ │ header │ ├─────────────┤ │ sidebar │ ├─────────────┤ │ content │ ├─────────────┤ │ widgets │ ├─────────────┤ │ footer │ └─────────────┘ </pre>

Example 4: Advanced Form with CSS3 Styling

<form class="modern-form">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" required 
           placeholder="you@example.com">
  </div>
  
  <div class="form-group">
    <label for="phone">Phone</label>
    <input type="tel" id="phone" 
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
           placeholder="123-456-7890">
  </div>
  
  <div class="form-group">
    <label for="date">Birth Date</label>
    <input type="date" id="date">
  </div>
  
  <div class="form-group">
    <label for="range">Satisfaction</label>
    <input type="range" id="range" min="0" max="100" value="50">
    <output for="range"></output>
  </div>
  
  <button type="submit">Submit</button>
</form>

.modern-form {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

input:invalid {
  border-color: #e74c3c;
}

input:valid {
  border-color: #2ecc71;
}

input[type="range"] {
  padding: 0;
}

button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

button:active {
  transform: translateY(0);
}

CSS3 Features Highlighted:

🎨 Box-shadow: Creates depth and elevation
🌈 Linear-gradient: Modern gradient backgrounds
⚡ Transitions: Smooth state changes on focus/hover
✅ Pseudo-classes: :valid, :invalid for visual feedback
📱 HTML5 inputs: Native validation and mobile keyboards

Common Mistakes

⚠️ Mistake #1: Div Soup (Overusing Generic Elements)

❌ Wrong:

<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
  </div>
</div>
<div class="main-content">
  <div class="article">
    <div class="article-header">Title</div>
    <div class="article-body">Content...</div>
  </div>
</div>

✅ Correct:

<header>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <p>Content...</p>
  </article>
</main>

Why It Matters: Semantic elements improve accessibility, SEO, and code readability.

⚠️ Mistake #2: Hardcoding Sizes Instead of Using Relative Units

❌ Wrong:

.container {
  width: 1200px; /* Breaks on smaller screens */
  padding: 20px;
  font-size: 16px;
}

✅ Correct:

.container {
  max-width: 1200px; /* Allows shrinking */
  width: 90%; /* Responsive width */
  padding: 1.25rem; /* Scales with font size */
  font-size: 1rem; /* Respects user preferences */
}

⚠️ Mistake #3: Not Using Flexbox/Grid for Layout

❌ Wrong:

.item {
  float: left;
  width: 33.33%;
  margin-right: -4px; /* Fighting whitespace */
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

✅ Correct:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.item {
  flex: 1 1 calc(33.33% - 1rem);
}

⚠️ Mistake #4: Forgetting the Viewport Meta Tag

❌ Wrong:

<head>
  <title>My Site</title>
</head>

Result: Mobile browsers zoom out to show desktop version.

✅ Correct:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
</head>

⚠️ Mistake #5: Animating Expensive Properties

❌ Wrong (Causes layout thrashing):

.box {
  transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;
}
.box:hover {
  width: 200px;
  height: 200px;
  left: 50px;
  top: 50px;
}

✅ Correct (GPU-accelerated):

.box {
  transition: transform 0.3s, opacity 0.3s;
}
.box:hover {
  transform: scale(1.2) translate(10px, 10px);
  opacity: 0.8;
}

Performance Impact:

🐌 Animating width, height, top, left triggers layout recalculation
⚡ Animating transform and opacity uses GPU acceleration

⚠️ Mistake #6: Not Planning for Content Overflow

❌ Wrong:

.card {
  width: 300px;
  height: 200px; /* Fixed height breaks with long content */
}

✅ Correct:

.card {
  width: 300px;
  min-height: 200px; /* Grows with content */
  /* OR */
  height: 200px;
  overflow: auto; /* Allows scrolling */
}

Key Takeaways

🎯 HTML5 Mastery:

Use semantic elements (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) instead of generic <div> tags
Leverage HTML5 input types (email, tel, date, number) for better UX and mobile keyboards
Structure documents logically for accessibility and SEO

🎯 CSS3 Layout:

Flexbox for one-dimensional layouts (rows or columns)
CSS Grid for two-dimensional layouts (rows and columns)
Avoid floats and positioning hacks for layout

🎯 Responsive Design:

Start mobile-first, then enhance for larger screens
Use relative units (rem, em, %, vw, vh) over fixed pixels
Test on real devices, not just browser devtools

🎯 Modern CSS3:

CSS Custom Properties for maintainable, themeable code
Transitions for state changes, animations for complex motion
Animate transform and opacity for best performance

🎯 Best Practices:

Always include <meta name="viewport"> tag
Validate HTML and CSS regularly
Use browser devtools to debug layout issues
Consider accessibility from the start

🤔 Did You Know?

CSS Grid was inspired by print layout tools! The grid-template-areas syntax resembles traditional page design software, making it intuitive for designers transitioning to web development.

Flexbox's name comes from "flexible box", and it was originally called the "Flexible Box Layout Module." The CSS Working Group debated the naming for years before settling on "Flexbox."

The rem unit was added to CSS3 specifically to solve font-size cascade problems with em units. Before rem, nested elements would compound their font sizes, making calculations nightmarish.

<div style="border: 2px solid #4fd1c5; border-radius: 8px; padding: 16px; margin: 16px 0; background: rgba(79, 209, 197, 0.1);"> <h4>📋 Quick Reference Card</h4>

Semantic HTML5 Elements: <table> <tr><td><code><header></code></td><td>Page/section header</td></tr> <tr><td><code><nav></code></td><td>Navigation links</td></tr> <tr><td><code><main></code></td><td>Primary content (one per page)</td></tr> <tr><td><code><article></code></td><td>Self-contained content</td></tr> <tr><td><code><section></code></td><td>Thematic grouping</td></tr> <tr><td><code><aside></code></td><td>Sidebar content</td></tr> <tr><td><code><footer></code></td><td>Footer information</td></tr> </table>

Flexbox Cheat Sheet: <table> <tr><td><code>display: flex</code></td><td>Enable flexbox</td></tr> <tr><td><code>flex-direction</code></td><td>row | column</td></tr> <tr><td><code>justify-content</code></td><td>Main axis alignment</td></tr> <tr><td><code>align-items</code></td><td>Cross axis alignment</td></tr> <tr><td><code>flex-wrap</code></td><td>Allow wrapping</td></tr> <tr><td><code>gap</code></td><td>Space between items</td></tr> </table>

CSS Grid Cheat Sheet: <table> <tr><td><code>display: grid</code></td><td>Enable grid</td></tr> <tr><td><code>grid-template-columns</code></td><td>Define column tracks</td></tr> <tr><td><code>grid-template-rows</code></td><td>Define row tracks</td></tr> <tr><td><code>gap</code></td><td>Space between cells</td></tr> <tr><td><code>grid-template-areas</code></td><td>Named regions</td></tr> </table>

Responsive Units: <table> <tr><td><code>rem</code></td><td>Root element font size</td></tr> <tr><td><code>em</code></td><td>Parent font size</td></tr> <tr><td><code>%</code></td><td>Parent element</td></tr> <tr><td><code>vw/vh</code></td><td>Viewport width/height</td></tr> </table>

Media Query Template:

/* Mobile first */
.element { /* base styles */ }

@media (min-width: 768px) {
  .element { /* tablet */ }
}

@media (min-width: 1024px) {
  .element { /* desktop */ }
}

</div>

📚 Further Study

MDN Web Docs - HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML - Comprehensive reference for all HTML5 elements and attributes
CSS-Tricks Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Visual guide with interactive examples
CSS Grid Garden: https://cssgridgarden.com/ - Interactive game to learn CSS Grid through practice

Next Steps: With HTML5 and CSS3 mastered, you're ready to tackle JavaScript fundamentals. Understanding the DOM (Document Object Model) and how JavaScript manipulates HTML/CSS will prepare you perfectly for React's component-based architecture. 🚀

📝

Ready to practice?

This lesson has 15 questions to help you learn

HTML5 & CSS3 Mastery

HTML5 & CSS3 Mastery

Welcome to HTML5 & CSS3 Mastery

Why This Matters for React Developers

Core Concepts: HTML5 Semantic Elements

What Are Semantic Elements?

Document Structure Flow

Form Elements & Input Types

Core Concepts: CSS3 Layout Systems

The Evolution of Layout

Flexbox: One-Dimensional Layout

Key Flexbox Properties

Flexbox Visual Model

CSS Grid: Two-Dimensional Layout

Grid Container Properties

Grid Item Properties

Grid Layout Visualization

Core Concepts: Responsive Design

Mobile-First Approach

Why Mobile-First?

Media Queries

Common Breakpoints

Responsive Units

Core Concepts: Modern CSS3 Features

Custom Properties (CSS Variables)

Transitions & Animations

Transitions (State Change Animations)

Animations (Keyframe Animations)

Transform Functions

Practical Examples

Example 1: Semantic HTML5 Blog Layout

Example 2: Responsive Flexbox Navigation

Example 3: CSS Grid Dashboard Layout

Example 4: Advanced Form with CSS3 Styling

Common Mistakes

⚠️ Mistake #1: Div Soup (Overusing Generic Elements)

⚠️ Mistake #2: Hardcoding Sizes Instead of Using Relative Units

⚠️ Mistake #3: Not Using Flexbox/Grid for Layout

⚠️ Mistake #4: Forgetting the Viewport Meta Tag

⚠️ Mistake #5: Animating Expensive Properties

⚠️ Mistake #6: Not Planning for Content Overflow

Key Takeaways

🤔 Did You Know?

📚 Further Study