Frontend UI Development

Instructions

1. •

   Page & layout structure

   • •Responsive grid / flex layouts
   • •Clear visual hierarchy
   • •Consistent spacing and alignment
2. •

   Components

   • •Reusable and modular components
   • •Props-driven design (where applicable)
   • •Accessible elements (buttons, inputs, links)
3. •

   Styling

   • •Clean, modern design system
   • •Consistent colors, typography, and spacing
   • •Mobile-first and responsive breakpoints
4. •

   UI/UX principles

   • •Intuitive navigation
   • •Clear call-to-actions
   • •User-friendly interactions and feedback

Best Practices

• •Follow mobile-first approach
• •Keep UI simple and purposeful
• •Use consistent design tokens
• •Ensure accessibility (contrast, focus states)
• •Optimize for performance and readability

Example Structure

<div class="page-container">
  <header class="navbar">
    <h1 class="logo">Brand</h1>
    <nav class="nav-links">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main class="content">
    <section class="card">
      <h2>Section Title</h2>
      <p>Well-structured and readable content.</p>
      <button class="primary-btn">Action</button>
    </section>
  </main>
</div>