Skill This
AI Skill Report Card

Implementing Semantic Frontend

A-85·Feb 25, 2026·Source: Web

Semantic-First Frontend Implementation

Quick Start15 / 15
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marketing Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a href="#" class="nav__logo">Brand</a>
      <ul class="nav__list">
        <li><a href="#" class="nav__link">About</a></li>
        <li><a href="#" class="nav__link">Services</a></li>
      </ul>
    </nav>
  </header>

  <main class="main">
    <section class="hero">
      <h1 class="hero__title">Main Headline</h1>
      <p class="hero__subtitle">Supporting text</p>
      <button class="button button--primary">Get Started</button>
    </section>

    <section class="features">
      <div class="container">
        <h2 class="features__title">Our Features</h2>
        <div class="features__grid">
          <article class="feature-card">
            <h3 class="feature-card__title">Feature One</h3>
            <p class="feature-card__text">Description</p>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p class="footer__copyright">&copy; 2024 Brand Name</p>
  </footer>
</body>
</html>
CSS
:root {
  --color-primary: #2563eb;
  --color-text: #1f2937;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --font-size-h1: 3rem;
  --font-size-body: 1rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-lg);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}
Recommendation▾
Add more concrete input/output examples showing different design scenarios (e.g., sidebar layout, testimonial section)
Workflow15 / 15

Progress:

  • Plan semantic structure (header/main/footer, sections)
  • Define design tokens as CSS custom properties
  • Build HTML with proper semantic elements
  • Style with BEM naming conventions
  • Implement layouts (Flexbox for components, Grid for grids)
  • Add animations with transform/opacity
  • Test accessibility and performance

Step 1: Plan Semantic Structure

Map design sections to HTML5 semantic elements:

  • <header> - Site header with navigation
  • <main> - Primary content area
  • <section> - Distinct content sections (hero, features, testimonials)
  • <article> - Self-contained items (blog posts, cards, testimonials)
  • <aside> - Sidebar content, related info
  • <nav> - Navigation menus
  • <footer> - Site footer

Step 2: Define Design Tokens

Convert design system values to CSS custom properties:

CSS
:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-accent: #f59e0b;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-background: #ffffff;
  --color-surface: #f9fafb;

  /* Typography */
  --font-family-heading: 'Inter', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Layout */
  --container-max-width: 1200px;
  --border-radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

Step 3: BEM Naming Structure

Follow Block__Element--Modifier pattern:

CSS
/* Block */
.button { }

/* Element */
.button__text { }
.button__icon { }

/* Modifier */
.button--primary { }
.button--large { }

/* Combined */
.nav__link--active { }
Recommendation▾
Include a templates section with copy-paste boilerplate for common marketing site patterns
Examples17 / 20

Example 1: Hero Section Input: Hero section with centered title, subtitle, and CTA button Output:

HTML
<section class="hero">
  <div class="container">
    <div class="hero__content">
      <h1 class="hero__title">Transform Your Business</h1>
      <p class="hero__subtitle">Professional solutions for modern challenges</p>
      <button class="button button--primary button--large">Get Started Today</button>
    </div>
  </div>
</section>
CSS
.hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.hero__title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.2;
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  opacity: 0.9;
}

Example 2: Feature Cards Grid Input: Three-column feature cards with icons Output:

HTML
<section class="features">
  <div class="container">
    <h2 class="features__title">Why Choose Us</h2>
    <div class="features__grid">
      <article class="feature-card">
        <div class="feature-card__icon">🚀</div>
        <h3 class="feature-card__title">Fast Delivery</h3>
        <p class="feature-card__text">Quick turnaround times</p>
      </article>
      <article class="feature-card">
        <div class="feature-card__icon">💎</div>
        <h3 class="feature-card__title">Premium Quality</h3>
        <p class="feature-card__text">High-end solutions</p>
      </article>
      <article class="feature-card">
        <div class="feature-card__icon">🛡️</div>
        <h3 class="feature-card__title">Secure & Reliable</h3>
        <p class="feature-card__text">Enterprise-grade security</p>
      </article>
    </div>
  </div>
</section>
CSS
.features {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-surface);
}

.features__title {
  text-align: center;
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-2xl);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}

.feature-card {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.feature-card__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}
Recommendation▾
Reduce verbosity in the design tokens section - assumes too much explanation of basic CSS concepts
Best Practices

Semantic HTML:

  • Use <section> for distinct content areas
  • Use <article> for standalone content (cards, testimonials)
  • Always include <main> landmark for screen readers
  • Add lang attribute to <html> element
  • Use heading hierarchy (h1 → h2 → h3) without skipping levels

CSS Layout Patterns:

  • Flexbox for component layouts (navigation, hero content, card internals)
  • Grid for page layouts (feature grids, gallery layouts)
  • Use gap property instead of margins between grid/flex items
  • Mobile-first responsive design with min-width media queries

Design Tokens:

  • Group related properties (colors, spacing, typography)
  • Use semantic names (--color-primary not --color-blue)
  • Create size scales (xs, sm, md, lg, xl)
  • Define tokens at :root level for global access

Performance Optimizations:

  • Use transform and opacity for animations (GPU accelerated)
  • Avoid animating width, height, top, left
  • Keep CSS specificity low (single class selectors)
  • Use will-change sparingly and remove after animation
Common Pitfalls

Semantic Mistakes:

  • Don't use <section> without a heading
  • Don't nest <header> or <footer> inside <article>
  • Don't skip heading levels (h1 → h3)
  • Don't use <div> when semantic element exists

BEM Anti-patterns:

  • Avoid deep nesting: .block__element__subelement (use .block__subelement)
  • Don't chain modifiers: .block--modifier1--modifier2 (use separate classes)
  • Don't use element styling without block: .element (always .block__element)

Layout Issues:

  • Don't use Grid for simple component layouts (use Flexbox)
  • Don't use Flexbox for complex 2D layouts (use Grid)
  • Avoid position: absolute for layout (use Grid/Flexbox)
  • Don't forget box-sizing: border-box for consistent sizing

Performance Problems:

  • Avoid animating layout properties (width, height, margin, padding)
  • Don't create overly specific selectors (.page .section .card .title)
  • Don't use !important to override specificity issues
  • Avoid inline styles that override design tokens
0
Grade A-AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
15/15
Workflow
15/15
Examples
17/20
Completeness
20/20
Format
15/15
Conciseness
13/15
Save to My Skills