Frontend Web Development Tooling, Performance & Deployment Syllabus

Tooling, Performance & Deployment syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Tooling, Performance & Deployment in Frontend Web Development, not a summary of it.

1. 1

   Version Control with Git

   4 topics

   • Git Basics & Commits
   • Branching & Merging
   • Remote Repositories & GitHub
   • Resolving Merge Conflicts
2. 2

   Package Managers & Build Tools

   4 topics

   • npm, yarn & pnpm
   • Modules & Bundling Concepts
   • Vite & Webpack
   • Transpilation (Babel) & ESBuild
3. 3

   Code Quality & Testing

   4 topics

   • Linting & Formatting (ESLint, Prettier)
   • Unit Testing (Jest, Vitest)
   • Component Testing (React Testing Library)
   • End-to-End Testing (Playwright, Cypress)
4. 4

   Web Performance

   4 topics

   • Core Web Vitals (LCP, INP, CLS)
   • Asset Optimization & Lazy Loading
   • Caching & CDNs
   • Lighthouse & DevTools Profiling
5. 5

   Accessibility & Standards

   4 topics

   • WCAG Principles
   • ARIA Roles & Attributes
   • Keyboard Navigation & Focus Management
   • Screen Reader Testing
6. 6

   Deployment & Hosting

   4 topics

   • Static Hosting (Netlify, Vercel, GitHub Pages)
   • CI/CD Pipelines
   • Environment Variables & Secrets
   • Domains, HTTPS & Performance Monitoring

Tooling, Performance & Deployment flashcards for Frontend Web Development

24 of 73 cards from the Tooling, Performance & Deployment deck — real questions with worked answers.

1. In Git, what is the difference between the working directory, the staging area (index), and the repository?

   The working directory holds your actual files; the staging area (index) holds a snapshot of changes queued for the next commit (added via `git add`); the repository stores committed snapshots permanently (created via `git commit`).

2. What does `git commit -m "message"` do, and what makes each commit unique?

   It records the staged snapshot as a new commit with a message. Each commit is uniquely identified by a SHA-1 (or SHA-256) hash computed from its content, tree, parent(s), author, and timestamp.

3. What is the difference between `git add .` and `git commit -a`?

   `git add .` stages new and modified (and, with newer Git, deleted) files in the current directory into the index. `git commit -a` automatically stages modifications and deletions of already-tracked files and commits them, but it does NOT stage new (untracked) files.

4. What is HEAD in Git?

   HEAD is a pointer to the current commit/branch you have checked out — normally it points to the tip of the current branch. A 'detached HEAD' means it points directly to a commit rather than a branch.

5. What does `git status` show versus `git log`?

   `git status` shows the current state of the working directory and staging area (tracked/untracked, staged/unstaged changes, current branch). `git log` shows the commit history with hashes, authors, dates, and messages.

6. In Git, what is a branch, technically?

   A branch is a lightweight, movable pointer (reference) to a specific commit. Creating a branch just creates a new pointer; the branch pointer advances automatically as you commit.

7. What is the difference between `git merge` and `git rebase`?

   `git merge` joins two branches by creating a merge commit that preserves the original history. `git rebase` replays your branch's commits on top of another branch, producing a linear history but rewriting commit hashes.

8. What is a fast-forward merge in Git?

   When the target branch has not diverged (the current branch's tip is a direct ancestor of the branch being merged), Git simply moves the branch pointer forward to the new commit with no merge commit created.

9. What is the difference between `git switch`/`git checkout` and `git branch`?

   `git branch <name>` creates (or lists/deletes) a branch pointer but does not move HEAD. `git switch <name>` (or `git checkout <name>`) moves HEAD to that branch, changing your working directory to match it. `git switch -c <name>` creates and switches in one step.

10. What does a three-way merge use to combine branches?

    It uses three snapshots: the two branch tips being merged and their common ancestor (merge base). Git compares changes on each side relative to the base to produce the merged result.

11. What is the difference between `git fetch` and `git pull`?

    `git fetch` downloads new commits and refs from a remote but does not change your working branch. `git pull` runs `git fetch` and then merges (or rebases with `--rebase`) the fetched changes into your current branch.

12. What is `origin` in Git?

    `origin` is the default conventional name for the remote repository you cloned from. It is an alias for the remote's URL, used in commands like `git push origin main`.

13. What does `git push -u origin main` accomplish?

    It pushes the local `main` branch to `origin` and, with `-u` (`--set-upstream`), sets `origin/main` as the tracking branch so future `git push`/`git pull` can be run without arguments.

14. On GitHub, what is the difference between a fork and a clone?

    A fork is a server-side copy of a repository under your own GitHub account, used to propose changes to projects you don't own. A clone is a local copy of a repository on your machine created with `git clone`.

15. What is a pull request (PR) on GitHub?

    A pull request is a proposal to merge changes from one branch (or fork) into another, providing a place for code review, discussion, CI checks, and approval before the changes are merged.

16. When does a Git merge conflict occur?

    A conflict occurs when two branches modify the same lines of a file (or one edits a file the other deletes) in incompatible ways, so Git cannot automatically decide which change to keep.

17. What do the conflict markers `<<<<<<<`, `=======`, and `>>>>>>>` indicate?

    `<<<<<<< HEAD` marks the start of your current branch's version, `=======` separates the two versions, and `>>>>>>>` marks the end with the incoming branch's version. You edit to resolve, then remove the markers.

18. What are the steps to resolve a merge conflict in Git?

    1) Run the merge and see conflicting files via `git status`. 2) Open each file and edit to keep the desired content, removing conflict markers. 3) `git add` the resolved files. 4) `git commit` (or `git merge --continue`) to finalize.

19. What is the purpose of a package.json file in a Node.js project?

    It is the manifest describing the project: name, version, scripts, and dependencies (`dependencies`, `devDependencies`, `peerDependencies`). Package managers use it to install and manage packages.

20. Compare npm, yarn, and pnpm in how they store dependencies.

    npm and (classic) yarn install a flattened copy of packages into each project's `node_modules`. pnpm uses a global content-addressable store and hard links/symlinks packages into a non-flat `node_modules`, saving disk space and enforcing stricter dependency resolution.

21. What is the purpose of a lockfile (package-lock.json, yarn.lock, pnpm-lock.yaml)?

    It records the exact resolved versions and integrity hashes of every installed dependency (including transitive ones), ensuring reproducible, deterministic installs across machines and over time.

22. In semantic versioning (`MAJOR.MINOR.PATCH`), what does each part signify?

    MAJOR increments for incompatible/breaking API changes, MINOR for backward-compatible new features, and PATCH for backward-compatible bug fixes.

23. In an npm version range, what is the difference between `^1.2.3` and `~1.2.3`?

    `^1.2.3` allows updates that do not change the leftmost non-zero digit — i.e. `>=1.2.3 <2.0.0` (minor + patch). `~1.2.3` allows only patch updates — i.e. `>=1.2.3 <1.3.0`.

24. What is the difference between ES Modules (ESM) and CommonJS (CJS) module systems?

    CommonJS uses `require()`/`module.exports`, is synchronous, and is the traditional Node format. ESM uses `import`/`export`, is the standard for browsers and modern Node, supports static analysis (tree-shaking), and can load asynchronously.

See more Tooling, Performance & Deployment flashcards →

Planning Tooling, Performance & Deployment for Frontend Web Development

Tooling, Performance & Deployment (Frontend Web Development) FAQ