185 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
17Input
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.
Navigation
10Navbar
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.
Data display
12Table
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.
Feedback
10Tooltip
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.
Layout containers
02Marketing
0103Dictionary
Concepts
Common words from interactions, styling, frontend engineering, and AI coding, sorted A–Z.
103 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.
- 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.
C terms
- 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.
- 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.
- Claude CodeAI codingA coding agent from Anthropic that mainly runs in the terminal. It can understand the whole project, edit files, and run commands.
- 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.
- 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 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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-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.
- 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.
- 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.
- 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.