Front-end Developer Interview Questions User Guide

A community-curated bank of front-end engineering interview questions, maintained by the H5BP (HTML5 Boilerplate) project. The repository ships an exhaustive question list organized by topic, a published Eleventy website that renders the same content for browsing, and 35 community translations of the master question set. There are no answers, no scoring rubrics, and no automation — the value of the project is the questions themselves and the cross-language reach of the maintained translations.

This guide explains how candidates, interviewers, and translators work with the project: where to read the questions, how to build the site locally if you want a customized copy, the categories that organize the bank, and how to contribute new questions or fix translations.

1. Quick Start

The fastest way to use this project is to read it. You do not need Node.js, you do not need to clone anything, and you do not need to run a build. Three browse paths are supported, in order of friction:

1. Read the published site — h5bp.org/Front-end-Developer-Interview-Questions/ renders every category and every translation in a styled, navigable layout.
2. Read the GitHub README — github.com/h5bp/Front-end-Developer-Interview-Questions shows the master English question list with anchored sections.
3. Read the raw markdown — each category is a single markdown file under src/questions/ (for example, src/questions/javascript-questions.md), and each translation is a self-contained README under src/translations/<language>/README.md.

Tip

If you only want the questions, stop at step 1. The build pipeline, the Eleventy config, and the Node toolchain exist purely to render the same markdown into a static site. Reading the markdown directly gets you everything that matters.

What this project is

A single, curated, opinion-free question bank for front-end engineering interviews. Questions are open-ended on purpose — most have no single correct answer, and the README explicitly warns interviewers not to ask every question to one candidate. The point is to start conversations, not to grade.

Five-minute path: clone and serve locally

If you want to render the site on your own machine — to preview a translation edit, customize the styling, or share an offline copy — clone, install, and start the dev server:

git clone https://github.com/h5bp/Front-end-Developer-Interview-Questions.git
cd Front-end-Developer-Interview-Questions
npm install
npm start

[Eleventy] Writing _site/index.html from ./src/index.njk
[Eleventy] Writing _site/translations/spanish/index.html from ./src/translations/spanish/README.md
[Eleventy] Wrote 76 files in 0.84 seconds (v2.0.1)
[Eleventy] Watching…
[Eleventy] Server at http://localhost:9090/Front-end-Developer-Interview-Questions/

Open http://localhost:9090/Front-end-Developer-Interview-Questions/ in a browser. Eleventy will rebuild on every save under src/.

Note

The npm start command uses port 9090 and serves under the path prefix /Front-end-Developer-Interview-Questions/ to mirror the production site. The path prefix is set by the --pathprefix flag in package.json's build script and the --serve defaults in start.

What to do next

• Candidate preparing for an interview — Skim src/questions/general-questions.md first, then drill into the topics you are weakest on. See the Core Usage section for a category-by-category roadmap.
• Interviewer building a question bank — Pick 5–8 questions across 2–3 categories per candidate. Never ask all questions to one person; the README is explicit about this.
• Translator — Compare the English src/translations/_template/README.md against your target language's existing translation, then open a PR. See Common Tasks recipe 3.
• Contributor adding a question — Edit the relevant src/questions/<topic>-questions.md, follow the existing question style (open-ended, no hint at an answer), and open a PR.

2. Installation

Local installation is only required if you want to run the Eleventy site locally, contribute changes, or render a customized PDF/static export. For reading questions, skip this section.

Prerequisites

Important

The lockfile in this repo (package-lock.json, lockfile version 3) pins @11ty/eleventy@2.0.1 along with its transitive @babel/parser@7.13.11 and other older sub-dependencies. Issue #936 tracks an audit of these tooling dependencies. If npm install complains about deprecation warnings or peer-dependency mismatches, that is a known state of the project rather than a bug in your environment.

Clone and install

git clone https://github.com/h5bp/Front-end-Developer-Interview-Questions.git
cd Front-end-Developer-Interview-Questions
npm install

The install pulls roughly 600 transitive dev-dependencies (Eleventy plus its template engines: nunjucks, liquidjs, pug, markdown-it, handlebars, mustache, etc.). All of them are devDependencies — there are no runtime dependencies because nothing runs at request time; the output is a fully static site.

