Frontend Layout & Component Design

Name: frontend-layout
Rating: 62
Author: Abeersk

Instructions

•
Page Structure
- •Define main sections (header, main, footer)
- •Use semantic HTML
- •Ensure responsive design
•
Components
- •Buttons, cards, forms, modals
- •Reusable components for consistency
- •Proper padding, margins, and alignment
•
Styling
- •Use Tailwind CSS or CSS modules
- •Consistent color scheme and typography
- •Responsive breakpoints (mobile, tablet, desktop)
•
Layout
- •Flexbox or CSS Grid for alignment
- •Proper spacing between elements
- •Maintain visual hierarchy

Best Practices

•Keep components small and reusable
•Avoid inline styles
•Use semantic class names
•Test across different screen sizes
•Follow accessibility guidelines (aria-labels, contrast, focus states)

Example Structure

html

<section class="page-container">
  <header class="header p-4 bg-gray-100 flex justify-between items-center">
    <h1 class="text-2xl font-bold">Website Title</h1>
    <nav>
      <ul class="flex gap-4">
        <li><a href="#" class="hover:text-blue-500">Home</a></li>
        <li><a href="#" class="hover:text-blue-500">About</a></li>
        <li><a href="#" class="hover:text-blue-500">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main class="main-content p-6 grid gap-6 md:grid-cols-2">
    <div class="card p-4 bg-white shadow rounded">Component 1</div>
    <div class="card p-4 bg-white shadow rounded">Component 2</div>
  </main>

  <footer class="footer p-4 bg-gray-200 text-center">
    &copy; 2026 Your Company
  </footer>
</section>