# frontend-pages

> Build pages, components, layouts, and styling for modern web applications.

- Author: Shaniii1994
- Repository: Shaniii1994/Hackathon-II-Phase-III
- Version: 20260208064036
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/Shaniii1994/Hackathon-II-Phase-III
- Web: https://mule.run/skillshub/@@Shaniii1994/Hackathon-II-Phase-III~frontend-pages:20260208064036

---

---
name: frontend-pages
description: Build pages, components, layouts, and styling for modern web applications.
---

# Frontend Skill – Pages, Components, Layout, Styling

## Instructions

1. **Layout structure**
   - Use semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`)
   - Create responsive grids or flex layouts
   - Maintain consistent spacing and alignment

2. **Components**
   - Build reusable UI components (buttons, cards, forms, modals)
   - Use classes or props for customization
   - Ensure accessibility (ARIA labels, keyboard navigation)

3. **Styling**
   - Apply CSS, SCSS, or Tailwind for consistent design
   - Use CSS variables or theme files for colors and typography
   - Add hover, focus, and active states for interactivity

4. **Animations & Effects**
   - Smooth transitions for hover and state changes
   - Fade-in or slide-in elements
   - Optional parallax or scroll-based animations

## Best Practices
- Keep components small and reusable
- Follow consistent naming conventions
- Optimize images and assets
- Use mobile-first design
- Ensure text readability and color contrast
- Keep layouts simple and intuitive

## Example Structure
```html
<section class="hero">
  <div class="hero-content">
    <h1 class="animate-fade-in">Build Modern Frontend Pages</h1>
    <p class="animate-fade-in-delay">Reusable components, layouts, and styling best practices</p>
    <button class="cta-button">Start Building</button>
  </div>
</section>

<section class="features-grid">
  <div class="feature-card">Responsive Layout</div>
  <div class="feature-card">Reusable Components</div>
  <div class="feature-card">Custom Styling</div>
</section>