Verify the build

npm run build

[Eleventy] Writing _site/index.html from ./src/index.njk
[Eleventy] Writing _site/about.html from ./src/about.njk
[Eleventy] Writing _site/translations.html from ./src/translations.njk
[Eleventy] Writing _site/sitemap.xml from ./src/sitemap.xml.njk
[Eleventy] Writing _site/404.html from ./src/404.njk
[Eleventy] Writing _site/questions/general-questions/index.html from ./src/questions/general-questions.md
[Eleventy] Writing _site/questions/html-questions/index.html from ./src/questions/html-questions.md
[Eleventy] Writing _site/questions/css-questions/index.html from ./src/questions/css-questions.md
[Eleventy] Writing _site/questions/javascript-questions/index.html from ./src/questions/javascript-questions.md
[Eleventy] Writing _site/questions/testing-questions/index.html from ./src/questions/testing-questions.md
[Eleventy] Writing _site/questions/performance-questions/index.html from ./src/questions/performance-questions.md
[Eleventy] Writing _site/questions/network-questions/index.html from ./src/questions/network-questions.md
[Eleventy] Writing _site/questions/coding-questions/index.html from ./src/questions/coding-questions.md
[Eleventy] Writing _site/questions/fun-questions/index.html from ./src/questions/fun-questions.md
[Eleventy] Writing _site/translations/arabic/index.html from ./src/translations/arabic/README.md
…
[Eleventy] Wrote 76 files in 0.84 seconds (v2.0.1)

Open _site/index.html directly in a browser, or run npm start for hot-reload during development.

Warning

Do not check in the _site/ directory. It is the build output and is intentionally excluded from the repository (.gitignore). Only src/ content is canonical.

Update the contributors list

The README and the about page show a contributors block generated by the all-contributors-cli. The repository keeps the data in .all-contributorsrc (a JSON file at the repo root).

npm run contributors:add

This launches an interactive prompt that asks for the GitHub username, the contribution type (doc, translation, infra, review, question, talk, maintenance, ideas), and updates .all-contributorsrc. Then sync into the data directory:

npm run contributors:generate

The contributors:generate script regenerates the contributors badge and copies .all-contributorsrc to src/_data/contributors.json so Eleventy can render it.

Tip

You only run the contributors:* scripts if you are a maintainer merging a PR. For ordinary edits or translations, skip this. New contributors get added by maintainers as part of merging a PR.

3. Configuration

This is a documentation/curation repo with a thin static-site shell. There are very few user-facing settings, and most of what looks like configuration is content. The handful of switches that matter are listed below; full operator-level detail lives in the Administrator & Developer Guide.

Site identity (src/_data/site.json)

The site title, description, language, and Twitter handle are surfaced from a single JSON file:

{
  "title": "Front-end Developer Interview Questions",
  "url": "https://h5bp.org/Front-end-Developer-Interview-Questions/",
  "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.",
  "keywords": "front-end, interview questions, css questions, js questions, html questions, performance questions, interview test",
  "language": "en_US",
  "twitter": "@h5bp"
}

If you fork the repo to host your own customized question bank, this is the file to edit first.

Category list (src/_data/questions.json)

The category navigation comes from src/_data/questions.json. Every entry maps an abbreviation, a display title, and a URL. Set external: true to link off-site (this is how the Accessibility category is rendered as a link to Scott O'Hara's external bank).

Note

Editing questions.json only changes the navigation. To add a new category you also need to create the matching src/questions/<slug>-questions.md file. Removing an entry from questions.json does not delete the markdown — it just hides the category from the navigation.

Translation list (src/_data/translations.json)

The languages page (src/translations.njk) iterates over src/_data/translations.json. Each entry is a language display name and a url pointing at the folder under src/translations/. Adding a new language entry here without creating the corresponding src/translations/<language>/README.md will produce a build that renders a navigation link to a non-existent page.

Path prefix and dev port (package.json scripts)

Two flags are baked into the npm scripts:

If you self-host under a different path, edit the --pathprefix flag in package.json to match.

