The terms designers and developers use — with a mini-diagram, a short definition and a tip. Press “/” to search.
Also called:headerхедершапка сайта
The header is the first thing a visitor sees on any page: the logo, navigation, a phone number or a "Request a call" button. It repeats across the site and tells people where they are and where they can go. A common mistake is cramming in a dozen links and two phone numbers — keep the main sections and one primary action.
Also called:heroхироглавный баннерпервый экран
The hero is the shop window of a page: within seconds it should explain what you offer, to whom, and why it matters. It usually holds a headline, a short explanation, a button and a visual — a photo, video or illustration. A headline about the customer's benefit works better than the company name or a generic slogan.
Also called:above the foldдо сгибаATFпервый экран
The term comes from newspapers, where the key stories were printed above the fold. On the web the line depends on the screen — it differs between a laptop and a phone — so check the first screen at several sizes. It should fit the essence of the offer and a way to take the next step; there is no need to cram everything in, because people happily scroll once the opening hooks them.
Also called:sectionблоксекцияэкран
A long page is built from sections like bricks, each answering one visitor question. A good section has a heading, one clear idea and, where possible, a next step. The order of sections is the script of a conversation with the customer: first "what is it", then "why you", then "how much" and "how to get in touch".
Related:ContainerLanding pageGrid
Also called:containerобёрткаwrappermax-width
On a wide monitor, full-width lines of text are hard to read, so content sits in a container with a maximum width, centred on the screen. The section background can still stretch edge to edge. Using the same container width on every page is an easy way to make a site look tidy.
Related:GridSectionResponsive design
Also called:gridмодульная сеткаколонкиlayout grid
The grid is the skeleton of a layout — for example, 12 columns on desktop, 8 on tablet and 4 on mobile. When cards, text and images sit on shared lines, a page looks calm and professional even without elaborate decoration. In code, grids are usually built with CSS Grid or Flexbox.
Related:ContainerBreakpointBento grid
Also called:footerфутерподвал
People reach the footer when they have read the whole page and want a next step, or need something specific: an address, company details, the privacy policy. Repeated navigation and contacts belong here. Don't hide your only contact option in the footer — it should appear higher up too.
Also called:sidebarсайдбарбоковое менюбоковая колонка
In online stores the sidebar holds filters; in dashboards and admin panels, the main menu; in documentation, the table of contents. There is no room for a side column on a phone, so it moves into a slide-out panel or above the content. Before adding a sidebar to a regular site, check that it doesn't distract from the main message.
Also called:sticky headerфиксированная шапкаприлипающее менюfixed header
A sticky header keeps the menu and contact button within reach, which helps on long pages. The cost is screen space, especially on phones, so it is often made slimmer, or hidden while scrolling down and shown again on scrolling up. In CSS this is position: sticky or fixed.
Also called:landing pageлендингодностраничникпосадочная страница
A landing page walks the visitor through one story — from problem to solution to request — without detours into other sections. Ads usually point to it, so it must pick up exactly where the ad's promise left off. It suits launching a service or testing demand; a company with a wide range of offerings needs a full multi-page site.
Related:Hero sectionCall to action (CTA)MVP (Minimum Viable Product)
Also called:navbarнавбарменюнавигация
The menu is a one-line map of the site. Link labels should use the customer's words, not internal jargon: "Prices" is clearer than "Tariff policy". Highlight the current section so people know where they are, and keep the number of items small.
Related:HeaderHamburger menuMega menu
Also called:burgerhamburger menuбургергамбургер
The burger saves space on small screens: the menu opens over the page or slides in from the side. The downside is that people notice hidden items less often. So keep the key action — "Call" or "Book" — visible next to the burger, and on desktop show the full menu whenever possible.
Related:Navigation barDrawerTab bar
Also called:mega menuмегаменюбольшое выпадающее меню
A mega menu helps catalogues and large sites where a section has dozens of subsections: everything is visible at once, with no multi-level dropdowns. Group items by meaning and give each group a heading. On mobile it turns into an expandable list, so plan the structure for both versions.
Related:Navigation barHamburger menu
Also called:breadcrumbsкрошкицепочка навигации
Breadcrumbs let people go up a level in one click and are especially useful in catalogues, blogs and help sections. The last item is the current page and is not a link. Search engines can show breadcrumbs in results when the page has the matching markup — a small bonus for SEO.
Related:Navigation barSEO
Also called:tabsтабывкладки
Tabs fit when the options are equal and the person needs just one: "Personal / Business", "Description / Specs / Reviews". The active tab must clearly stand out. Don't put things people need to compare into separate tabs — flipping back and forth is tiring.
Also called:paginationпостраничная навигациялисталка
Pagination splits a big list into parts and gives a sense of scale: how many there are and where you are now. Alternatives are a "Load more" button and infinite scroll; the latter suits feeds but makes it hard to reach the footer or return to an item you found. For catalogues, pagination remains the most predictable option.
Related:CardSearch bar
Also called:anchor linksякоряякорные ссылкиоглавление
Anchor navigation is the table of contents for a long page: a landing page, an article, documentation. A good one highlights the section currently on screen and stays pinned to the side or top. Make sure section headings don't end up hidden under a sticky header after the jump — that's what scroll-margin is for.
Related:SectionSticky headerSidebar
Also called:tab barbottom navigationнижнее менютаб-бар
The tab bar is the backbone of navigation in most mobile apps: the main sections are always within thumb reach. Label the icons with words — not everyone can guess what an icon alone means. More than five items won't fit; the rest go into a "More" section or the profile.
Also called:search barпоискпоисковая строкаsearch field
For a store or a knowledge base, search is often the shortest path to the goal. Good search forgives typos, suggests options as you type and never leaves a blank screen when nothing is found — offer popular queries or categories instead. A small business-card site usually doesn't need search at all.
Related:Input fieldEmpty stateChips
Also called:CTAcall to actionцелевая кнопкапризыв
The CTA is the main verb of a page. It should be prominent, say exactly what happens after the click, and repeat at key points on a long page. A common mistake is several equally bright buttons side by side, leaving people unsure which matters. One primary button; the rest should look secondary.
Related:Hero sectionBannerPricing table
Also called:cardкарточкаплиткатайл
Cards suit sets of similar items: products, articles, team members, plans. Within one grid they need a shared structure — the same order of elements and alignment — or the page looks messy. If a card is clickable, make the whole card clickable, not just a small link at the bottom.
Related:GridBento gridGallery
Also called:bentobento gridбентомозаика
A bento grid shows several benefits or features at once, with the most important one getting the biggest cell. It's a way to set a hierarchy without long text. Keep the mosaic from turning into chaos: cells should follow a shared grid and collapse neatly into one column on mobile.
Related:GridCardFeatures section
Also called:featuresпреимуществафичипочему мы
A strong features section talks about the customer's outcome, not the company's traits: "We call back within 15 minutes" beats "An individual approach". Three to six points are usually enough. If a benefit can be backed by a number, a fact or an example, add it.
Related:Bento gridStatsSocial proof
Also called:social proofотзывысоцдоказательствоtrust signals
People decide more readily when they see others' experience. Specific reviews with a name, a photo and details of the situation work best, along with links to independent review platforms and real case studies with results. Faceless "All great, thanks!" quotes without an author tend to breed suspicion.
Related:Logo stripStatsFeatures section
Also called:logo striplogo cloudнам доверяютклиенты
A logo strip works when the brands are recognisable to your audience. Logos are usually brought to one tone — monochrome or muted — so the row doesn't look busy or compete with the main design. Show only companies you have actually worked with, ideally with their permission.
Related:Social proofCarousel
Also called:pricingтарифыпрайссравнение тарифов
A pricing table lets people choose without calling a manager. There are usually 2–4 plans, with the recommended one highlighted by colour and a "Popular" label. Differences between plans should be obvious at a glance, and each column needs its own button. Hidden fees that surface after the request hurt trust more than a high price does.
Related:Call to action (CTA)TabsFAQ
Also called:FAQчастые вопросыаккордеонвопрос-ответ
An FAQ handles objections before they turn into a "no": timing, payment, guarantees, delivery. It's usually built as an accordion — questions visible at once, answers expanding on click. Take the questions from real conversations with customers. Bonus: with the right markup, search engines read an FAQ well.
Related:SEOPricing table
Also called:statsцифрысчётчикиnumbers
Numbers are read faster than words and remembered better. They should be true, verifiable and clear without explanation: "12 years in business" or "3 locations" beats "95% happy customers" with no source. Three or four numbers in a row are enough; an animated counter looks nice but doesn't replace meaning.
Related:Features sectionSocial proof
Also called:stepsкак мы работаемпроцессtimeline
A steps block reduces anxiety: people see what happens after they get in touch and what will be needed from them. Usually it's 3–5 steps with a short explanation, and the first step has a clear action. If a step has a timeframe or a deliverable, state it.
Also called:carouselsliderслайдеркарусель
A carousel saves space, but anything past the first slide gets noticeably fewer views — so don't hide important content there. Autoplay is best turned off, or kept slow with a pause on hover. Good uses are reviews, photos of work, and rows of similar cards that are easy to swipe through.
Related:GalleryLogo stripCard
Also called:galleryгалереяпортфолиоlightbox
A gallery is the key argument in niches where results are visible: renovation, salons, cafés, events. The full-size view (lightbox) should support swiping and close with an obvious cross. Compress images and lazy-load them as people scroll, or the gallery becomes the slowest part of the site.
Related:CarouselBefore and afterCDN
Also called:before/afterдо/послеcomparison sliderсравнение
This format is ideal for services with visible results: cosmetology, renovation, cleaning, photo retouching. Both shots must be taken from the same angle and in the same light, or the comparison looks suspicious. The slider should be easy to drag with a finger on a phone.
Related:GallerySocial proof
Also called:bannerбаннерплашкаannouncement bar
A banner draws attention to something temporary or urgent: a discount, a new location, changed opening hours. It should be short, with one action, and a strip above the header should be dismissible. When there are too many banners, eyes stop noticing them — an effect known as "banner blindness".
Also called:inputинпутполеtext field
The input field is the basic brick of any form. It needs a visible label (not just placeholder text that disappears as you type), a clear format and the right keyboard on mobile: numeric for phone numbers, one with "@" for e-mail. The fewer fields a form has, the more willingly people fill it in.
Also called:selectdropdownдропдаунвыпадашка
A dropdown works well when there are many options and little space: city, country, service. If there are only two to four options, show them all at once with radio buttons or chips. For long lists, add search inside the dropdown.
Related:Radio buttonChipsInput field
Also called:checkboxчекбоксфлажокгалочка
Checkboxes are used when several items can be chosen at once, or for a single consent — for example, to data processing. The label should be clickable too, not just the tiny square. Don't pre-tick consent to a newsletter: it annoys people, and many countries' laws require explicit consent.
Also called:radioрадиорадиокнопкаradio group
The name comes from the buttons on old radios: press one and the others pop out. Radio buttons show every option at once, so they suit 2–5 choices, such as a delivery or payment method. With more options, switch to a dropdown.
Related:CheckboxSelect (dropdown)Chips
Also called:toggleswitchтумблерсвитч
A toggle is an electronic light switch: notifications, dark mode, auto-renewal. The key rule is that the effect is immediate; if changes only apply after submitting a form, a checkbox is the honest choice. The "on" state should be readable not just by colour but by the knob's position.
Related:CheckboxRadio button
Also called:stepperwizardмастерmulti-step form
A multi-step form makes a big questionnaire manageable: a few questions per screen, with "Step 2 of 4" at the top. Start with the easiest questions and ask for contact details near the end, once the person is engaged. Always let people go back without losing what they entered.
Also called:date pickerкалендарьдатапикерcalendar
A calendar is essential for appointments, bookings and deliveries. Unavailable days should be shown as disabled up front, not rejected with an error after selection. For a date of birth, though, a calendar is awkward — typing it in or picking from three lists is faster.
Also called:chipsтегиpillsфильтры-метки
Chips are handy for quickly toggling several parameters: "Vegan", "Delivery", "Open now". A selected chip must look clearly different, and deselecting should be as easy as selecting. On mobile, a row of chips is often scrolled horizontally.
Related:CheckboxBadgeSearch bar
Also called:validationвалидацияпроверка полейошибки формы
Validation catches mistakes before submission: an incomplete phone number, an e-mail without "@", an empty required field. The message belongs next to the field and should explain how to fix it, not just say "Error". Check a field once the person has finished typing, not on every keystroke — and never wipe what they've already entered.
Related:Input fieldError stateCheckbox
Also called:file uploadзагрузкаdrag and dropаплоад
A good upload area states the accepted formats and sizes up front, shows progress and previews what was uploaded. On a phone it should open the camera or photo library. If a file is rejected, explain why — "Larger than 10 MB", not "Upload error".
Also called:modalмодалкапопапdialog
Modals suit short actions: confirming a deletion, submitting a request, viewing details. They must be easy to close — with a cross, the Esc key and a click on the backdrop. Nothing annoys more than a subscription pop-up in the first seconds of a visit: let people get to know the site first.
Also called:drawerшторкаoff-canvasbottom sheet
A drawer keeps context: the page stays visible while what you need is at hand. It's used for mobile menus, carts and catalogue filters; on phones it often slides up from the bottom (a bottom sheet). Like a modal, it needs an obvious way to close.
Related:ModalHamburger menuSidebar
Also called:toastтостsnackbarснекбар
A toast confirms an action without getting in the way: "Added to cart", "Link copied". The name comes from toast popping out of a toaster. Important errors don't belong in toasts — they vanish before people can read them. A good practice is an "Undo" button right inside the notification.
Related:ModalBadgeError state
Also called:tooltipтултипхинтhint
Tooltips explain icons, terms and form fields without cluttering the interface. Don't hide critical information in a tooltip: there is no hover on a phone, so people may never see it. Keep the text to one or two short sentences.
Related:BadgeInput field
Also called:skeletonскелетонskeleton loaderзаглушка загрузки
A skeleton shows the shape of the coming page — where the image and headline will be — so waiting feels calmer than a blank screen or a lone spinner. The blocks usually shimmer softly to signal loading. Skeleton sizes should match the real content, or the page will jump when the data arrives.
Also called:spinnerloaderлоадеркрутилка
A spinner fits short waits: submitting a form, loading a small block. For longer processes, show a progress bar or a skeleton so people know how much is left. A spinner on the submit button also guards against double clicks.
Related:Skeleton screenProgress bar
Also called:progress barпрогресс-барполоса загрузки
A progress bar answers "how much longer?" — when uploading a file, filling in a questionnaire or reading a long article. It must move honestly: a bar stuck at 99% is more irritating than a spinner. In multi-step forms it's paired with a "Step 2 of 4" label.
Also called:empty stateпустой экраннет данныхzero state
An empty state isn't a dead end but a hint at what to do next: "Your cart is empty — see this week's bestsellers", "Nothing found — try another query". Add a clear illustration and a next-step button. A bare "No data" leaves people lost.
Also called:error stateошибка404сбой
Errors happen everywhere; what matters is how they're communicated. A good message says in plain language what happened, doesn't blame the user and offers a way out: retry, go to the home page, contact support. A 404 page is an error state too and deserves the same care.
Also called:badgeбейджметкасчётчик
Badges draw attention to a status or a count: new messages, items in the cart, a promotion. They work while they're rare — a badge on every card stops standing out. Keep the text to one or two words and the colour high-contrast.
Related:ChipsToast notificationCard
Also called:easingtiming functionease-in / ease-outcubic-bezier
Easing (a timing function in CSS) describes not the speed as such but how it changes over time: ease-in accelerates, ease-out decelerates towards the end, linear keeps an even pace, and cubic-bezier lets you define your own curve. The curve is what separates lively motion from mechanical: real objects don't start or stop instantly. Elements entering the screen usually get ease-out — quick to start, soft to land; linear suits little more than a spinning loader.
Also called:durationдлительностьтаймингanimation-duration
An animation that's too short goes unnoticed; one that's too long makes people wait and grates on every repeat. Feedback on a press or a state change usually needs 100–300 ms, while larger moves — opening a panel, switching screens — take a little longer. Rule of thumb: the bigger the element and the distance, the longer the motion, and anything people see dozens of times a day should be quick.
Also called:keyframes@keyframesкейфреймыключи
The term comes from traditional animation: the lead artist drew the key poses and assistants filled in the frames between them. On the web the browser computes the in-betweens: in CSS, keyframes are declared with the @keyframes rule in percentages of the duration, and in JavaScript via the Web Animations API or libraries. Unlike a simple transition, keyframes can describe multi-step or endlessly looping motion.
Related:TransitionEasingLottie animation
Also called:transitionCSS-переходтвинtween
A transition is the simplest kind of CSS animation: you describe two states — say, a normal button and a hovered one — and state which properties change smoothly, over what duration and along which curve. The browser works out the values in between. A common mistake is transition: all — everything animates, including things that should change instantly, and performance suffers; list the properties you need explicitly.
Related:Hover stateDurationKeyframes
Also called:micro-interactionмикровзаимодействиемикроанимацияfeedback animation
A micro-interaction confirms that an action registered: a tap, an add-to-cart, a form submission. A good one is brief, doesn't block the next step and communicates something — a status, a result, an error. Decoration for its own sake gets tiresome fast, so for each one ask: what does this motion tell the person?
Also called:hoverховернаведение:hover
Hover hints that an element is clickable before it's pressed: a button darkens, a card lifts, a link gets underlined. But touch screens have no cursor and therefore no hover, so nothing important may hide behind it — labels, menus and buttons must be visible without it. In CSS you can apply hover effects only on pointer devices with the (hover: hover) media query.
Also called:scroll revealreveal on scrollанимация появленияfade-in on scroll
Scroll reveal gives a page rhythm and steers the eye to each new block. Technically the browser reports that an element has entered the viewport (Intersection Observer), and that triggers the animation — usually a short rise and fade-in. Don't overdo it: if text appears too slowly or too late, fast scrollers see empty gaps, and the content must stay accessible without the animation.
Also called:staggerкаскадная анимацияпоочерёдное появлениелесенка
Staggering turns a group's entrance into one connected movement and hints at the reading order: cards, menu items or table rows arrive in a wave. The delay between items is usually small — tens of milliseconds; but multiply it by twenty cards and the last one waits far too long. So cap the total length of the cascade and show the remaining items straight away.
Related:Scroll revealKeyframesCard
Also called:parallaxпараллакс-эффектparallax scrollingслои
Parallax mimics the view from a train window: nearby objects rush past while distant ones drift slowly. Sites use it for atmospheric hero sections and visual storytelling. Strong parallax can make some people dizzy or nauseous, so keep it subtle and turn it off when the "Reduce motion" setting is on; on phones it also tends to stutter.
Also called:scroll-driven animationsscroll timelinescroll-linkedанимация на скролле
Unlike a scroll reveal, which only fires at the right moment, here the scroll position itself becomes the timeline: every point on the page maps to its own frame. It powers reading-progress bars, rotating products and diagrams that assemble as you scroll. Many browsers can already do this in CSS — the animation-timeline property with scroll() or view(), no heavy JavaScript; where support is missing, you need a fallback.
Also called:scrub videovideo scrubbingскрабвидео на скролле
Scrolling controls the video's current frame, so people set the pace of the story themselves — a common way to show a device, a product taken apart or the interior of a café. For smooth scrubbing the video is encoded with frequent codec keyframes, otherwise it stutters when going backwards; sometimes an image sequence on a canvas replaces the video. Keep the file light and provide a still frame for low-end phones and the "Reduce motion" setting.
Also called:page transitionView Transitionsshared element transitionпереход экранов
Instead of an abrupt switch, the old page gives way smoothly to the new one, and a shared element — say, a product photo from a card — flies to its place on the product page (a shared element transition). People keep their bearings: they see where they came from and where they landed. Browsers offer the View Transitions API for this; keep the transition itself short so navigation never feels slow.
Related:TransitionDurationCard
Also called:springspring physicsпружинкаbounce
A spring is defined not by a duration and a curve but by physical parameters: stiffness, damping and mass. A stiff spring snaps, a soft one flows, and low damping produces a visible overshoot and a few oscillations around the target — fine for playful interfaces, not for a banking app. The big advantage of springs is a natural response to interruption: if someone grabs an element mid-way, motion continues from its current velocity without a jolt.
Related:EasingMicro-interactionDuration
Also called:LottieBodymovinJSON-анимациялотти
Lottie is an open format and library: a designer builds an animation in After Effects, exports it to JSON with the Bodymovin plugin, and a player on the site or in the app renders it as vectors. It stays sharp at any size, usually weighs less than video and can be controlled by code — paused, or played on hover or scroll. Lottie suits illustrations, icons and empty states; photorealistic scenes and complex effects are still better served as video.
Also called:prefers-reduced-motionreduce motionуменьшить движениеmotion sensitivity
iOS, Android, Windows and macOS have a setting that asks apps to move less: for people with vestibular disorders, large shifts, parallax and zooming can cause dizziness. A site detects it with the prefers-reduced-motion: reduce media query. That's no reason to strip every animation: replace movement and parallax with a gentle fade or an instant change, and make sure the interface still makes sense without motion.
Also called:FPSframe ratejankрывки
At 60 frames per second the browser has about 16 ms per frame (half that on 120 Hz screens); miss it and a frame is dropped, so the animation stutters — that's jank. The cheapest properties to animate are transform and opacity: they're usually handled by the GPU without recalculating the page layout. Animating width, height, top or margin forces the browser to redo layout and repaint on every frame — a common cause of stutter on low-end phones.
Also called:componentкомпонентUI componentReact component
In React and Vue an interface is assembled from components like a construction set: each one owns its piece of markup, styles and behaviour. In React a component is a function with a capitalised name that returns JSX markup. A good component does one thing and receives everything it needs through props, which makes it easy to reuse and test.
Also called:propsпропсысвойства компонентаproperties
Props configure a component from the outside, like arguments to a function: the same card shows different products because it receives different data. A component reads its props but never changes them — if a value has to change, it's state, held by the component itself or by its parent. When props have to be threaded through many levels, context or a rethink of the component structure helps.
Also called:stateстейтсостояние компонентаuseState
State is a component's memory: the text typed in, whether a list is open, how many items are in the cart. In React it's declared with the useState hook and changed only through its setter function — React then re-renders the component with the new value. Keep state minimal: anything you can compute from props or other data should be computed during rendering, not duplicated.
Also called:hookхукReact HooksuseEffect
Hooks give a function component memory and a link to the outside world: useState holds state, useEffect syncs the component with a timer, a subscription or the network, useContext reads context. The key rule is to call Hooks only at the top level of a component or your own Hook — never inside conditions, loops or event handlers — because React tells them apart by call order. Repeated logic goes into a custom Hook: an ordinary function whose name starts with use.
Also called:SPAsingle-page applicationSPA-приложениеclient-side rendering
In an SPA the browser receives a single HTML document plus JavaScript, then redraws screens itself and fetches only data — navigation feels as quick as a mobile app. The cost is a heavy first load and a blank page until the scripts arrive, and such sites are harder for search engines to index. So sites that need to be found in search usually suit server-side rendering better, while a pure SPA is fine for dashboards and admin panels.
Also called:routingроутингроутерrouter
A router matches an address such as /blog/how-to-choose-a-domain to what should be shown and extracts parameters from it — the article's slug, for instance. Many frameworks define routes with folders and files: in the Next.js App Router a route is a folder inside app/ with a page.tsx file, and a folder in square brackets, [slug], makes it dynamic. Plan your URLs early: clear, stable addresses help SEO, and when the structure changes, old addresses should redirect to new ones.
Related:Single-page application (SPA)Server-side rendering (SSR)SEO
Also called:SSRserver-side renderingсерверный рендерингрендеринг на сервере
With SSR the server runs the component code, fills in fresh data and sends the browser finished markup: content is visible before any JavaScript loads, and search engines get a complete page. Scripts then make it interactive — that's hydration. SSR fits data that depends on the request or changes often: prices, stock, a personal account; if a page is the same for everyone, it's cheaper to build it ahead of time (SSG).
Also called:SSGstatic site generationстатическая генерацияpre-rendering
With SSG the work happens once — at build time: every page becomes an HTML file that a CDN serves instantly with no load on a server. It's a great fit for blogs, documentation and business-card sites. The downside is that updating content means rebuilding the page; many frameworks can do this selectively without rebuilding the whole site.
Also called:hydrationгидратацияhydratehydration mismatch
The server has sent finished markup, but the buttons don't respond yet: React in the browser rebuilds the component tree, matches it to the existing HTML and attaches event handlers — that's hydration. If the server and browser output differ — because of the current time, a random number or a window check — React reports a hydration mismatch. The less code there is to hydrate, the faster the page responds, which is why non-interactive parts stay on the server.
Also called:bundlerбандлерсборщикVite / webpack
Developers write code in hundreds of modules, in TypeScript and JSX, while the browser is better off with a few compact files. A bundler — Vite, webpack, Turbopack, esbuild — resolves imports, turns the code into JavaScript the browser understands, drops unused code (tree shaking), minifies the result and splits it into chunks loaded on demand. In development it also refreshes the page whenever you save a file.
Related:FrontendCore Web VitalsSingle-page application (SPA)
Also called:utility-firstTailwind CSSatomic CSSклассы-утилиты
Instead of inventing names like .card__title and writing a separate CSS file, each class does one thing — sets padding, a colour or a font size — and an element is assembled from them right in the markup. The best-known example is Tailwind CSS: it scans the project files and generates CSS only for the classes that actually appear. Long sets of classes aren't copied around but moved into a component, so each design decision lives in one place.
Related:ComponentDesign systemBundler
Also called:endpointэндпоинтручкамаршрут API
An API is made of endpoints: each is an "HTTP method + path" pair with a defined input and response. GET /api/orders/42 returns an order, POST /api/orders creates one, DELETE /api/orders/42 removes it. A good endpoint validates input and permissions, answers with the right HTTP status — 200, 201, 400, 404 — and is documented, for example in an OpenAPI specification.
Related:APIREST APIMiddleware
Also called:RESTRESTfulREST APIресурсы
In REST every object — an order, a product, a customer — is a resource with its own URL, and the HTTP method says what to do with it: GET reads, POST creates, PUT and PATCH change, DELETE removes. The server keeps no conversation state between requests: each request carries everything needed, including the access token. Because it's plain HTTP, REST responses are easy to cache in the browser and on a CDN, and errors show up in the status code.
Also called:GraphQLGQLquery / mutationсхема GraphQL
A GraphQL server describes its data with a typed schema, and the client sends one address a request listing the fields — say, an order with the customer's name and line items — and gets it all in one response. Reads are called queries, changes are mutations. The price of flexibility: caching is harder than with REST, errors arrive in the response body, and the server must limit query depth and cost.
Also called:webhookвебхукcallback URLHTTP-колбэк
Instead of asking the payment provider every minute "has it been paid?", you give it an address and it sends a POST request itself when the event happens. A reliable receiver verifies the request's signature, quickly replies with a 2xx status and moves heavy processing to the background. Services retry delivery after failures, so the same event can arrive twice — the handler must be idempotent.
Related:IdempotencyJob queueAPI
Also called:middlewareмидлварпромежуточное ПОinterceptor
Middleware forms a chain: a request passes through each piece in turn, and each one can add something, check something or stop the request — for example, answering 401 straight away if the user isn't signed in. Shared concerns — logging, CORS, body parsing, rate limits — are written once instead of in every endpoint. Order matters: the access check must run before the handler that returns the data.
Related:EndpointRate limitingSession
Also called:ORMobject-relational mappingPrisma / Drizzleмодели данных
An ORM (object-relational mapping) links models in code to tables in a relational database: instead of SQL you write something like prisma.order.findMany(), and the library builds the query and returns typed objects. It speeds up routine operations and saves you from typos in column names. But it doesn't replace knowing SQL: watch out for the N+1 problem, where a list of a hundred records triggers a hundred and one queries instead of one or two.
Related:Database migrationSQLDatabase
Also called:migrationмиграцияschema migrationмиграция схемы
Migrations are the version history of a database schema: each change is a separate file kept in Git and applied the same way on a developer's laptop, a test server and production. The tool remembers which migrations have already run and applies only new ones. Risky changes — renaming or dropping a column that holds data — are done in several steps and tested on a copy of the database first.
Also called:JWTJSON Web Tokenaccess tokenbearer token
A signed JWT has three dot-separated parts: a header, a payload — who the user is and when the token expires — and a signature. The signature stops anyone tampering with the contents but doesn't hide them: anyone can read the payload, so no secrets go in it. A JWT is hard to revoke before it expires, so access tokens are kept short-lived and a refresh token is used to extend the session.
Related:SessionOAuth 2.0Middleware
Also called:sessionсессияsession cookieсерверная сессия
After checking the password, the server creates a session — a record in the database or a store like Redis — and gives the browser a random ID in a cookie. The cookie comes back with every request, so the server recognises the user. Session cookies are set with HttpOnly (hidden from scripts), Secure (HTTPS only) and SameSite, and signing out simply deletes the record on the server.
Also called:OAuthOAuth 2.0вход через GoogleOpenID Connect
"Sign in with Google" and "Connect your calendar" buttons run on OAuth 2.0: the user approves access on the provider's side, and the app gets a token with limited rights (scope). OAuth itself is about access, not sign-in; sign-in is added on top by OpenID Connect, whose ID token says who logged in. For web and mobile apps the recommended flow today is Authorization Code with PKCE.
Related:JWT (JSON Web Token)SessionAPI
Also called:rate limitrate limitingлимит запросовthrottling
A limit protects an API from overload, password guessing and over-eager integrations — say, no more than 100 requests a minute per key or IP address. A client over the limit gets 429 Too Many Requests, often with a Retry-After header saying when to try again. When you call someone else's API, respect its limits: retry with growing pauses rather than in a tight loop.
Related:MiddlewareAPIJob queue
Also called:queueочередьbackground jobsворкер
Slow work shouldn't happen while the user waits for a response: the API puts a job on a queue and replies at once, and a separate process — a worker — picks it up and runs it. Failed jobs are retried with growing pauses, and those that run out of attempts are set aside for review. A job may run more than once, so the handler is made idempotent: a second run mustn't send a second e-mail.
Related:IdempotencyWebhookRate limiting
Also called:idempotencyидемпотентностьIdempotency-Keyключ идемпотентности
Networks are unreliable: a request may arrive while its response gets lost, and the client will retry. If the operation is idempotent, the retry is safe: in HTTP, GET, PUT and DELETE are idempotent by definition, while POST is not. For payments and orders the client sends an idempotency key — for example in an Idempotency-Key header — and a server that sees the same key returns the earlier result instead of charging twice.
Also called:native appнативное приложениенативSwift / Kotlin
A native app uses the platform's own toolkit — SwiftUI on iOS, Jetpack Compose on Android — and gets full access to its capabilities, including new APIs as soon as they ship. The price is two separate codebases and, usually, two teams. Going native pays off when peak performance, deep device integration or platform-specific features matter.
Related:Cross-platform developmentPWA (Progressive Web App)App store review
Also called:cross-platformкроссплатформаReact Native / Flutterодин код на две платформы
Shared code saves time: screens, logic and tests are written once. React Native uses the React model in JavaScript or TypeScript and renders real native components, while Flutter is written in Dart and draws its interface with its own engine. That's enough for most business apps, and platform-specific features are added through native modules.
Related:Native appExpoFlutter widget
Also called:ExpoEASExpo GoReact Native framework
Expo takes the routine out of React Native: a project starts with one command, the camera, notifications and files are available through ready-made modules, and navigation is built from files with Expo Router. The EAS cloud services build the app — including for iOS without your own Mac — and submit it to the App Store and Google Play. Expo Go is handy for quick trials, but some features, such as push notifications, need your own development build.
Related:Cross-platform developmentOver-the-air update (OTA)Push token
Also called:widgetвиджетStatelessWidget / StatefulWidgetдерево виджетов
In Flutter an interface is a tree of nested widgets: Scaffold provides the screen's frame, Column and Row lay out their children, Padding adds spacing. A widget describes how part of the UI should look given the current data. Data that changes with user actions lives in the State of a StatefulWidget and is updated with setState, so Flutter rebuilds that part of the tree; widgets without mutable data extend StatelessWidget.
Also called:deep linkдиплинкUniversal LinksApp Links
A deep link takes people from an e-mail, an ad or a push notification straight to the right place — an order page, for instance. Ordinary https links that open in an app are called Universal Links on iOS and App Links on Android; the domain's link to the app is verified by a special file on the website. If the app isn't installed, the link opens in the browser, so key screens need a web version too.
Related:RoutingPush tokenNative app
Also called:push tokendevice tokenFCM tokenExpoPushToken
Push notifications are delivered by platform services — the Apple Push Notification service on iOS and Firebase Cloud Messaging on Android. With the user's permission the app obtains a device token and sends it to your server, which then sends messages to that token. Tokens change and go stale, so they're refreshed when the app starts and deleted once the service reports a token as invalid.
Related:ExpoDeep linkNative app
Also called:app reviewревьюмодерацияApp Store / Google Play
Before release, the App Store reviews an app against the App Review Guidelines, and Google Play against its Developer Program Policies. The most common rejections are unfinished builds with placeholders and broken features, apps without a privacy policy, and sign-in screens the reviewer can't get past — provide a demo account. Build review time into the release plan and don't promise a client it will be live "tomorrow for sure".
Also called:OTA updateover-the-airEAS Updateгорячее обновление
In a React Native app part of the code — JavaScript and images — can be updated over the air: on launch the app downloads the new version, for example via EAS Update. It's handy for urgent fixes to copy and logic bugs. Native code can't be updated this way — it needs a new build through the store — and Apple's rules don't allow such updates to change the app's primary purpose.
Also called:SQLсиквелStructured Query LanguageSELECT
SQL describes what you want, not how to find it: SELECT name FROM clients WHERE city = 'Almaty' — and the database chooses how to execute it. The core data commands are SELECT, INSERT, UPDATE and DELETE, while CREATE and ALTER define table structure. The language is standardised, but every database system — PostgreSQL, MySQL, SQLite — has its own extensions and quirks.
Also called:primary keyPKпервичный ключid
A primary key is a record's passport: it's unique, can't be empty (NULL), and a table has only one. It's usually an auto-incrementing number or a UUID unrelated to business data: a customer's phone or e-mail may change, but the id stays the same. Foreign keys in other tables point to the primary key.
Related:Foreign keyIndexDatabase
Also called:foreign keyFKвнешний ключREFERENCES
In an orders table the client_id column holds the customer's id — that's a foreign key. The database enforces integrity: it won't create an order for a customer who doesn't exist, and a declared rule decides what happens to orders when a customer is deleted — block the deletion (RESTRICT), delete them too (CASCADE) or clear the reference (SET NULL). That way relationships are protected by the database itself, not just by application code.
Related:Primary keyJOINNormalization
Also called:indexиндексB-treeCREATE INDEX
An index works like the index at the back of a book: instead of reading every page, the database jumps straight to the rows it needs. It's created for specific queries — on columns used in WHERE conditions, joins and sorting. An index is never free: it takes space and slows down inserts and updates, so its benefit is confirmed with the query plan (EXPLAIN), not guesswork.
Related:SQLPrimary keyCache
Also called:transactionтранзакцияBEGIN / COMMITACID
The classic example is a money transfer: debiting one account and crediting another must happen together, or money vanishes. A transaction starts with BEGIN, and its changes stay invisible to others until COMMIT; on an error or a ROLLBACK the database undoes everything it did. The properties of reliable transactions are summed up as ACID: atomicity, consistency, isolation and durability.
Related:SQLDatabaseIdempotency
Also called:JOINджойнINNER / LEFT JOINсоединение таблиц
Data lives in separate tables but has to be shown together — a JOIN combines rows by a condition, usually along a foreign key: orders.client_id = clients.id. INNER JOIN keeps only rows that found a match, while LEFT JOIN keeps every row of the left table and fills in NULL where there's no match. On large tables the columns in the join condition are usually indexed.
Related:SQLForeign keyNormalization
Also called:normalizationнормализациянормальные формы3NF
If a customer's address is stored in every order, a move means updating a hundred rows — and somewhere the old one will survive. Normalization moves repeated data into separate tables and links them with keys; in practice a schema is usually taken to third normal form. Sometimes data is duplicated on purpose for faster reads (denormalization), but then something has to keep the copies in sync.
Related:Foreign keyJOINPrimary key
Also called:NoSQLнереляционная базаdocument databaseMongoDB
In a document database such as MongoDB an order is stored as one JSON-like document together with its line items, Redis keeps key-value pairs in memory, and graph databases store nodes and the links between them. These models suit data that's read and written as a whole and whose structure changes often. When entities have many relationships and one operation must update several records consistently, a relational database is usually simpler and safer — especially as PostgreSQL can store JSON too.
Also called:replicationрепликациярепликаprimary / replica
The primary server accepts changes and streams them to replicas. If it fails, a replica can be promoted to primary, and while all is well, read queries can go to replicas to take load off the primary. With asynchronous replication a replica may lag slightly, so freshly written data won't appear there instantly. And replication is no substitute for backups: an accidental deletion gets copied too.
Related:DatabaseCacheTransaction
Also called:cacheкэшкешированиеRedis
A cache keeps expensive results close at hand: the output of a heavy database query, an external API response, a rendered page. Redis is a common choice — an in-memory store where each key can have a time to live (TTL). The hard part is evicting stale data in time: when the data changes, the matching key is deleted, or users will see old prices.
Also called:LLMязыковая модельlarge language modelмодель
An LLM takes text and extends it one token at a time with a likely continuation; answering questions, translation, classification and writing code all grow out of that ability. The model doesn't remember past conversations: everything it needs to know is sent with each request. It can be confidently wrong, so in a product its answers are grounded in data and checked by code.
Related:TokenContext windowPrompt
Also called:tokenтокенtokenizationтокенизация
A model sees neither letters nor words but tokens — pieces of text from its vocabulary; a long or rare word may be split into several tokens. How many tokens the same text takes depends on the model and the language. Context size, response length and API cost are all counted in tokens, so get the exact number from the API itself rather than estimating from words.
Also called:context windowконтекстcontext lengthокно контекста
Everything the model "sees" has to fit in the context window: system instructions, the conversation, attached documents, tool results and the response being generated. Nothing outside it exists for the model, so long conversations have to be trimmed or summarised. Even a large window is no reason to stuff everything in: extra text costs money, slows the response and can distract the model from what matters.
Related:TokenLarge language model (LLM)RAG (retrieval-augmented generation)
Also called:promptпромптsystem promptинструкция для модели
A good prompt reads like a brief for a new colleague: why the task matters, what exactly to do, what the constraints are and how to format the result. Standing rules go into the system prompt, and changing data is kept apart from the instructions — with XML tags, for example. A few varied examples usually work better than long explanations, and a prompt's quality is checked on a set of test cases, not one lucky run.
Also called:embeddingэмбеддингвекторное представлениеvector
An embedding turns meaning into coordinates: "how do I return an item" and "start a refund" get nearby vectors even with almost no words in common. The distance between vectors — most often cosine distance — powers semantic search, grouping of reviews and similar-product suggestions. Queries and documents must be encoded with the same model: vectors from different models aren't comparable.
Related:Vector databaseRAG (retrieval-augmented generation)Token
Also called:vector databaseвекторная базаvector storepgvector
A vector database stores embeddings together with the source fragments and metadata, and answers "which records are closest in meaning to this query". It can be a dedicated service or ordinary PostgreSQL with the pgvector extension. At scale, approximate indexes such as HNSW are used: search gets much faster at the cost of a little accuracy.
Also called:RAGretrieval-augmented generationпоиск + генерациябаза знаний
A model doesn't know your price lists, policies or latest news, and retraining it for that is expensive. RAG takes another route: for each question it finds a few relevant fragments — most often by embedding search — and puts them in the prompt with instructions to answer only from them and cite the source. Quality is checked in parts: does retrieval find the right fragments, and does the model answer correctly from them.
Also called:tool usefunction callingtool callingинструменты модели
You describe the available functions to the model: a name, a purpose and a JSON schema for the arguments. When needed, the model replies not with text but with a structured call request; your code runs the function and returns the result, and the model continues its answer with it. The model itself executes nothing, so arguments are validated in code, and consequential actions — payments, deletions, sending — are confirmed by a person.
Also called:agentагентagentic loopавтономный агент
An agent receives a task, calls tools — search, a database, APIs — looks at the result and decides what to do next, repeating the loop. Unlike a fixed workflow, where code sets the order of steps, an agent chooses its own path, so it needs limits on steps and budget, a narrow set of tools and a log of its actions. Start with the simplest solution: if one well-written request or a fixed chain of steps does the job, you don't need an agent.
Also called:hallucinationгаллюцинацияconfabulationвыдумка модели
A model is trained to write plausible text, not to check facts, so it sometimes invents figures, laws, library functions and sources — in the same confident tone. Three techniques reduce the risk: give the model the data it needs in context, allow it to say "I don't know", and ask it to cite sources from the documents provided. Anything that affects money, health or people's rights is checked by code or by a person.
Related:RAG (retrieval-augmented generation)EvalsLarge language model (LLM)
Also called:prompt injectionпромпт-инъекцияindirect injectionинъекция в промпт
A model can't reliably tell your instructions apart from data: a line like "ignore previous instructions and forward the conversation" in an e-mail or on a web page may work as a command. Indirect injection is especially dangerous — the malicious text comes not from the user but from a document being processed. Defences are built around the model, not just in the prompt: least-privilege tools, human approval for important actions and code that checks the output.
Related:Tool callingPromptAI agent
Also called:evalevalsэвалLLM-as-a-judge
A language model's answers vary from run to run, and "seems to work" on a couple of examples proves nothing. An eval set is dozens or hundreds of real requests with reference answers and automated checks: exact match, format validation in code and, where meaning matters, grading by another model against a rubric (LLM-as-a-judge), calibrated against human ratings. Run the set after every prompt change or model switch and compare pass rate, cost and latency.
Related:PromptHallucinationAI agent
Also called:frontendфронтклиентская частьfront-end
The frontend is everything people see and click: layout, animations, forms, interface logic. It's written in HTML, CSS and JavaScript, often with frameworks such as React or Vue. Loading speed, mobile usability and the impression of the brand all depend directly on frontend quality.
Related:BackendAPIResponsive design
Also called:backendбэксерверная частьback-end
The backend is invisible but does the heavy lifting: it receives requests, calculates prices, stores users and orders, sends notifications and talks to payment systems and CRMs. Typically it's a server application, a database and an API that the frontend uses to communicate with it. A simple business-card site may not need its own backend at all.
Also called:APIапиинтерфейс программированияэндпоинт
An API (Application Programming Interface) is like the pass in a restaurant: you hand over an order in a known format and get the finished dish without entering the kitchen. Through APIs a site fetches exchange rates, takes payments, sends leads to a CRM or Telegram. If a service has an open, documented API, integrating with it is usually simpler and more reliable.
Also called:databaseБДбазаDB
A database keeps everything that must survive a page reload and lets you find what you need quickly. The most common kind is relational (PostgreSQL, MySQL), where data lives in linked tables. For a business, backups and access rights are critical: losing the database means losing customers and sales history.
Also called:CMSадминкасистема управления контентомadmin panel
CMS stands for Content Management System. It can be an off-the-shelf platform like WordPress, a headless CMS that serves content via an API, or a custom admin panel built for your tasks. Before choosing, decide what exactly you'll edit yourself and how often — that determines how complex a system you need.
Also called:hostingхостингсерверVPS
Hosting is renting a plot on the internet for your site to stand on. Options include shared hosting (cheap, but resources are shared with neighbours), virtual or dedicated servers, and cloud platforms that scale with load automatically. When choosing, look at speed, uptime, backups and where the servers are physically located.
Related:Domain nameDNSCDN
Also called:domainдоменадрес сайтадоменное имя
A domain is a name people can remember instead of a server's numeric IP address. It's registered through a registrar, usually for a year, and then renewed. Register it in your company's or your own name, not your contractor's, and turn on auto-renewal: an expired domain can be snapped up by someone else.
Related:DNSHostingSSL/TLS certificate
Also called:DNSDomain Name SystemDNS-записиДНС
When you type a site's address, the browser first asks DNS which IP address stands behind it, and only then contacts the server. A domain's DNS records say where the site lives (A record), where to deliver mail (MX) and hold verification data for services (TXT). Record changes don't spread instantly — it can take from a few minutes to a day.
Related:Domain nameHostingCDN
Also called:SSLTLSHTTPSзамочек
A certificate protects the data visitors send to a site — passwords, phone numbers, payment details — from interception. It's still called SSL out of habit, but today connections are encrypted with the TLS protocol, and SSL itself is long obsolete. Browsers flag sites without HTTPS as not secure, and a basic certificate is available for free, for example from Let's Encrypt.
Related:Domain nameHostingSEO
Also called:CDNcontent delivery networkсеть доставки контентаedge
A CDN keeps copies of images, videos, scripts and styles on many servers in different cities and countries. Visitors get files from the nearest server rather than one distant origin, so the site loads faster and copes better with traffic spikes. Many modern hosting platforms include a CDN by default.
Related:HostingCore Web VitalsDNS
Also called:responsiveадаптивадаптивная вёрсткамобильная версия
A responsive site doesn't just shrink: columns, font sizes, menus and block order all change. A large share of visitors arrive on phones, so the mobile version is designed first (mobile first), not "later". Test responsiveness on real devices, not just by resizing a browser window.
Related:BreakpointGridFrontend
Also called:breakpointбрейкпоинтmedia queryконтрольная точка
Breakpoints are set in CSS with media queries: "if the screen is narrower than 768 pixels, show a burger instead of the menu". There are usually several — for phone, tablet and desktop. Good practice is to place a breakpoint where the content starts to break, not to match a specific device model.
Related:Responsive designGridContainer
Also called:CWVвеб-виталиметрики скоростиPageSpeed
LCP (Largest Contentful Paint) measures how fast the main content appears, INP (Interaction to Next Paint) how quickly the page responds to input, and CLS (Cumulative Layout Shift) how much the layout jumps while loading. Good values are LCP under 2.5 s, INP under 200 ms and CLS under 0.1. Google uses these metrics as one of its ranking signals; you can check them in PageSpeed Insights and Search Console.
Related:SEOCDNSkeleton screen
Also called:PWAprogressive web appвеб-приложениеinstallable web app
A PWA opens in the browser but can do more than a regular site: it installs as an icon on the home screen, runs full-screen, can work offline thanks to caching and can send push notifications (with limitations on iOS). It's a way to get much of an app's value without publishing to the App Store or Google Play. For deep access to device features, a native app is still stronger.
Related:Responsive designTab barFrontend
Also called:design systemдизайн-системаDSгайдлайны
A design system covers colours, fonts, spacing, components (buttons, fields, cards) and the rules for using them — in both design files and code. It makes a product consistent and speeds up development: a new screen is assembled from ready-made parts. A small site is fine with a UI kit; a full system pays off in products that several teams develop for years.
Also called:UI kitui-китбиблиотека компонентовкит
A UI kit is the project's construction set: the designer works out each element and its states (default, hover, pressed, error) once, then builds every screen from them. A kit is part of a design system, minus the detailed rules and documentation. Ask your contractor to hand it over with the mockups — it makes future changes much easier.
Related:Design systemCardInput field
Also called:wireframeвайрфреймсхема страницыlo-fi макет
A wireframe is the blueprint of a future interface. It's where structure and logic get agreed while changes are still cheap: moving a rectangle is faster than redoing a finished design. Don't judge a wireframe on looks — check that everything needed is on the page and in the right order.
Also called:prototypeпрототипкликабельный макетинтерактивный макет
A prototype links screens with transitions: you can press a button, open a menu, walk the path from landing to request. It's shown to the team, the client and real users to catch friction before it becomes expensive. A prototype doesn't have to be pretty — it has to be believable in the key scenario.
Also called:MVPэм-ви-пиминимальная версияпервая версия
An MVP lets you test an idea with real people and real money without spending the budget on features that may never be needed. The key word is "viable": a cut-down version that is broken or awkward proves nothing. After launch, you gather feedback and decide what to build next.
Related:PrototypeLanding pageWireframe
Also called:SEOсеопоисковая оптимизацияsearch engine optimization
SEO (Search Engine Optimization) combines a technical part — speed, responsiveness, markup, proper headings — with useful content for real queries and the site's reputation: links and mentions. Results come gradually rather than overnight, but it's a channel that doesn't charge you for every click. No one can honestly guarantee specific search positions.
Related:Core Web VitalsBreadcrumbsFAQ
Tell us about the product or the problem. After reviewing the task we'll come back with an architecture, a timeline and a price for the first version.
