258 terms · 6 categories
Glossary
Every term comes with a plain-English definition, a wireframe, and a prompt you can copy straight into your AI.
Look-alike terms
23 sets of look-alike terms that are easy to mix up, side by side.
01Visual guide
Layouts
How blocks on a page are arranged. Spot the overall frame first, then see which arrangement fits each block.
Hover a thumbnail to see what each part is called
Page frame
05Single Column Layout
The page has one centered main column. All sections stack from top to bottom with no sidebar. Common on mobile and on pages with a simple structure.Holy Grail Layout
A full-width header and footer, with the middle row split into a left sidebar, main content and a right sidebar. Both sidebars have fixed widths and the main column stretches.Master-Detail Layout
A list of records on the left and the selected record's details on the right. Click any item on the left and the right side switches to it without leaving the page.Top Navigation Layout
A horizontal nav bar across the top holds the logo, main menu and user links, and the whole area below it is content. Good for sites with only a few nav items.Sidebar Layout
Content display
11Dashboard
Sums up several different sets of key data on one screen with metric cards, charts and short lists, so people can see the overall picture and spot problems in seconds.Article Layout
A page designed for reading long text. The body stays in a fairly narrow column, with heading levels, paragraph spacing and a table of contents so long content isn't tiring to read.Card Grid
Items of the same kind become cards of equal size, arranged neatly in rows and columns. Each card has a cover image, a title and a bit of key info.Masonry Layout
Cards have the same width but their height follows the content, and each new card drops into the shortest column, so the whole thing looks like a staggered brick wall. Common in image communities and discovery apps.Data Table
Shows lots of records of the same kind in rows and columns, one record per row and one field per column, with filters, sorting, pagination and bulk actions so users can find and compare rows.List View
Stacks items of the same kind in one column from top to bottom. Each row has just an icon, a title and one or two bits of extra info. Good when items are simple and users need to scan and tap quickly.Feed
Full pieces of content stacked one after another. Each has the author, text, images and interactions like likes and comments, and users read right in the feed while scrolling down to load more.Timeline
Lines up event nodes along a vertical line in time order. Each node shows when it happened and what happened, to show a process, a history or shipping progress.Gallery
A layout where images are the star. Thumbnails of the same aspect ratio are packed into a grid with almost no text, and clicking one opens it large with left and right navigation.Description List
Lays out a record's properties as label-value pairs, often in a two- or three-column grid. Good for viewing details in read-only mode.Side-by-Side Comparison
Puts two pieces of content with the same structure side by side on one screen, with matching parts aligned line by line and differences highlighted, so it's easy to spot what's different.
Task flow
03Kanban Board
Splits tasks into side-by-side columns by status. Each task is a small card, and dragging a card to another column changes its status.Wizard
Breaks a long task into a few steps in a set order. Each screen handles one step, a steps bar at the top shows progress, and users move through it with Back and Next.Single Page Form
Puts every field to fill in on one page, in a single column from top to bottom, and users submit everything at once with the button at the bottom. It's the most common page for creating and editing data.
Page types
05Settings Page
Groups lots of independent options by category, with category switching on the left or at the top and a short description for each option. Users come back anytime to change any one of them.Landing Page
A long page built to promote a product or campaign. Starting with a big headline, it walks through the benefits, the proof and the pricing, guiding visitors to click the same call-to-action button.Login / Sign-up Page
The page where users log in or create an account. A small, narrow form card sits in the middle with only the essentials like the account, password and submit button, often paired with a brand illustration.Empty State
A placeholder shown when a list, table or page has no content. It uses an illustration and one sentence to explain why it's empty, plus a button for the next step.Search Results Page
The page users see after entering a keyword. The search box stays at the top, filters sit at the side or above, and the main area lists results by relevance with the keyword highlighted.
02Visual guide
UI components
The controls on a page, from buttons and inputs to dialogs and filter bars.
Fundamentals
06Button
Icon Button
Link
Clickable text that takes you to another page, a spot on the same page, or an external URL. Usually colored or underlined.Divider
A thin horizontal or vertical line that separates two neighboring blocks of content, sometimes with a bit of small text in the middle.Floating Action Button
A round button pinned to the bottom-right corner of the screen that stays put while the page scrolls, holding the most-used action on the current page.Image
Shows a picture on the page. You usually need to handle the aspect ratio, a loading placeholder, load failures, and click-to-zoom preview.
Form input
23Input
A box for typing one short line of text, like a name, phone number, email, or title. The most common control in forms.Textarea
An input for multiple lines of text where Enter adds a new line. Good for longer content like notes, comments, and problem descriptions.Input Number
An input that only accepts numbers, with plus and minus buttons. It can limit the minimum, maximum, and step size.Select
Click to open a list of options and pick one or more. When closed it only takes up the space of an input, so it suits longer option lists.Checkbox
A small box you can check and uncheck, for picking several options from a group or confirming a single item like "I agree to the terms."Radio
A group of round options where only one can be selected, and picking a new one deselects the old one. Good for 2 to 5 mutually exclusive options.Switch
A small sliding control, like a light switch, that turns a feature on or off. It usually takes effect as soon as you flip it.Slider
Drag a round handle along a horizontal track to pick a value or a range. Good for adjustments that don't need precision, like volume, brightness, or a price range.Date Picker
Click an input and a small calendar pops up so users can pick a date or date range, instead of typing dates in inconsistent formats.Upload
A control for choosing files or images from a computer or phone and sending them to the server, by clicking a button or dragging files in.Form
Groups input controls, field labels, validation messages, and a submit button together to collect and submit the information users fill in.Search Box
An input with a magnifying glass icon. Type keywords and press Enter or click the search button to find content on the page, in a list, or across the site.Transfer
Two lists side by side with arrow buttons in between. You move items from the "available" side to the "selected" side to pick a batch.Cascader
A dropdown that opens into columns you pick from left to right by level, like choosing a state, then a county, then a city.Rate
A row of five stars (or other icons) where the number lit up is the score. Users can give a rating with it, or it can just show an average score.Segmented Control
A few option buttons packed into one strip, where only one can be selected at a time. Used to switch quickly between a few views or modes.Filter Bar
A row of query conditions above a list or table, like keyword, status, or date range, used to narrow down the data you see.Time Picker
An input for picking a specific time of day (hours and minutes). Click it and you scroll through hour and minute columns, or pick from a list of times at fixed intervals.Color Picker
A control for choosing a color. Normally it's a small swatch showing the current color. Click it to pick from a color area and hue slider, type a color value, or tap a preset.OTP Input
A row of small boxes for a text or email verification code, one digit per box. Typing a digit jumps to the next box. Common in sign-in, sign-up, and extra checks before sensitive actions.Rich Text Editor
An editing area like a lightweight Word. A row of tool buttons on top lets you bold text, set headings, and add lists, links, and images. What you see is what you get, and it saves formatted content.Tag Input
An input that takes several short words. Type a word and press Enter, and it becomes a small tag inside the box. Keep typing the next one, and click the ✕ on a tag to remove it.Chat Input
The input area at the bottom of a chat or AI conversation. A text box that grows with its content, plus buttons for attachments and sending (Send turns into Stop while generating). Enter sends, Shift+Enter adds a new line.
Navigation
12Navbar
Sidebar Menu
Breadcrumb
Tabs
A row of clickable labels where clicking one shows its content panel below. Used to switch between a few peer blocks of content in the same spot.Pagination
Splits a large set of data into pages, with page numbers and Previous and Next buttons for moving between them.Steps
A row of numbered nodes connected by lines that shows every step of a multi-step process and which step the user is on.Dropdown Menu
Footer
Anchor
A small table of contents listing the section titles on the current page. Click one to jump there; while scrolling, the current section is highlighted automatically.Command Palette
A search box that pops up with a keyboard shortcut (usually Ctrl+K or ⌘K). Type a keyword to jump to a page or run an action.Bottom Tab Bar
A row of 3–5 icons with labels fixed to the bottom of mobile apps and mobile web pages, used to switch between the most important pages.Menubar
Data display
13Table
Lays out many records with the same structure in rows and columns, one record per row and one field per column, so they're easy to compare, sort, and filter.List
Stacks items vertically one after another, each usually a title plus a line or two of description. Good for browsing one by one and clicking into details.Card
A self-contained rectangle with a border or shadow that groups a related image, title, description, and actions into one unit.Avatar
A small round or rounded-square image that represents a person or account. Without an image, it shows the person's initials or a default icon.Badge
A small red dot or number on the top-right corner of an icon, avatar, or button that tells users there are unread messages or new content.Tag
A small rounded marker next to text that uses a word or two to show a category, status, or attribute, like "Shipped" or "Frontend."Carousel
Shows several images or cards in turn in the same area. It can switch automatically, or users can swipe or click dots to switch.Tree
An indented list you can expand level by level, used to show data with parent-child relationships, like org charts, folders, or categories.Statistic
A key metric shown as a big number, with the metric name above it, often with a unit, an up or down arrow, and a comparison.Chart
Turns numbers into lines, bars, slices, and other shapes to show trends, comparisons, and proportions, so the data makes sense at a glance.Code Block
An area that shows code in a monospace font with syntax highlighting, usually with a language label, line numbers, and a one-click copy button.Calendar
A grid of dates by month or week that shows each day's schedule, events, or data right inside the cells.Map
A draggable, zoomable map embedded in a page, with markers for stores, addresses, or delivery locations. Clicking a marker opens its details.
Feedback
11Tooltip
A short piece of dark explanatory text that pops up next to an element on mouse hover or keyboard focus and disappears when you move away.Popover
A small card that pops up next to an element when you click or hover it. It can hold a title, a few lines of text, or even buttons.Modal
A window that pops up in the middle of the page with a backdrop behind it. The user has to deal with it or close it before they can use the page again.Drawer
A panel that slides in from the edge of the screen, so you can view details or fill in a form without leaving the current page.Toast
A short one-line message that appears briefly at the top or bottom of the screen after an action, then disappears after a few seconds without interrupting the user.Alert
A colored bar that stays in the page or a section, explaining the current status, a risk, or something to watch out for.Notification
A message card that pops in from a corner of the screen (usually the top right), with a title and body text, to announce new messages or background task results.Progress
A bar or ring that gradually fills up to show how much of a task is done, so users know how long they still have to wait.Spinner
A small icon that keeps spinning to show something is processing or loading, without saying how long it will take.Skeleton
Before the data finishes loading, gray blocks sketch the rough outline of the page content, then get replaced by the real content once it arrives.Result Page
A full-page response after an action like paying, submitting, or signing up. A big icon, a one-line result title, a line of explanation, and "next step" buttons tell users whether it worked and what to do next.
Layout containers
03Collapse
A set of panels whose titles you click to expand or collapse the content, used to split long content into sections people open as needed.Toolbar
A compact row of buttons and icons placed above a block of content, grouping the common actions for that content in one place.Section
Splits a long page into chunks. Each chunk has its own heading and a group of content, and chunks are separated by white space, dividers, or a change in background color.
Marketing
09Hero Section
The big area at the top of a landing page or company site. A large headline, one line of explanation, and a main button tell people what the product is at first glance.Feature Grid
The section on a marketing site that introduces what the product does. A set of icons, short titles, and one or two lines of text laid out in two or three neat columns, so visitors can scan the main selling points fast.CTA Section
A standout block at the end (or middle) of a marketing page with one headline and one main button. It gives visitors a final push to sign up, start a trial, or contact sales after they've read the pitch.Pricing Table
The section on a marketing site that lists a few plans side by side. Each one shows the price, who it's for, what's included, and a buy button, and the recommended plan is usually highlighted.FAQ Section
A section that collects the questions visitors ask most, with their answers. On marketing sites it's usually a list of questions you can click to expand, placed after the pricing table and before the footer.Testimonial
A section on a marketing site that shows real customers' own words. Each one is a quote plus the speaker's photo, name, job title, and company, using word of mouth to win over new visitors.Logo Wall
One or a few rows of customer or partner logos on a marketing site, usually in gray, with a line like "Teams using us." It quickly shows who uses the product.Stats Band
A full-width strip on a marketing site with three or four big numbers side by side, each with a line of explanation (like "active stores"). It uses specific, sourced numbers to show the product's scale or results.How It Works
A section on a marketing site that explains "how to get started" in 3–4 numbered steps, each with a number, a short title, and one sentence, so visitors know what they'll need to do.
Page header
01Text
04Heading
The title text (h1–h6) above a page or a block of content. It's bigger and bolder than body text, says what the block below is about, and together they form the page's outline.Paragraph
A complete block of explanatory text, written with a p tag and placed under a heading to spell out the details. Whether it's easy to read comes down to line length, line height, and font size.Inline Code
A short piece of code inside a sentence, like the function useState, the command npm install, or the file .env, set apart from body text with a monospace font and a light gray background.Blockquote
A passage in an article quoted from someone else or another source. It has a vertical bar on the left, is indented, uses a slightly lighter text color, and ends with the source.
Forms
01Actions
02Layout
01Overlays
02Accounts
01Messages
02Notification Center
The one place to see all in-app notifications. Click the bell to open a list of comments, mentions, and system messages in time order. Unread ones have a dot, and you can mark all as read in one click.Chat Bubble
One message in a chat or AI conversation. It's a rounded box with a background color. Your messages sit on the right, the other person's or the AI's on the left, with an avatar and a time nearby.
UX polish
01Images
02Image Preview
The full-screen view that opens when you click a thumbnail. It shows the original image on a dark background, lets you zoom, rotate, and flip through the rest of the set, and closes with Esc or the ✕.QR Code
A black-and-white square pattern that a phone can scan to open a link, log in, pay, or add a contact. Put a line next to it saying which app to scan with and what scanning does.
Social
01Keyboard
01Alerts
01Content display
0103Dictionary
Concepts
Common words from interactions, styling, frontend engineering, and AI coding, sorted A–Z.
136 terms
A terms
- AI AgentAI codingAn AI that breaks down tasks, uses tools, checks the results, and decides what to do next on its own, instead of just replying with text one question at a time.
- AI AutocompleteAI codingThe editor suggests the next stretch of code in faint preview text as you type, and you accept it with Tab.
- AI EvaluationAI codingUse a fixed set of cases and scoring rules to see whether a prompt or model change got better or worse—not just two gut-feel tries.
- AI MemoryAI codingStore preferences and facts that should survive across chats and inject them next time, so you don't repeat yourself every session.
- AI Pair ProgrammingAI codingTreat the AI as a pairing partner: one of you drives writing and trying, the other (or the AI) questions, adds tests, and watches risk—instead of tossing the whole job to the model.
- AlignmentStyling & CSSLining up page elements along the same invisible line, such as left, center, right, or vertical centering, so the interface looks neat and orderly.
- API KeyAI codingA secret string that identifies and bills you when you call a large model or third-party service. It's basically your account password. If it leaks, other people can spend your money.
- Application Programming InterfaceFrontend engineeringThe agreed-upon entry point the frontend uses to get data from and send data to the backend. It defines which URL to call, what parameters to send, and what format comes back.
- AutocompleteInteractionsAs the user types, matching suggestions appear live below the input. They can pick one with the mouse or arrow keys, which means less typing and fewer typos.
B terms
- Border RadiusStyling & CSSA CSS effect that turns an element's square corners into curves. Bigger values mean rounder corners, and it's one of the key things that makes an interface feel sharp or soft.
- Box ModelStyling & CSSThe browser treats every element as a rectangular box with four layers. From the inside out, they are content, padding, border, and margin.
- Box ShadowStyling & CSSA blurry dark layer under an element that makes it look like it's floating above the page. The bigger and softer the shadow, the higher the element looks.
- BreakpointStyling & CSSThe screen width at which a responsive layout switches styles, for example going from two columns to one when the width is below 768px.
- BuildFrontend engineeringThe process that converts, minifies, and bundles the source code you write into files the browser can run directly. The output is what gets deployed.
- Bulk ActionInteractionsCheck several items first, then delete, export, or change the status of all of them at once, instead of handling them one by one.
- BundleFrontend engineeringThe minified, packaged files your build tool emits—what browsers actually download and run.
C terms
- CacheFrontend engineeringTemporarily store computed or fetched results for reuse—browser cache, CDN, server memory/Redis, or in-app caches.
- Cascading Style SheetsFrontend engineeringThe styling language that controls how a web page looks. It handles color, fonts, spacing, layout, and animation, and turns the bare HTML frame into something nice and usable.
- CDNFrontend engineeringCache static assets on edge nodes closer to users to cut latency and offload the origin.
- CheckpointAI codingA snapshot of your code that an AI coding tool saves automatically before each round of changes. If something breaks, you can go back to before that round in one click.
- CI/CDFrontend engineeringAutomatically run checks and builds on each change (CI), then automatically or one-click deploy to environments (CD), reducing hand-release mistakes.
- Claude CodeAI codingA coding agent from Anthropic that mainly runs in the terminal. It can understand the whole project, edit files, and run commands.
- Client-Side RenderingFrontend engineeringThe browser downloads a mostly empty shell plus JS, then fetches data and builds the UI on the client; first paint depends on JS finishing.
- Code SplittingFrontend engineeringSplit the build into smaller files loaded by route or component so the first visit doesn't download the entire app JS.
- Codebase IndexingAI codingThe AI editor scans and indexes your project ahead of time so chat and completions can find relevant code without rereading everything each turn.
- Color ContrastStyling & CSSThe difference in lightness between text and background colors. If it's too small, text is hard to read. Accessibility standards require at least 4.5:1 for body text.
- Color PaletteStyling & CSSThe full set of colors an interface uses and the rules for using them, including the brand's primary color, black, white, and gray neutrals, and semantic colors for success, warning, and error.
- ComponentFrontend engineeringSplitting a page into small pieces you can write on their own and reuse. Each piece has its own structure, styles, and logic, and you snap them together like building blocks.
- Component LibraryFrontend engineeringA full set of ready-made UI components someone else built, like buttons, forms, and dialogs, that you can install and use right away. The style is consistent, and you don't have to build from scratch.
- Computer UseAI codingLet the AI look at the screen, move the pointer, click, and type—operating a browser or desktop app the way a person would.
- Confirmation DialogInteractionsBefore an action that can't be undone, like deleting or paying, show a dialog asking the user to confirm one more time, to prevent mistakes.
- Context EngineeringAI codingDeliberately choose and organize what goes into the model context—code, rules, retrieval hits, history—so the AI does the right work inside a limited window.
- Context WindowAI codingThe limit on everything a model can "see" in one conversation, measured in tokens. Anything over the limit gets cut off or compressed.
- Cross-Origin Resource SharingFrontend engineeringFor security, browsers only allow requests to the same origin by default. Calling an API on another domain or port needs that server's explicit permission, or you get a CORS error.
- CSS Custom PropertiesStyling & CSSGive a value a name in CSS, store it, and reuse it everywhere. Change it in one place and it updates across the site. Commonly used for colors, spacing, and themes.
- CSS GridStyling & CSSDivides an area into a grid of rows and columns, then places elements into the cells. Good for two-dimensional layouts where both rows and columns need to line up.
- CSS PositionStyling & CSSThe position property takes an element out of the normal order and places it by set offsets. Common for badges, floating buttons, and fixed navbars.
- CSS UnitsStyling & CSSUnits for length. Common ones are fixed pixels (px), rem and em that follow font size, vw and vh that scale with the window, and percentages.
- CursorAI codingA code editor with built-in AI. It looks and works a lot like VS Code, and you can chat with the AI right in the editor and have it edit your project's code directly.
D terms
- Dark ModeStyling & CSSA color scheme with a dark background and light text. It can switch automatically with the system setting, or let users choose it manually.
- DebounceInteractionsWhen an event fires over and over, hold off, and once it stops for a set time, run only the last one. Often used for search suggestions as you type.
- DeploymentFrontend engineeringThe process of putting your built project on a public server or hosting platform so other people can visit it at a URL.
- Design TokenStyling & CSSDesign decisions like colors, font sizes, spacing, corner radius, and shadows pulled out into named variables, so design files and code on every platform share one spec.
- Dev ServerFrontend engineeringA service that runs your project temporarily on your own computer so you can preview as you build. You usually open it in the browser at localhost plus a port number.
- Developer ToolsFrontend engineeringThe debugging panel built into the browser. Press F12 to open it and see the page structure, styles, error messages, and network requests.
- DiffAI codingThe difference between two versions of code, usually shown with deleted lines in red and added lines in green, so you can quickly see what changed.
- Disabled StateInteractionsThe style of an element that can't be used right now. It usually looks faded, the cursor shows a "not allowed" sign, and clicking does nothing.
- Document Object ModelFrontend engineeringThe tree structure the browser builds in memory after parsing HTML. JavaScript uses it to read and change what's on the page.
- Drag and DropInteractionsPick something up and drop it into another area, like dragging a file into an upload box or moving a card to another column on a kanban board.
- Drag to ReorderInteractionsPress and hold a list item, drag it to a new spot, and let go to change the order. Common for to-do items, menu setup, and photo order.
E terms
- EmbeddingAI codingTurn text or code into a numeric vector so semantically similar content sits closer in space, which helps search and dedupe.
- End-to-End TestFrontend engineeringDrive a real or headless browser like a user—clicking and navigating—to verify a whole path works, not just one function.
- Environment VariableFrontend engineeringConfig values kept outside your code and set per environment, like API URLs and secret keys, so sensitive info isn't hardcoded.
- Error StateInteractionsWhat users see when a request fails, input is wrong, or the page breaks. It should explain what went wrong and what to do next.
F terms
- Few-shot PromptingAI codingGive the AI one or two examples in your prompt so it copies their format, style, or approach. This is more accurate than describing it in words alone.
- Filter & SortInteractionsFiltering narrows the data down by conditions, and sorting changes the order. The two often appear together above lists and tables.
- FlexboxStyling & CSSA CSS layout method that lines up a group of elements in one direction (a row or a column) and makes it easy to control their alignment, spacing, and how they grow or shrink.
- Focus StateInteractionsThe style of an element that's selected and ready for input, like an input border getting darker when clicked, or an outline around a button when you press Tab.
- Font WeightStyling & CSSHow thick the strokes of text are, written as a number from 100 to 900. 400 is regular and 700 is bold. It's used to separate more important info from less important info.
- Form ValidationInteractionsChecking that what the user entered meets the rules, like required fields, phone number format, or password length, and showing a specific message when it doesn't.
- Frontend FrameworkFrontend engineeringThe full set of groundwork that defines how to write components, how the page updates when data changes, and how pages are organized. React and Vue are examples.
G terms
H terms
- HallucinationAI codingWhen AI generates content that looks reasonable but is wrong or doesn't exist, like made-up functions, API fields, or package names.
- HooksFrontend engineeringFunctions in React that start with use. They give function components abilities like state and side effects, and you can also use them to package up reusable logic.
- Hot Module ReplacementFrontend engineeringAfter you save code, the dev server pushes the change to the browser and the page updates right away, often keeping your current input and state.
- Hover StateInteractionsThe style change when the mouse moves over an element, like a button getting darker or a card lifting up. It tells users they can click here.
- Human-in-the-loopAI codingThe AI may propose or prepare actions, but critical steps wait for a human before they actually run—so it doesn't wreck production or delete data on its own.
- HydrationFrontend engineeringThe server sends HTML first; the browser then attaches framework state and events to that DOM so the page goes from viewable to interactive.
- HyperText Markup LanguageFrontend engineeringThe markup language that describes a web page's structure and content. Its tags tell the browser what's a heading, a paragraph, a button, or an image.
I terms
- IconStyling & CSSSimple small graphics that stand for an action or meaning, like a magnifying glass for search or a trash can for delete. They usually come from an icon library with a consistent style.
- Incremental Static RegenerationFrontend engineeringPages are still generated and cached as static files, but can regenerate in the background after they expire—static speed with fresher content.
- Infinite ScrollInteractionsWhen the user scrolls to the bottom of a list, the next batch of content loads automatically. No paging needed, so the list feels like it never ends.
- Inline EditInteractionsClick and edit right where the content is shown, with no page change or dialog. Press Enter or click outside to save.
- Iterative PromptingAI codingInstead of expecting to explain everything at once, have the AI make a first version, then add and correct things round by round until you get there.
J terms
- JavaScriptFrontend engineeringThe programming language that makes web pages "come alive." It handles interaction logic like responding to clicks, fetching data, and updating the page.
- JavaScript Object NotationFrontend engineeringA text format that represents data with curly braces and key-value pairs. Most data sent between frontend and backend, and most project config files, use it.
K terms
L terms
- Large Language ModelAI codingAn AI model trained on huge amounts of text that can understand and generate text and code. It's the "brain" behind AI coding tools.
- Lazy LoadingInteractionsImages, components, and other resources don't load up front. They load only when the user is about to scroll to them or actually needs them, which makes the first screen load faster.
- Lazy LoadingFrontend engineeringLoad assets or components only when needed—entering the viewport, opening a route, or expanding a panel—to lighten the first paint.
- Line HeightStyling & CSSThe height each line of text takes up. It sets how loose or tight multi-line text looks, and body text is usually 1.5 to 1.8 times the font size.
- LinterFrontend engineeringScan code with static rules—without running it—to catch style issues and common bugs early in the editor or CI.
- Loading StateInteractionsFeedback shown while data or an action isn't finished yet. Common forms are spinners, skeleton screens, progress bars, and buttons in a loading state.
- Local StorageFrontend engineeringA small bit of local storage the browser provides. It can hold a little data that's still there after you close the page and open it again.
M terms
- Margin & PaddingStyling & CSSPadding is the space inside the border, around the content. Margin is the space outside the border, between this element and others.
- Media QueryStyling & CSSStyle rules in CSS that only apply under certain conditions, like when the screen is narrower than 768px or the system has dark mode turned on.
- Micro-interactionInteractionsA short feedback animation around one small action, like a heart popping when you like something, a toggle knob sliding over, or a copy icon turning into a checkmark.
- MiddlewareFrontend engineeringLogic that runs before a request hits a page or API—often for auth, redirects, rewrites, or injecting headers.
- Model Context ProtocolAI codingAn open protocol that lets AI tools connect to external tools and data sources in a standard way. Install the right MCP server and the AI gets new abilities.
- MonorepoFrontend engineeringKeep multiple apps and shared packages in one Git repo, managed with workspaces so versions and reuse stay aligned.
- Multi-file EditAI codingIn one task, let the AI edit several related files and show Diffs together, instead of pasting files back and forth in chat.
- MultimodalAI codingThe model can handle more than text. It can understand images, screenshots, design mockups, and other kinds of input, and some can also generate images or audio.
O terms
- Optimistic UpdateInteractionsAfter a user action, the UI shows the successful result right away while the request runs in the background. If the request fails, the UI changes back.
- OverflowStyling & CSSHow content is handled when it's bigger than its container. It can spill outside, get clipped, show a scrollbar, or have long text cut off with an ellipsis.
P terms
- Package ManagerFrontend engineeringThe tool that downloads, installs, and manages the third-party code packages your project depends on. Common ones are npm, pnpm, and yarn.
- Plan ModeAI codingHave the AI output a change plan, file list, and risks first, and only edit code after you approve.
- Progressive DisclosureInteractionsShow only the most common content and options first, and reveal details or advanced features when users need them, instead of cramming everything in at once.
- PromptAI codingWhat you send to the AI, including the request, background info, and requirements. The clearer and more specific it is, the closer the output gets to what you expect.
- Prompt InjectionAI codingAn attacker hides instructions inside user input or web content to make the model ignore its rules, leak the system prompt, or take dangerous actions.
- PropsFrontend engineeringData a parent component passes to a child component, like passing arguments to a function. The child reads it but doesn't change it, and uses it to decide what to show.
R terms
- Rate LimitAI codingThe service limits how many requests you can send or how many tokens you can use in a period of time. Go over and it temporarily turns you away, usually with a 429 error code.
- RefactoringAI codingChanging how code is structured and written without changing what it does or how it looks, so it's clearer and easier to maintain and build on.
- Responsive DesignStyling & CSSThe same page adjusts its layout automatically to the screen width, so it can be viewed and used properly on phones, tablets, and computers.
- Retrieval-Augmented GenerationAI codingFirst search a knowledge base for content related to the question, then put it in the prompt for the model to use. This cuts down on made-up answers and lets the model use up-to-date or private material.
- RouterFrontend engineeringThe rules that decide which URL shows which page. It switches between pages and keeps the browser's address bar in sync.
- Rules FileAI codingLong-term agreements that live in your project and are given to the AI automatically in every conversation, like the tech stack, code style, and things not to do.
S terms
- Sandboxed ExecutionAI codingRun AI-generated code or commands in an isolated environment with limited network, filesystem, and secret access to reduce accidents and supply-chain risk.
- Screenshot to CodeAI codingSend the AI a design or a screenshot of a web page, and it picks out the layout and components and generates frontend code that looks similar.
- Server-Sent EventsFrontend engineeringThe server pushes text events over one long-lived HTTP response; the browser listens with EventSource—great for one-way streams.
- Server-Side RenderingFrontend engineeringEach time someone visits, the server builds the page's full HTML first and then sends it to the browser. The first screen shows up fast, and search engines can index it easily.
- Single Page ApplicationFrontend engineeringA kind of website that loads the page shell once. After that, JavaScript in the browser handles every page switch without a full reload.
- Source MapFrontend engineeringMap minified, bundled code back to original source lines so production stack traces and local debugging stay readable.
- Spec-Driven DevelopmentAI codingFirst write the requirements, design, and task list into a document together with the AI. Once you approve it, build it item by item from the list.
- StateFrontend engineeringData a component keeps track of itself that changes as the user interacts. When state changes, the matching part of the page re-renders automatically.
- Static Site GenerationFrontend engineeringEvery page is generated as an HTML file ahead of time, at build time. Visitors get the ready-made file directly, so it's fast and simple to deploy.
- StickyInteractionsAn element stays pinned once it scrolls to the top edge, like a navbar, a table header, or a section heading that stops at the top while you scroll.
- StreamingAI codingSend tokens to the UI as soon as they are generated so people can start reading before the full answer is done.
- Structured OutputAI codingRequire the model to return a agreed JSON/Schema so programs can parse it directly instead of scraping free-form text.
- System PromptAI codingUnderlying instructions given to the model before the conversation starts. They set its role, behavior, and rules, and usually take priority over normal messages.
T terms
- Tailwind CSSStyling & CSSA utility-first CSS framework. You style things by writing short class names like flex, p-4, and text-lg right in the class attribute.
- TemperatureAI codingA setting that controls how random the model's output is. Low values give steadier, more conservative answers. High values give more varied, creative ones, but they're also more likely to go off track.
- ThrottleInteractionsWhen an event fires over and over, run it at a fixed interval, like at most once every 200ms. Used for high-frequency events like scrolling and dragging.
- TokenAI codingThe smallest unit a large model reads and writes. How much the model can read and how much a call costs are both counted in tokens.
- Tool CallingAI codingWhile answering, the model asks to use external tools, like reading files, running commands, or searching the web, then keeps working based on what the tools return.
- TransitionInteractionsWhen an element changes state, its color, position, size, and other properties change smoothly over a short time instead of jumping instantly.
- Tree ShakingFrontend engineeringDuring bundling, drop exports that nothing references so the final artifact is smaller—needs statically analyzable ES modules.
- TypeScriptFrontend engineeringJavaScript with type annotations added. It catches a lot of typos and data shape mistakes before the code even runs.
- TypographyStyling & CSSPlanning the font, size, weight, line height, spacing, and color of text as a whole, so content is clear, easy to read, and has an obvious order of importance.
U terms
V terms
- v0AI codingAn AI UI generator from Vercel. Describe what you want in words or upload a screenshot, and it generates React pages and component code you can preview.
- Vibe CodingAI codingA way of building software where you describe what you want in plain language, AI writes most of the code, and your job is mainly to ask, check the result, and give feedback.
- Visual HierarchyStyling & CSSUsing size, weight, color, position, and whitespace to separate main info from secondary info, so users see at a glance what to look at first, what next, and where to click.
W terms
- WebSocketFrontend engineeringA long-lived browser-server connection where either side can push messages—useful for cursors, live notifications, and games.
- WhitespaceStyling & CSSEmpty space deliberately left on a page to separate content and highlight what matters, so the interface feels uncluttered and is easier to read.