For the full Eleventy config — minifiers, markdown filters, syntax highlighting setup — see the Administrator & Developer Guide section on Configuration Reference.

4. Core Usage

The bank groups questions into nine working categories plus one external link. Counts below reflect the English master template (src/translations/_template/README.md) and the per-category markdown files in src/questions/. Translations may be ahead or behind the master at any given moment — that gap is what the maintenance issues like #812, #827, #828, #834, #840, and #853 track.

Question categories

The Accessibility entry deliberately points off-site to Scott O'Hara's Accessibility Interview Questions — the H5BP project does not duplicate that work.

Note

Question counts are point-in-time and grow as the project accepts contributions. Use the published site or the raw markdown for the live numbers; the table above reflects the state at commit 33f5498.

What each category covers

General Questions

Open-ended career and process questions that probe how a candidate thinks rather than what they have memorized. Examples from the master template: "What did you learn yesterday/this week?", "What is a recent technical challenge you experienced and how did you solve it?", "Can you describe the difference between progressive enhancement and graceful degradation?", "What does CORS stand for and what issue does it address?", and "Describe the difference between SSR and CSR. Discuss the pros and cons. Are you familiar with static rendering? Rehydration?".

Use this category for the first 10–15 minutes of an interview to settle the candidate and gauge breadth.

HTML Questions

Document fundamentals that separate someone who has shipped HTML from someone who has only read about it. Examples: "What does a doctype do?", "Describe the difference between <script>, <script async> and <script defer>", "What is progressive rendering?", "Why you would use a srcset attribute in an image tag?", and "What is the difference between canvas and svg?".

CSS Questions

The largest in-tree category at ~35 questions. Covers selector specificity, the box model, layout (floats, flex, grid), stacking contexts, normalization vs reset, preprocessors, retina graphics, responsive vs mobile-first, and common gotchas. Examples: "What is CSS selector specificity and how does it work?", "Describe BFC (Block Formatting Context) and how it works", "What does * { box-sizing: border-box; } do?", and "What is the difference between CSS Grid and Flexbox? When would you use one over the other?".

JavaScript Questions

The deepest category at ~44 questions. Spans language fundamentals (this, prototypes, closures, hoisting, == vs ===, type coercion), async (event loop, promises, sync vs async), ES6 (arrow functions, classes, destructuring, template literals, spread/rest), and patterns (currying, IIFEs, higher-order functions). Examples: "Explain how this works in JavaScript. Can you give an example of one of the ways that working with this has changed in ES6?", "What is a closure, and how/why would you use one?", "Explain Function.prototype.bind", and "What is event loop? What is the difference between call stack and task queue?".

Accessibility Questions (external)

Linked out to scottaohara.github.io/accessibility_interview_questions. The H5BP project endorses this list rather than duplicating it. If you are interviewing for an accessibility-focused role, treat that bank as the canonical resource.

Testing Questions

Five focused questions about testing practice: pros and cons of testing, tool choice, unit vs functional/integration, the purpose of style linting, and best practices.

Performance Questions

Three questions on performance work: tooling for finding bugs, ways to improve scrolling performance, and the difference between layout, painting, and compositing.

Network Questions

Eight questions on transport and HTTP semantics: serving from multiple domains, what happens when you type a URL, Long-Polling vs Websockets vs Server-Sent Events, request/response headers (Expires, Date, Age, If-Modified-..., Do Not Track, Cache-Control, Transfer-Encoding, ETag, X-Frame-Options), HTTP methods, domain pre-fetching, and CDNs.

Coding Questions

Four hands-on coding prompts: implement duplicate([1,2,3,4,5]) to return [1,2,3,4,5,1,2,3,4,5], write a FizzBuzz for loop up to 100, predict the output of two short logic-operator expressions, and write an IIFE.

Fun Questions

Four lightweight closers: a recent cool project, favourite developer-tool features, who in the front-end community inspires you, and pet projects.

Tip

The README's Note (preserved in every translation) is explicit: many of these questions are open-ended and intended to spark a discussion. The aim is to learn how a candidate thinks, not to extract a memorized answer. Phrase your follow-ups accordingly.

Browsing translations

