

This is part 1 of the Interview series. See also [Part 2: JavaScript](/blog/interview-questions-javascript) and [Part 3: React](/blog/interview-questions-react).

## General Questions

###accordion: Tell me about your past/current role - what do you do?

I'm a frontend developer with X years of experience building responsive, accessible web applications. My role involves:

- Developing user interfaces using modern JavaScript frameworks like React/Vue
- Writing clean, maintainable CSS with methodologies like BEM or CSS-in-JS
- Ensuring cross-browser compatibility and accessibility compliance
- Collaborating with designers and backend developers to implement features
- Optimizing application performance and user experience
- Participating in code reviews and mentoring junior developers

###accordion: What is the typical workflow from the point you get a task to its completion?

My typical workflow follows these steps:

1. **Requirements Analysis:** Review task specifications and clarify any ambiguities with the product owner/designer
2. **Technical Planning:** Break down the task into smaller components, estimate effort, and identify potential challenges
3. **Environment Setup:** Create feature branch, set up local development environment
4. **Implementation:** Write code following best practices, including unit tests
5. **Self-Review:** Test the implementation, check for edge cases, ensure code quality
6. **Code Review:** Submit pull request and address feedback from team members
7. **Integration Testing:** Test in staging environment, ensure no regressions
8. **Deployment:** Merge to main branch and deploy to production
9. **Monitoring:** Monitor the feature post-deployment for any issues

###accordion: What tools and techniques do you use?

I use a variety of tools and techniques:

**Development Tools:**
- VS Code with extensions for ESLint, Prettier, GitLens
- Chrome DevTools for debugging and performance analysis
- Postman/Insomnia for API testing
- Figma for design collaboration

**Version Control:**
- Git with feature branch workflow
- Conventional commits for better commit history
- GitHub/GitLab for code review and CI/CD

**Performance Tools:**
- Lighthouse for performance auditing
- WebPageTest for detailed performance analysis
- Bundle analyzers for optimization

## HTML/CSS questions

###accordion: How we can optimize site loading time?

Site optimization involves multiple strategies:

**Network Optimization:**
- Enable HTTP/2 or HTTP/3 for multiplexing
- Use CDN for static assets
- Implement resource hints (preload, prefetch, preconnect)
- Minimize HTTP requests with bundling

**Asset Optimization:**
- Compress images (WebP format, responsive images)
- Minify CSS, JavaScript, and HTML
- Use lazy loading for images and components
- Implement service workers for caching

**Code Optimization:**
- Code splitting and tree shaking
- Remove unused CSS and JavaScript
- Optimize critical rendering path
- Use modern JavaScript features for better performance

###accordion: What units do you use px, em, or rem?

I use different units based on context:

