Common Questions & Answers
Q: "What is semantic HTML and why is it important?"
A: "Semantic HTML means using HTML elements for their intended purpose rather than just for appearance. For example, using <nav> for navigation, <article> for content, and <button> for actions. It's important because it improves accessibility for screen readers, helps with SEO by giving search engines better context, and makes code more maintainable for other developers."
Q: "Explain the CSS Box Model."
A: "The CSS Box Model describes how elements are structured. From inside out, we have: content (the actual text or image), padding (space inside the element), border (the element's boundary), and margin (space outside the element). Understanding this is crucial for layout because these properties affect the total space an element occupies."
Q: "What's the difference between Flexbox and Grid?"
A: "Flexbox is designed for one-dimensional layouts - either rows or columns. It's great for components like navigation bars or centering content. CSS Grid is for two-dimensional layouts where you need to control both rows and columns simultaneously. Grid is better for page layouts, while Flexbox is better for component layouts. Often, I use them together - Grid for the overall page structure and Flexbox for individual components."
Q: "How do you center a div both horizontally and vertically?"
A: "There are several methods. My preferred approach is using Flexbox: set the parent to display: flex, justify-content: center for horizontal centering, and align-items: center for vertical centering. Alternatively, with Grid, you can use display: grid and place-items: center."
Q: "What are the benefits of using Sass?"
A: "Sass adds powerful features to CSS like variables for consistent theming, nesting for better organization, mixins for reusable code blocks, and functions for calculations. It also supports imports to split code into maintainable files. These features make CSS more maintainable and reduce repetition."
Q: "Explain the difference between em and rem units."
A: "em is relative to the parent element's font size, while rem is relative to the root element's font size. rem is generally more predictable because it doesn't compound. For example, if you have nested elements with font-size: 1.2em, the inner elements will be 1.2 times the parent's size, which can lead to unexpected results. rem avoids this issue."
Q: "How do you approach responsive design?"
A: "I follow a mobile-first approach, starting with the smallest screen size and progressively enhancing for larger screens using media queries. I use relative units like percentages, em, and rem instead of fixed pixels. I also consider touch interfaces, ensure adequate tap targets, and test across different devices. Tools like CSS Grid and Flexbox make responsive layouts much easier to manage."
Q: "What is CSS specificity and how do you manage it?"
A: "CSS specificity determines which styles are applied when multiple rules target the same element. It's calculated based on selector types: inline styles have the highest specificity, then IDs (100 points), classes and attributes (10 points), and elements (1 point). For example, #header .nav has higher specificity than .nav. I manage it by keeping specificity low, using classes instead of IDs for styling, and avoiding !important unless absolutely necessary."
Q: "Explain CSS transitions vs animations."
A: "Transitions are for simple state changes between two values, triggered by events like hover. They're defined with transition: property duration timing-function delay. Animations use keyframes and can create complex, multi-step animations that run automatically or on trigger. Transitions are simpler and better for interactive effects, while animations are better for complex sequences or loading indicators."
Q: "Which CSS properties are best for performance in animations?"
A: "Properties that can be GPU-accelerated perform best: transform and opacity. These don't trigger layout recalculations. Avoid animating properties like width, height, top, or left as they cause expensive reflows. Using will-change can hint to the browser to optimize for animations, but should be used sparingly and removed after animation completes."
Q: "How do you handle cross-browser compatibility?"
A: "I start by using progressive enhancement - building a solid foundation that works everywhere, then adding enhancements for modern browsers. I use tools like Autoprefixer for vendor prefixes, Can I Use to check feature support, and polyfills for missing functionality. I test in multiple browsers including Safari, Chrome, Firefox, and when required, Internet Explorer. I also use feature detection with @supports queries instead of browser detection."
Q: "What is critical CSS and how do you implement it?"
A: "Critical CSS is the minimum CSS needed to render above-the-fold content. By inlining this CSS in the HTML head and loading the rest asynchronously, we can improve perceived performance. Users see styled content faster because they don't have to wait for the entire CSS file to download. I implement it using tools like Critical or manually identifying and extracting the essential styles for the viewport."
Q: "How do you work with Figma/Sketch designs?"
A: "I start by examining the design system - colors, typography, spacing, and components. I extract assets like images and icons, and note the spacing and layout patterns. I use Figma's inspect panel to get exact measurements, colors, and CSS properties. I also communicate with designers about responsive behavior, hover states, and edge cases that might not be shown in static designs. I always ask about design tokens and component libraries to ensure consistency."
Q: "Explain Sass mixins and when you'd use them."
A: "Mixins are reusable blocks of CSS declarations that can accept parameters. They're useful for vendor prefixes, complex animations, or repeated patterns. For example, I might create a button mixin that accepts parameters for color and size, then use it across different button styles. Here's an example: @mixin button($bg-color, $text-color: white) { background: $bg-color; color: $text-color; }. This reduces code duplication and ensures consistency."
Q: "How do you optimize images for web performance?"
A: "I use multiple strategies: choose the right format (WebP for photos, SVG for icons), implement responsive images with srcset and sizes attributes, use lazy loading with loading="lazy", compress images appropriately, and provide fallbacks for older browsers using the <picture> element. I also consider using modern formats like AVIF when supported, and optimize SVGs by removing unnecessary metadata."
Q: "What's the difference between display: none and visibility: hidden?"
A: "display: none completely removes the element from the document flow - it takes up no space and is not accessible to screen readers. visibility: hidden hides the element but it still occupies space in the layout and remains in the accessibility tree. Use display: none when you want to completely remove an element, and visibility: hidden when you want to hide it but maintain the layout."
Q: "How do you approach building a design system?"
A: "I start with design tokens - colors, typography, spacing, and sizing scales. Then I create base components like buttons, inputs, and cards using CSS classes or CSS-in-JS. I ensure components are modular, reusable, and follow consistent naming conventions. I document usage patterns and provide examples. For maintainability, I use Sass variables or CSS custom properties for theming, and establish clear guidelines for extending the system."
Q: "What build tools have you worked with?"
A: "I have experience with Webpack for bundling and asset optimization, Gulp for task automation like Sass compilation and image optimization, and modern tools like Vite for faster development. I've configured build processes to handle Sass preprocessing, autoprefixing, minification, and asset optimization. I also work with package managers like npm or yarn to manage dependencies and scripts."
Q: "How do you debug CSS issues?"
A: "I use browser developer tools extensively - the Elements panel to inspect computed styles, the Console for JavaScript errors affecting layout, and the Performance tab for rendering issues. I check for CSS specificity conflicts, validate HTML markup, and test across different browsers. For layout issues, I use CSS Grid/Flexbox debugging tools. I also use techniques like adding border outlines temporarily to visualize element boundaries."
Q: "What's your experience with CSS frameworks?"
A: "I've worked with Bootstrap for rapid prototyping and Tailwind CSS for utility-first development. While frameworks speed up development, I prefer building custom solutions when possible to avoid bloat and ensure unique design requirements are met. When using frameworks, I customize them to match the design system and only include necessary components to optimize bundle size."
Q: "How do you handle browser-specific issues?"
A: "I use progressive enhancement and feature detection rather than browser detection. CSS @supports queries help provide fallbacks for unsupported features. For older browsers like IE11, I use polyfills sparingly and provide graceful degradation. I test regularly across target browsers and use tools like BrowserStack for comprehensive testing. I also keep vendor prefixes updated using Autoprefixer."
Q: "Describe your workflow from design to implementation."
A: "First, I analyze the design in Figma/Sketch to understand the layout structure, identify reusable components, and extract design tokens. I plan the HTML structure using semantic elements, then build mobile-first CSS with Sass. I implement responsive breakpoints, add interactions and animations, test across browsers and devices, and optimize for performance. Throughout the process, I collaborate with designers for clarifications and with developers for integration."
Q: "How do you optimize CSS performance?"
A: "Several strategies: minimize CSS file size through compression and removing unused styles, use efficient selectors (avoid deep nesting), leverage browser caching, implement critical CSS for above-the-fold content, and use CSS preprocessing to optimize during build. I also avoid expensive properties like box-shadow on elements that change frequently and use transform and opacity for animations."
"Nice to Have" Topics - Advanced Questions
Q: "What's your experience with build tools like Webpack and Gulp?"
A: "I've used Webpack for module bundling, code splitting, and asset optimization. I configure loaders for Sass, PostCSS, and file processing, and plugins for HTML generation and CSS extraction. With Gulp, I've set up task automation for Sass compilation, image optimization, and live reloading. Webpack is great for complex applications with its dependency graph, while Gulp excels at simple task automation. I prefer Webpack for modern projects due to its ecosystem and hot module replacement."
Q: "How do HTML email templates differ from regular HTML?"
A: "Email HTML is much more restrictive. You need to use table-based layouts for structure, inline CSS for better compatibility, and avoid modern CSS features like Flexbox or Grid. Different email clients have varying support - Outlook uses Word's rendering engine, which is particularly limited. I use techniques like conditional comments for Outlook, ensure proper encoding, test across multiple clients, and keep designs simple. Tools like Litmus or Email on Acid help with testing."
Q: "What CSS frameworks have you worked with and how do you choose one?"
A: "I've worked with Bootstrap for rapid prototyping - it's great for quick layouts and has extensive components. Tailwind CSS for utility-first development - excellent for custom designs without writing custom CSS. Foundation for more flexible grid systems. I choose based on project needs: Bootstrap for quick prototypes, Tailwind for custom designs with utility classes, or no framework for unique designs. I always consider bundle size and customization needs."
Q: "Have you worked with template engines like Pug or Handlebars?"
A: "Yes, I've used Pug for its clean, indentation-based syntax that compiles to HTML. It's great for reducing repetition with mixins and includes. Handlebars for dynamic content rendering - useful for generating HTML from JSON data. Pug example: div.container h1= title compiles to clean HTML. Handlebars uses {{variable}} syntax for data binding. Both help with maintainability and reduce HTML duplication in larger projects."
Q: "Do you have experience with Canvas API, WebGL, or Three.js?"
A: "I have basic experience with Canvas API for drawing graphics and simple animations - things like drawing charts, image manipulation, or creating interactive elements. I've explored Three.js for 3D graphics in web browsers, creating simple 3D scenes and animations. While not my primary expertise, I understand the concepts and have used them for specific projects requiring custom graphics or data visualizations. I'm always eager to expand my knowledge in these areas."
Q: "What is GSAP and when would you use it?"
A: "GSAP (GreenSock Animation Platform) is a powerful JavaScript animation library that's more performant and feature-rich than CSS animations for complex sequences. I'd use it for timeline-based animations, morphing SVGs, complex interactive animations, or when I need precise control over timing and easing. It's particularly useful for marketing websites, interactive presentations, or any project requiring sophisticated animations. GSAP handles browser inconsistencies well and provides excellent performance."
Q: "How do you approach learning new front-end technologies?"
A: "I start with official documentation and try to understand the core concepts and use cases. I build small practice projects to get hands-on experience, follow industry blogs and tutorials, and participate in developer communities. For build tools, I set up simple configurations first, then gradually add complexity. For new APIs like Canvas or WebGL, I start with basic examples and progressively tackle more complex scenarios. I believe in learning by doing and applying new knowledge to real projects when possible."
Q: "How would you optimize a build process for a large project?"
A: "I'd implement code splitting to load only necessary code, use tree shaking to eliminate dead code, optimize asset loading with lazy loading and preloading strategies, and set up efficient caching strategies. For Webpack, I'd configure multiple entry points, use dynamic imports for route-based splitting, and optimize chunk splitting. I'd also implement development vs production configurations, use source maps for debugging, and set up automated testing in the build pipeline."
Q: "What challenges have you faced with email template development?"
A: "The biggest challenge is inconsistent rendering across email clients. Outlook's Word engine doesn't support many modern CSS features, Gmail strips certain styles, and mobile clients have their own quirks. I've learned to use table-based layouts, inline styles, test extensively across clients, provide fallbacks for unsupported features, and keep designs simple yet effective. Testing tools like Litmus are essential for ensuring consistency across the email ecosystem."
Q: "How do you handle responsive design in email templates?"
A: "Email responsive design is tricky due to limited media query support. I use hybrid coding techniques - fluid tables that stack on mobile, conditional CSS for better clients, and progressive enhancement. The approach involves using max-width instead of fixed widths, mso- conditional comments for Outlook, and testing extensively. Some clients don't support media queries at all, so the design must work without them while being enhanced for supporting clients."
Q: "What's your experience with CSS-in-JS vs traditional CSS approaches?"
A: "I've worked with both approaches. Traditional CSS with Sass gives better separation of concerns, easier debugging, and better performance for static styles. CSS-in-JS (like styled-components) provides dynamic styling, component-scoped styles, and better integration with JavaScript logic. I choose based on project needs: traditional CSS for content sites, CSS-in-JS for component-heavy applications where styles need to be dynamic based on props or state."
Q: "How do you approach creating interactive data visualizations?"
A: "I start by understanding the data structure and visualization requirements. For simple charts, I might use CSS and HTML with some JavaScript for interactivity. For complex visualizations, I'd use D3.js for data binding and SVG manipulation, or Canvas API for performance-critical animations. Three.js for 3D visualizations when needed. I focus on accessibility, ensuring charts are readable by screen readers, and provide alternative data access methods. Performance optimization is crucial for large datasets."