frontend-pages-components

Frontend Page & Component Development

Instructions

1. Page Structure

   • Semantic HTML5 structure (header, main, section, footer)
   • Clear content hierarchy
   • Accessibility-first markup (ARIA where needed)

2. Layout System

   • Use Flexbox and Grid appropriately
   • Responsive layouts for mobile, tablet, and desktop
   • Consistent spacing and alignment

3. Components

   • Reusable and composable UI components
   • Props-driven or data-driven design
   • Separation of structure, style, and behavior

4. Styling

   • Modern CSS (Flexbox, Grid, variables)
   • Utility-first or component-based styling
   • Scalable class naming (BEM / Tailwind / CSS Modules)

5. Responsiveness

   • Mobile-first approach
   • Breakpoints for key screen sizes
   • Fluid typography and spacing

6. Interactivity

   • Hover, focus, and active states
   • Smooth transitions and subtle animations
   • Keyboard and screen-reader friendly

Best Practices

• Write clean, readable, and maintainable code
• Avoid inline styles unless necessary
• Use design tokens for colors and spacing
• Optimize for performance and accessibility
• Keep components small and single-purpose

Example Structure

<main class="page">
  <header class="page-header">
    <h1 class="page-title">Page Title</​h1>
  </​header>

  <section class="content-grid">
    <article class="card">
      <h2 class="card-title">Component Title</​h2>
      <p class="card-text">
        This is a reusable UI component.
      </​p>
      <button class="btn-primary">Action</​button>
    </​article>
  </​section>

  <footer class="page-footer">
    <p>© 2026 Your Company</​p>
  </​footer>
</​main>