Thirty-five translations live under src/translations/<language>/README.md. Every translation file is a self-contained markdown document that mirrors the English template's section structure (with anchors for each category).

The src/translations/_template/README.md file is the canonical English template that translators copy when seeding a new language.

Important

Translations are community-maintained and drift behind the English master between contributions. If you spot a question in the English README that is missing from your language, that is the gap a translation PR should close. Open issues like #812 (Burmese), #827 (Italian), #828 (Japanese), #834 (Russian), and #840 (Turkish) track exactly that drift today.

5. Common Tasks

Recipe 1 — Work through a single category as a candidate

Goal: drill one weak topic before an interview.

1. Pick the category — for example, JavaScript.
2. Open src/questions/javascript-questions.md (or the same anchor on the published site).
3. For each question, write a 2–3 minute answer in plain text. Do not look up the answer first.
4. After your draft, look up the canonical answer in MDN, the spec, or a textbook. Note where you were vague.
5. Group your weak answers and re-attempt them the next day.

git clone https://github.com/h5bp/Front-end-Developer-Interview-Questions.git
cd Front-end-Developer-Interview-Questions/src/questions
ls

coding-questions.md
css-questions.md
fun-questions.md
general-questions.md
html-questions.md
javascript-questions.md
network-questions.md
performance-questions.md
testing-questions.md

Tip

The questions are deliberately open-ended. Practice giving the same answer at three depths — 30 seconds, 2 minutes, 5 minutes — so you can match the interviewer's interest level.

Recipe 2 — Build a 60-minute interview from this bank

Goal: assemble a balanced question set for one candidate.

1. Pick 2 General questions (5 minutes total) to open and gauge breadth.
2. Pick 1 question per primary category the role requires:
   • Front-end generalist: HTML + CSS + JavaScript + Network.
   • CSS-heavy role: CSS (×2) + Performance + Accessibility (external bank).
   • SPA/framework role: JavaScript (×2) + Network + Performance.
3. Pick 1 Coding question for the live-coding portion (15–20 minutes).
4. Reserve 5 minutes for one Fun question to close.
5. Total: ~60 minutes, 7–8 questions.

Warning

The README explicitly recommends not asking every question to one candidate. Pick the smallest set that lets you assess the role's required skills, and leave room for the candidate to ask their own questions.

Recipe 3 — Contribute or update a translation

Goal: translate a missing question or sync a stale translation.

1. Fork the repository on GitHub and clone your fork locally.
2. Open the English template — src/translations/_template/README.md — and your target translation: src/translations/<your-language>/README.md.
3. Diff the two files in your editor. Identify questions present in the English template but missing or out-of-date in your translation.
4. Translate the missing/stale questions, preserving the original markdown structure (the anchor scheme <a name='general'>, code fences, and bullet style must stay identical so that the navigation works).
5. Run a local build to confirm nothing broke:

npm install
npm run build