**rem (root em):** My preferred unit for most sizing
- Consistent sizing relative to root font size
- Better accessibility (respects user's font size preferences)
- Easier to maintain consistent scale

**em:** Used when sizing needs to be relative to parent
- Components that should scale with their container
- Typography within specific contexts

**px:** Used sparingly for specific cases
- Border widths that shouldn't scale
- Pixel-perfect design requirements
- Media query breakpoints

**Viewport units (vw, vh):** For responsive layouts
- Full-width sections (100vw)
- Viewport-based typography

###accordion: What is the 'Box Model' in CSS?

The CSS Box Model describes how elements are rendered as rectangular boxes:

**Components (from inside out):**
1. **Content:** The actual content (text, images)
2. **Padding:** Space between content and border
3. **Border:** Goes around padding and content
4. **Margin:** Space outside the border (collapses with other margins)

**Box-Sizing Property:**

```css
/* Default: content-box */
.box-sizing-content {
  width: 200px; /* Only content width */
  padding: 20px; /* Adds to total width */
  border: 2px solid black; /* Adds to total width */
  /* Total width: 244px */
}

/* Modern: border-box */
.box-sizing-border {
  width: 200px; /* Includes padding and border */
  padding: 20px;
  border: 2px solid black;
  /* Total width: 200px */
}
```

###accordion: What's the difference between "resetting" and "normalizing" CSS?

**CSS Reset:**
- Removes all default styling from elements
- Creates a blank slate across all browsers
- Example: Eric Meyer's CSS Reset
- Pros: Complete control, consistent starting point
- Cons: Must re-style everything, can remove useful defaults

**CSS Normalize:**
- Makes browsers render elements consistently
- Preserves useful defaults while fixing inconsistencies
- Example: normalize.css
- Pros: Better accessibility, less work to restore defaults
- Cons: Some inconsistencies may remain

**My Choice:** I prefer normalize.css because it maintains useful browser defaults (like form styling) while ensuring consistency across browsers.

###accordion: How do you organise your CSS - Namespace patterns?

I use several organization strategies:

**BEM (Block Element Modifier):**
```css
.card { }
.card__header { }
.card__header--highlighted { }
```

**CSS Modules:**
- Scoped class names to avoid conflicts
- Component-based organization
- Clear dependency relationships

**Utility-First (Tailwind):**
- Consistent design system
- Rapid development
- Smaller CSS bundle through purging

**File Structure:**
```
styles/
  components/
    button.css
    card.css
  utilities/
    spacing.css
    colors.css
  base/
    reset.css
    typography.css
```

## Accessibility

###accordion: How can we improve form accessibility?

**Semantic HTML:**

```html
<form>
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">
      Name: <input type="text" id="name" required>
    </label>
    
    <label for="email">
      Email: <input type="email" id="email" required>
    </label>
  </fieldset>
</form>
```

**ARIA Enhancements:**
- Use aria-describedby for additional help text
- Add aria-invalid for validation errors
- Implement aria-live regions for dynamic updates

**Keyboard Navigation:**
- Ensure proper tab order
- Add focus indicators
- Implement keyboard shortcuts

**Error Handling:**
- Associate error messages with inputs
- Provide clear validation feedback
- Use aria-live for real-time validation

###accordion: List some of the Aria roles and explain when would you use them

**Landmark Roles:**
- `role="navigation"` - Main navigation blocks
- `role="main"` - Primary content area
- `role="banner"` - Header/site identity
- `role="contentinfo"` - Footer/copyright info
- `role="search"` - Search functionality

**Widget Roles:**
- `role="button"` - Interactive elements that aren't native buttons
- `role="dialog"` - Modal dialogs and popups
- `role="tablist"`, `role="tab"` - Tab interfaces
- `role="menu"`, `role="menuitem"` - Navigation menus

**Structure Roles:**
- `role="region"` - Related content sections
- `role="group"` - Grouped related controls
- `role="list"`, `role="listitem"` - List semantics

###accordion: How else would you improve site accessibility?

**Performance:**
- Optimize images and media for screen readers
- Ensure keyboard accessibility for all interactive elements
- Provide text alternatives for non-text content

**Navigation:**
- Skip links for keyboard users
- Consistent navigation patterns
- Clear heading structure (h1-h6 hierarchy)

**Content:**
- Use clear, simple language
- Provide transcripts for audio/video content
- Ensure sufficient color contrast (WCAG AA or AAA)

**Testing:**
- Regular accessibility audits
- Screen reader testing
- Keyboard-only navigation testing
- User testing with people with disabilities

## Useful Resources

- [MDN Web Docs](https://developer.mozilla.org/) - Comprehensive web development documentation
- [Web.dev](https://web.dev/) - Modern web development best practices
- [A11y Project](https://www.a11yproject.com/) - Accessibility guidelines and patterns
- [Can I Use](https://caniuse.com/) - Browser compatibility tables

## Summary

This is part 1 of the Interview series. Continue with [Part 2: JavaScript](/blog/interview-questions-javascript) and [Part 3: React](/blog/interview-questions-react). You may also find [Popular Acronyms](/blog/popular-acronyms) useful for interview preparation.


#css

Interview questions part 1 - CSS, HTML & Accessibility