# h5bp/front-end-developer-interview-questions architecture

> Architecture diagram of the GitHub repository h5bp/front-end-developer-interview-questions, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/h5bp/front-end-developer-interview-questions
- Repository: https://github.com/h5bp/front-end-developer-interview-questions

## Overview

This repository is a curated interview-question resource, not an interview-management application. A reader selects relevant subject areas and uses their questions to guide candidate discussions or self-study; the README cautions against using the entire collection in one interview. The content is divided into topic files, with an external accessibility resource, and the tree also contains site pages, templates, data, and translations. Source excerpts do not show how those site components are wired together, so the graph limits evidenced relationships to the README’s documented collection and links.

Main entry points: [`src/questions/general-questions.md`](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/general-questions.md) (General questions), [`src/questions/html-questions.md`](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/html-questions.md) (HTML questions), [`src/questions/css-questions.md`](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/css-questions.md) (CSS questions), [`src/questions/javascript-questions.md`](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/javascript-questions.md) (JavaScript questions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_audience["Readers"]
  node_reader(("Reader / interviewer"))
end

subgraph group_questions["Question Bank"]
  node_general["General questions"]
  node_html["HTML questions<br/>[html-questions.md]"]
  node_css["CSS questions<br/>[css-questions.md]"]
  node_javascript["JavaScript questions"]
  node_testing["Testing questions"]
  node_performance["Performance questions"]
  node_network["Network questions"]
  node_coding["Coding questions"]
  node_fun["Fun questions<br/>[fun-questions.md]"]
  node_accessibility["Accessibility questions"]
end

subgraph group_site["Site Content"]
  node_landing["Landing page<br/>[index.njk]"]
  node_about["About page<br/>[about.njk]"]
  node_translations["Translations"]
  node_site_data["Site data"]
  node_layouts["Page layouts"]
end

node_reader -->|"selects questions"| node_general
node_reader -->|"selects questions"| node_html
node_reader -->|"selects questions"| node_css
node_reader -->|"selects questions"| node_javascript
node_reader -->|"selects questions"| node_testing
node_reader -->|"selects questions"| node_performance
node_reader -->|"selects questions"| node_network
node_reader -->|"selects questions"| node_coding
node_reader -->|"selects questions"| node_fun
node_reader -->|"may consult"| node_accessibility

click node_general "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/general-questions.md"
click node_html "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/html-questions.md"
click node_css "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/css-questions.md"
click node_javascript "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/javascript-questions.md"
click node_testing "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/testing-questions.md"
click node_performance "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/performance-questions.md"
click node_network "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/network-questions.md"
click node_coding "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/coding-questions.md"
click node_fun "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/fun-questions.md"
click node_landing "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/index.njk"
click node_about "https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/about.njk"
click node_translations "https://github.com/h5bp/front-end-developer-interview-questions/tree/main/src/translations"
click node_site_data "https://github.com/h5bp/front-end-developer-interview-questions/tree/main/src/_data"
click node_layouts "https://github.com/h5bp/front-end-developer-interview-questions/tree/main/src/_includes/layouts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_reader toneBlue
class node_general,node_html,node_css,node_javascript,node_testing,node_performance,node_network,node_coding,node_fun,node_accessibility toneAmber
class node_landing,node_about,node_translations,node_site_data,node_layouts toneMint
```

## Components

### Readers

- **Reader / interviewer**

### Question Bank

- [General questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/general-questions.md): `src/questions/general-questions.md`
- [HTML questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/html-questions.md): `src/questions/html-questions.md`
- [CSS questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/css-questions.md): `src/questions/css-questions.md`
- [JavaScript questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/javascript-questions.md): `src/questions/javascript-questions.md`
- [Testing questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/testing-questions.md): `src/questions/testing-questions.md`
- [Performance questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/performance-questions.md): `src/questions/performance-questions.md`
- [Network questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/network-questions.md): `src/questions/network-questions.md`
- [Coding questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/coding-questions.md): `src/questions/coding-questions.md`
- [Fun questions](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/questions/fun-questions.md): `src/questions/fun-questions.md`
- **Accessibility questions**

### Site Content

- [Landing page](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/index.njk): `src/index.njk`
- [About page](https://github.com/h5bp/front-end-developer-interview-questions/blob/main/src/about.njk): `src/about.njk`
- [Translations](https://github.com/h5bp/front-end-developer-interview-questions/tree/main/src/translations): `src/translations`
- [Site data](https://github.com/h5bp/front-end-developer-interview-questions/tree/main/src/_data): `src/_data`
- [Page layouts](https://github.com/h5bp/front-end-developer-interview-questions/tree/main/src/_includes/layouts): `src/_includes/layouts`

## Connections

- Reader / interviewer → General questions: selects questions (evidence: `README.md`)
- Reader / interviewer → HTML questions: selects questions (evidence: `README.md`)
- Reader / interviewer → CSS questions: selects questions (evidence: `README.md`)
- Reader / interviewer → JavaScript questions: selects questions (evidence: `README.md`)
- Reader / interviewer → Testing questions: selects questions (evidence: `README.md`)
- Reader / interviewer → Performance questions: selects questions (evidence: `README.md`)
- Reader / interviewer → Network questions: selects questions (evidence: `README.md`)
- Reader / interviewer → Coding questions: selects questions (evidence: `README.md`)
- Reader / interviewer → Fun questions: selects questions (evidence: `README.md`)
- Reader / interviewer → Accessibility questions: may consult (evidence: `README.md`)