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.

This is part 1 of the Interview series. See also <a href="/blog/interview-questions-javascript">Part 2: JavaScript</a> and <a href="/blog/interview-questions-react">Part 3: React</a>.
<h2>General Questions</h2>
###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:
<ul>
<li>Developing user interfaces using modern JavaScript frameworks like React/Vue</li>
<li>Writing clean, maintainable CSS with methodologies like BEM or CSS-in-JS</li>
<li>Ensuring cross-browser compatibility and accessibility compliance</li>
<li>Collaborating with designers and backend developers to implement features</li>
<li>Optimizing application performance and user experience</li>
<li>Participating in code reviews and mentoring junior developers</li>
</ul>
###accordion: What is the typical workflow from the point you get a task to its completion?
My typical workflow follows these steps:
<ol>
<li>Requirements Analysis: Review task specifications and clarify any ambiguities with the product owner/designer</li>
<li>Technical Planning: Break down the task into smaller components, estimate effort, and identify potential challenges</li>
<li>Environment Setup: Create feature branch, set up local development environment</li>
<li>Implementation: Write code following best practices, including unit tests</li>
<li>Self-Review: Test the implementation, check for edge cases, ensure code quality</li>
<li>Code Review: Submit pull request and address feedback from team members</li>
<li>Integration Testing: Test in staging environment, ensure no regressions</li>
<li>Deployment: Merge to main branch and deploy to production</li>
<li>Monitoring: Monitor the feature post-deployment for any issues</li>
</ol>
###accordion: What tools and techniques do you use?
I use a variety of tools and techniques:
Development Tools:
<ul>
<li>VS Code with extensions for ESLint, Prettier, GitLens</li>
<li>Chrome DevTools for debugging and performance analysis</li>
<li>Postman/Insomnia for API testing</li>
<li>Figma for design collaboration</li>
</ul>
Version Control:
<ul>
<li>Git with feature branch workflow</li>
<li>Conventional commits for better commit history</li>
<li>GitHub/GitLab for code review and CI/CD</li>
</ul>
Performance Tools:
<ul>
<li>Lighthouse for performance auditing</li>
<li>WebPageTest for detailed performance analysis</li>
<li>Bundle analyzers for optimization</li>
</ul>
<h2>HTML/CSS questions</h2>
###accordion: How we can optimize site loading time?
Site optimization involves multiple strategies:
Network Optimization:
<ul>
<li>Enable HTTP/2 or HTTP/3 for multiplexing</li>
<li>Use CDN for static assets</li>
<li>Implement resource hints (preload, prefetch, preconnect)</li>
<li>Minimize HTTP requests with bundling</li>
</ul>
Asset Optimization:
<ul>
<li>Compress images (WebP format, responsive images)</li>
<li>Minify CSS, JavaScript, and HTML</li>
<li>Use lazy loading for images and components</li>
<li>Implement service workers for caching</li>
</ul>
Code Optimization:
<ul>
<li>Code splitting and tree shaking</li>
<li>Remove unused CSS and JavaScript</li>
<li>Optimize critical rendering path</li>
<li>Use modern JavaScript features for better performance</li>
</ul>
###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
<ul>
<li>Consistent sizing relative to root font size</li>
<li>Better accessibility (respects user's font size preferences)</li>
<li>Easier to maintain consistent scale</li>
</ul>
em: Used when sizing needs to be relative to parent
<ul>
<li>Components that should scale with their container</li>
<li>Typography within specific contexts</li>
</ul>
px: Used sparingly for specific cases
<ul>
<li>Border widths that shouldn't scale</li>
<li>Pixel-perfect design requirements</li>
<li>Media query breakpoints</li>
</ul>
Viewport units (vw, vh): For responsive layouts
<ul>
<li>Full-width sections (100vw)</li>
<li>Viewport-based typography</li>
</ul>
###accordion: What is the 'Box Model' in CSS?
The CSS Box Model describes how elements are rendered as rectangular boxes:
Components (from inside out):
<ol>
<li>Content: The actual content (text, images)</li>
<li>Padding: Space between content and border</li>
<li>Border: Goes around padding and content</li>
<li>Margin: Space outside the border (collapses with other margins)</li>
</ol>
Box-Sizing Property:
<pre><code>/* 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 */
}
</code></pre>
###accordion: What's the difference between "resetting" and "normalizing" CSS?
CSS Reset:
<ul>
<li>Removes all default styling from elements</li>
<li>Creates a blank slate across all browsers</li>
<li>Example: Eric Meyer's CSS Reset</li>
<li>Pros: Complete control, consistent starting point</li>
<li>Cons: Must re-style everything, can remove useful defaults</li>
</ul>
CSS Normalize:
<ul>
<li>Makes browsers render elements consistently</li>
<li>Preserves useful defaults while fixing inconsistencies</li>
<li>Example: normalize.css</li>
<li>Pros: Better accessibility, less work to restore defaults</li>
<li>Cons: Some inconsistencies may remain</li>
</ul>
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):
<pre><code>.card { }
.card__header { }
.card__header--highlighted { }
</code></pre>
CSS Modules:
<ul>
<li>Scoped class names to avoid conflicts</li>
<li>Component-based organization</li>
<li>Clear dependency relationships</li>
</ul>
Utility-First (Tailwind):
<ul>
<li>Consistent design system</li>
<li>Rapid development</li>
<li>Smaller CSS bundle through purging</li>
</ul>
File Structure:
<pre><code>styles/
 components/
 button.css
 card.css
 utilities/
 spacing.css
 colors.css
 base/
 reset.css
 typography.css
