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