Frontend Questions
✅ Core Front-End Concepts
1. Explain the critical rendering path and how browsers render web pages.
The critical rendering path includes steps like HTML parsing, CSS processing, layout, paint,
and compositing.
Optimizing it makes pages load and render faster.
2. What is the difference between SSR, CSR, and SSG?
SSR renders HTML on the server, CSR renders in the browser, SSG builds HTML at build
time.
SSR is SEO-friendly, CSR is dynamic, SSG is fast for static sites.
3. How does browser caching work and how can you leverage it?
Caching stores static assets like CSS/JS to avoid re-downloading.
You can use cache headers (Cache-Control, ETag) to control it.
4. What are reflow and repaint in browsers, and how can they be optimized?
Reflow recalculates layout, repaint updates styles without layout change.
Minimize DOM changes and use classList instead of inline styles.
5. Explain lazy loading and how it improves performance.
Lazy loading delays loading images/components until needed.
It reduces initial load time and saves bandwidth.
6. How do you handle SEO for single-page applications?
Use SSR or pre-rendering for SPAs, add meta tags, sitemap, and semantic HTML.
Tools like React Helmet help manage SEO tags.
✅ HTML & Accessibility
1. What is semantic HTML and why is it important?
Semantic HTML uses meaningful tags like <header>, <article>.
It improves SEO and accessibility for screen readers.
2. How do you make a website accessible (a11y)?
Use semantic HTML, keyboard navigation, proper color contrast, and ARIA roles.
Test with screen readers and accessibility tools.
3. Explain the use of ARIA roles in accessibility.
ARIA roles describe the purpose of UI elements to assistive tech.
They improve accessibility where semantic HTML isn't enough.
4. What is the difference between alt, aria-label, and title attributes?
alt describes images, aria-label provides accessibility text, title shows tooltips.
Use alt for images, aria-label for screen readers, title for hints.
5. How do screen readers interpret HTML?
Screen readers read HTML in the order it appears in the DOM.
They rely on tags, ARIA roles, and attributes to convey meaning.
✅ CSS & Styling
1. Explain the CSS box model in detail.
Each element is a box with content, padding, border, and margin.
Understanding it helps control spacing and layout.
2. What are the different position properties in CSS and when to use them?
static is default, relative shifts from normal, absolute is positioned to ancestor, fixed
to viewport, sticky toggles with scroll.
Use based on layout needs.
3. How does CSS specificity work and how do you resolve conflicts?
Specificity determines which CSS rule applies when multiple match.
Inline > ID > Class > Element; avoid !important if possible.
4. What is the difference between BEM and other CSS naming conventions?
BEM uses block__element--modifier format for clear structure.
It avoids conflicts and improves readability in large projects.
5. Discuss the pros and cons of CSS-in-JS.
Pros: scoped styles, dynamic styling, co-located with components.
Cons: performance hit, harder to override, non-standard syntax.
6. How do you implement responsive design?
Use media queries, flexible grids, and relative units (em, %).
Mobile-first design ensures good UX across devices.
7. What are the advantages of utility-first CSS frameworks like Tailwind?
Tailwind offers fast development with pre-made utility classes.
It reduces custom CSS and improves consistency.
