Frontend Skill

Instructions

1. Page & Layout Structure

   • Organize pages with semantic HTML elements
   • Use responsive layout patterns (flexbox, grid)
   • Ensure proper spacing, alignment, and hierarchy
   • Keep components modular and reusable

2. Component Development

   • Build UI components (buttons, forms, cards, modals)
   • Use frameworks/libraries like React, Vue, or Svelte
   • Pass props or state to make components dynamic
   • Separate presentation and logic when possible

3. Styling

   • Use CSS, Sass, Tailwind, or styled-components
   • Apply consistent color schemes and typography
   • Implement hover, focus, and active states
   • Optimize for mobile-first responsiveness

4. Frontend Best Practices

   • Keep code modular and reusable
   • Use semantic HTML for accessibility
   • Optimize images and assets for performance