Web Frontend¶

Reference knowledge base for HTML, CSS, JavaScript, TypeScript, React, build tooling, and Figma design.

HTML¶

The structural foundation of web content, from document structure to forms and accessibility.

[[html-fundamentals]] - Document structure, semantic elements, images, links, block vs inline
[[html-tables-and-forms]] - Tables, form inputs, validation, labels, accessibility patterns

Styling, layout, and visual presentation of web content.

[[css-selectors-and-cascade]] - Selectors, specificity, inheritance, colors, typography, custom properties
[[css-box-model-and-layout]] - Box model, border-box, display, position, z-index, units, backgrounds
[[css-flexbox]] - 1D layout: direction, justify, align, grow/shrink/basis, common patterns
[[css-grid]] - 2D layout: template columns/rows, areas, auto-fit/fill, minmax, subgrid
[[css-responsive-design]] - Media queries, viewport units, clamp(), responsive images, mobile-first
[[css-animation-and-transforms]] - Transitions, transforms, keyframes, filters, GPU performance
[[css-sass-and-methodology]] - BEM naming, SMACSS, SASS/SCSS preprocessing, file organization

Core language features from variables and types through async programming.

[[js-variables-and-types]] - let/const/var, primitives, typeof, coercion, truthy/falsy
[[js-control-flow]] - Conditions, strict equality, logical operators, optional chaining, loops
[[js-strings-and-numbers]] - String/Number methods, Math, floating point, regex basics
[[js-functions]] - Declarations, arrows, parameters, higher-order functions, callbacks, pure functions
[[js-scope-closures-this]] - Scope chain, hoisting, closures, this binding rules, strict mode
[[js-arrays]] - Mutating/non-mutating methods, map/filter/reduce, destructuring, spread, chaining
[[js-objects-and-data]] - Objects, destructuring, spread, JSON, Date, Symbol
[[js-dom-and-events]] - DOM selection/modification, events, delegation, localStorage, FormData
[[js-async-and-fetch]] - Event loop, Promises, async/await, Fetch API, error handling

Static type system for JavaScript, from basics to advanced type-level programming.

[[typescript-fundamentals]] - Basic types, interfaces, unions, generics, narrowing, structural typing
[[typescript-advanced]] - Utility types, conditional types, mapped types, branded types, Zod, React typing

Component-based UI library with hooks for state management and side effects.

[[react-components-and-jsx]] - JSX rules, components, props, children, composition, conditional rendering
[[react-state-and-hooks]] - useState, useEffect, useRef, custom hooks, event handling
[[react-rendering-internals]] - Virtual DOM, Fiber, re-render triggers, memo/useMemo/useCallback, keys
[[react-styling-approaches]] - CSS Modules (scoped styles), Tailwind CSS (utility-first)

Package management, bundling, and optimization for production.

[[npm-and-task-runners]] - npm, package.json, node_modules, Gulp, SASS CLI
[[frontend-build-systems]] - Webpack/Vite/Rollup, transpilation, tree-shaking, code splitting, source maps
[[git-and-github]] - Version control, branching, merging, PRs, collaboration workflows

UI/UX design tool for creating mockups, prototypes, and design systems.

[[figma-fundamentals]] - Interface, frames, grids, layers, shapes, export, sharing
[[figma-layout-and-components]] - AutoLayout, constraints, components, variants, design systems
[[figma-design-workflow]] - Typography, color, effects, prototyping, responsive design, wireframes