</code></pre>
<h2>Accessibility</h2>
###accordion: How can we improve form accessibility?
Semantic HTML:
<pre><code>&#x3C;form>
 &#x3C;fieldset>
 &#x3C;legend>Personal Information&#x3C;/legend>
 
 &#x3C;label for="name">
 Name: &#x3C;input type="text" id="name" required>
 &#x3C;/label>
 
 &#x3C;label for="email">
 Email: &#x3C;input type="email" id="email" required>
 &#x3C;/label>
 &#x3C;/fieldset>
&#x3C;/form>
</code></pre>
ARIA Enhancements:
<ul>
<li>Use aria-describedby for additional help text</li>
<li>Add aria-invalid for validation errors</li>
<li>Implement aria-live regions for dynamic updates</li>
</ul>
Keyboard Navigation:
<ul>
<li>Ensure proper tab order</li>
<li>Add focus indicators</li>
<li>Implement keyboard shortcuts</li>
</ul>
Error Handling:
<ul>
<li>Associate error messages with inputs</li>
<li>Provide clear validation feedback</li>
<li>Use aria-live for real-time validation</li>
</ul>
###accordion: List some of the Aria roles and explain when would you use them
Landmark Roles:
<ul>
<li><code>role="navigation"</code> - Main navigation blocks</li>
<li><code>role="main"</code> - Primary content area</li>
<li><code>role="banner"</code> - Header/site identity</li>
<li><code>role="contentinfo"</code> - Footer/copyright info</li>
<li><code>role="search"</code> - Search functionality</li>
</ul>
Widget Roles:
<ul>
<li><code>role="button"</code> - Interactive elements that aren't native buttons</li>
<li><code>role="dialog"</code> - Modal dialogs and popups</li>
<li><code>role="tablist"</code>, <code>role="tab"</code> - Tab interfaces</li>
<li><code>role="menu"</code>, <code>role="menuitem"</code> - Navigation menus</li>
</ul>
Structure Roles:
<ul>
<li><code>role="region"</code> - Related content sections</li>
<li><code>role="group"</code> - Grouped related controls</li>
<li><code>role="list"</code>, <code>role="listitem"</code> - List semantics</li>
</ul>
###accordion: How else would you improve site accessibility?
Performance:
<ul>
<li>Optimize images and media for screen readers</li>
<li>Ensure keyboard accessibility for all interactive elements</li>
<li>Provide text alternatives for non-text content</li>
</ul>
Navigation:
<ul>
<li>Skip links for keyboard users</li>
<li>Consistent navigation patterns</li>
<li>Clear heading structure (h1-h6 hierarchy)</li>
</ul>
Content:
<ul>
<li>Use clear, simple language</li>
<li>Provide transcripts for audio/video content</li>
<li>Ensure sufficient color contrast (WCAG AA or AAA)</li>
</ul>
Testing:
<ul>
<li>Regular accessibility audits</li>
<li>Screen reader testing</li>
<li>Keyboard-only navigation testing</li>
<li>User testing with people with disabilities</li>
</ul>
<h2>Useful Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/">MDN Web Docs</a> - Comprehensive web development documentation</li>
<li><a href="https://web.dev/">Web.dev</a> - Modern web development best practices</li>
<li><a href="https://www.a11yproject.com/">A11y Project</a> - Accessibility guidelines and patterns</li>
<li><a href="https://caniuse.com/">Can I Use</a> - Browser compatibility tables</li>
</ul>
<h2>Summary</h2>
This is part 1 of the Interview series. Continue with <a href="/blog/interview-questions-javascript">Part 2: JavaScript</a> and <a href="/blog/interview-questions-react">Part 3: React</a>. You may also find <a href="/blog/popular-acronyms">Popular Acronyms</a> useful for interview preparation.

Interview questions part 1 - CSS, HTML & Accessibility

Related Posts

Interview questions part 2: JavaScript

Interview questions: React

Popular Acronyms