6. Open the generated _site/translations/<your-language>/index.html in a browser and proof the result.
7. Open a pull request titled Update <Language> translation and reference any open tracking issue (for example, #834 for Russian).

git checkout -b update-russian-translation
# edit src/translations/russian/README.md
git add src/translations/russian/README.md
git commit -m "Sync Russian translation with English master"
git push origin update-russian-translation

Important

Right-to-left languages (Arabic, Hebrew, Farsi) require rtl: true in the front-matter and the content wrapped in <div dir="rtl"> blocks. Look at src/translations/arabic/README.md for the exact pattern.

Recipe 4 — Propose a new question

Goal: add a new question to an existing category.

1. Open src/questions/<category>-questions.md for the category you want to extend.
2. Append your question as a bullet, matching the existing style — open-ended, no hint at an answer, no jargon that locks out a translator.
3. If your question would also be useful in the English template, add it to src/translations/_template/README.md.
4. Open a PR with a short rationale: who would be asked this question and what skill it probes.
5. Maintainers will discuss and merge or push back. Issue #935 ("Project Soul: Content Audit and Archiving Legacy Front-End Concepts") is the current discussion thread on what counts as a relevant question in 2026.

Tip

Before proposing, search the existing markdown for synonyms — many topics already have a question, sometimes phrased differently. Duplicates slow review.

Recipe 5 — Add a brand-new category

Goal: introduce a new top-level question topic (rare).

1. Create src/questions/<new-slug>-questions.md with at least 3–5 seed questions.
2. Add an entry to src/_data/questions.json with the abbreviation, title, URL (/questions/<new-slug>-questions/), and external: false.
3. Update the English template (src/translations/_template/README.md) with a new section anchor that mirrors the new file.
4. Run npm run build and verify the new section appears in the navigation and the standalone page renders.
5. Open a PR. Expect significant discussion — categories are added rarely and only when an established topic genuinely cannot fit an existing category.

Recipe 6 — Self-host the site under a different path

Goal: publish a customized fork on your own domain.

1. Fork the repository.
2. Edit package.json's build script and change --pathprefix='Front-end-Developer-Interview-Questions/' to match your hosting path (or remove it for root hosting).
3. Edit src/_data/site.json's url field to your domain.
4. Run npm run build.
5. Deploy _site/ to any static host (GitHub Pages, Netlify, Vercel, S3+CloudFront, plain nginx).

npm run build
# _site/ now contains a fully static, ready-to-deploy site
rsync -av _site/ user@server:/var/www/interview-questions/

6. Troubleshooting

This is a documentation/curation repo, so most "errors" you encounter are build- or content-related rather than runtime crashes.

Issue: npm install warns about deprecated packages

Cause: the project pins Eleventy 2.0.1 and a number of older transitive dependencies (notably @babel/parser@7.13.11, axios@0.18.1 via the resolutions block, and several deprecated lodash variants). Issue #936 tracks the audit.

Solution:

1. Confirm node --version reports >=14.
2. Run the install with npm install --no-audit --loglevel=error to suppress the noise.
3. Do not attempt to bump @11ty/eleventy to 3.x — the config in config/eleventy.config.js targets the 2.x plugin API and the upgrade is tracked separately by the maintainers.

Prevention: wait for issue #936 to land before rebuilding the lockfile. If you must regenerate the lockfile (for example, after a security advisory), open a PR rather than committing the change locally.

Issue: Eleventy: Missing template engine for .md files

Cause: the project sets the markdown template engine to Nunjucks (markdownTemplateEngine: 'njk' in config/eleventy.config.js). If you fork and remove that line, Eleventy falls back to the default behaviour and may fail on {{ }} interpolations inside markdown.

Solution: restore the original eleventyConfig.return block in config/eleventy.config.js, including:

return {
  templateFormats: ['njk', 'md', 'html'],
  dir: {
    input: 'src',
    includes: '_includes',
    data: '_data',
    output: '_site'
  },
  markdownTemplateEngine: 'njk',
  htmlTemplateEngine: 'njk',
  dataTemplateEngine: 'njk',
  passthroughFileCopy: true
}

Prevention: do not edit config/eleventy.config.js unless you understand the Eleventy 2.x plugin architecture. Forks that customize styling should touch only src/_includes/assets/css/.

Issue: a translation page renders blank or 404s after I added it to translations.json

Cause: entries in src/_data/translations.json are pure navigation data. They do not create pages. The actual page is rendered from src/translations/<language>/README.md. If the README does not exist, the navigation link points nowhere.

Solution:

1. Create src/translations/<language>/README.md from the template:

   cp src/translations/_template/README.md src/translations/<language>/README.md
   

2. Edit the front matter to set permalink: /translations/<language>/index.html and lang: <iso-code>.

3. Run npm run build and confirm the page exists at _site/translations/<language>/index.html.

Prevention: always create the README before adding the entry to translations.json.

Issue: npm start says "address already in use" on port 9090

Cause: another process is bound to port 9090. Eleventy's dev server hard-codes the port via the --port 9090 flag in the start script.

Solution: kill the process on 9090, or run with a different port directly:

npx @11ty/eleventy --config=config/eleventy.config.js --serve --port 9091 --quiet

Prevention: if you regularly run two Eleventy projects, edit your fork's package.json to use a different port.

Issue: a translation drifts behind the English master

Cause: translations are community-maintained. Translators add questions to the master in English first, and the translation lags until a translator volunteers.

Solution: open a PR. Tracking issues already exist for several languages: #812 (Burmese), #827 (Italian), #828 (Japanese), #834 (Russian), #840 (Turkish), and #853 (Hindi: SSR/CSR question). Pick one and follow Recipe 3 above.

Prevention: none — drift is the natural state of community-translated content. Issue #870 ("Add better documentation of translation process") is open precisely to lower the bar for translators.

Issue: the GitHub Actions workflow fails with "deprecated runner"

Cause: issue #932 tracks migrating Actions to Node 22/24 ahead of GitHub deprecating older runners.

Solution: if you are forking and your workflow fails, update the node-version in any .github/workflows/*.yml to 22 or 24. For the upstream repo, watch #932.

Prevention: avoid pinning to specific minor Node versions in CI; use lts/* or major versions where possible.

Caution

Do not commit the _site/ build output. The .gitignore excludes it, but if you remove that exclusion in a fork, your repo will balloon and PRs will become unreviewable. Build output is regenerated on every deploy.

7. FAQ

Q: Where are the answers to the questions?

There are no answers. The repository is intentionally answer-free — the questions are conversation starters, and most have multiple defensible answers depending on the candidate's experience. Use MDN, the relevant specs (HTML, CSS, ECMAScript), or interview-prep books like You Don't Know JS for canonical references.

Q: Why is the Accessibility category an external link?

Scott O'Hara maintains Accessibility Interview Questions — a separate, focused bank that is more thorough than what this repo would write. Linking out avoids forks of authoritative work.

Q: Can I print the questions for an in-person interview?

Yes. The published site renders cleanly to PDF from any browser's print dialog. Or grab the markdown directly from src/questions/<category>-questions.md and convert with pandoc.

Q: Should I add my own questions if I disagree with the existing set?

Yes — the project welcomes new questions. Open a PR against src/questions/<category>-questions.md (and the master template) with a short rationale. Issue #935 is the current discussion of what topics belong in a 2026 question bank.

Q: How do I cite this resource in my own materials?

Use the repository URL and the MIT license. The license at LICENSE.md permits commercial reuse with attribution.

Q: What languages have translations?

Thirty-five languages: Arabic, Bangla (Bengali), Bulgarian, Burmese, Chinese, Chinese-Traditional, Croatian, Czech, Danish, Dutch, Farsi, French, German, Greek, Hebrew, Hindi, Hungarian, Indonesian, Italian, Japanese, Korean, Latvian, Polish, Portuguese, Romanian, Russian, Serbian, Slovakian, Slovenian, Spanish, Swedish, Turkish, Ukrainian, and Vietnamese. The full list lives in src/_data/translations.json.

Q: Is the translation always in sync with the English master?

No. Translations are community-maintained and drift when new English questions are added. Open issues like #812, #827, #828, #834, #840, and #853 call out specific gaps. The src/translations/_template/README.md file is always the freshest English source.

Q: Why does the project use Eleventy instead of a more popular SSG?

Eleventy is dependency-light, has zero runtime requirements, and renders the same markdown that contributors edit by hand. Switching to a heavier framework would add a build step that translators (most of whom are not JS developers) would have to learn. The choice is deliberate.

Q: Can I run the site without Node.js at all?

Yes — read the markdown files directly on GitHub or browse the published site at h5bp.org/Front-end-Developer-Interview-Questions/. Node is only required if you want to render the static site yourself.

Q: How are contributors recognized?

Via the all-contributors bot. Contributions of all kinds count: doc, translation, infra, review, question, talk, maintenance, ideas. The full list is in .all-contributorsrc and surfaces on the about page.

Q: What does the maintenance status look like in 2026?

Active but slow. Recent open issues — #932 (Node version migration), #934 (rulesets vs branch protection), #935 (content audit), #936 (dependency audit) — show the maintainers are doing platform hygiene work. Question content updates are accepted via PRs as community members submit them.

Q: Is this repo a good fit for AI-assisted interview prep?

Yes — the questions are well-structured, free of answers (so an AI cannot regurgitate a model answer), and licensed permissively. Feed them to a tutor model and ask for follow-up probes when your answer is shallow.