📐 Justify-content и flexbox 📏 Margin и padding 📍 Position в CSS 🌊 Overflow в CSS 🔤 Font-family и шрифты 💻 Frontend и backend 🎨 CSS-переменные var() 🔲 CSS Grid ⚡ JavaScript термины
Tech English · Для начинающих программистов и верстальщиков
Язык программирования на английском: 50 IT-терминов с переводом для начинающих
Английский — главный язык программирования. Команды, атрибуты, свойства, названия технологий — всё это пишется на английском. Без понимания базовых терминов сложно читать документацию, искать ошибки или общаться с коллегами.
В этой статье — 50 ключевых IT-терминов на английском, которые реально встречаются в коде. С транскрипцией, переводом и примерами. Словарь подойдёт для начинающих программистов, верстальщиков и всех, кто изучает технический английский.
Важно: Статья носит образовательный характер. Термины даны с реальными примерами использования в CSS и JavaScript.
1. Justify-content, align-items и flexbox: 13 свойств для гибкой раскладки
1. justify-content
/ˈdʒʌstɪfaɪ kənˈtent/
Перевод: «выравнивание по главной оси»
Пример:
justify-content: center; — выравнивает элементы по центру контейнера.2. display: flex
/dɪˈspleɪ fleks/
Перевод: «включить flex-режим»
Пример:
display: flex; — делает контейнер гибким для выравнивания элементов.3. flex container
/fleks kənˈteɪnər/
Перевод: «flex-контейнер»
Пример: Родительский элемент с
display: flex становится flex-контейнером.4. flex item
/fleks ˈaɪtəm/
Перевод: «flex-элемент»
Пример: Все прямые дочерние элементы внутри flex-контейнера — это flex-элементы.
5. center
/ˈsentər/
Перевод: «центр»
Пример:
justify-content: center; — элементы выстраиваются по центру.6. space-between
/speɪs bɪˈtwiːn/
Перевод: «пространство между»
Пример:
justify-content: space-between; — первый элемент слева, последний справа, остальные равномерно.7. space-around
/speɪs əˈraʊnd/
Перевод: «пространство вокруг»
Пример:
justify-content: space-around; — равные отступы по краям каждого элемента.8. space-evenly
/speɪs ˈiːvənli/
Перевод: «равномерное пространство»
Пример:
justify-content: space-evenly; — все отступы между и по краям одинаковые.9. align-items
/əˈlaɪn ˈaɪtəmz/
Перевод: «выравнивание по поперечной оси»
Пример:
align-items: center; — выравнивает элементы по вертикали (в строке).10. flex-direction
/fleks dəˈrekʃən/
Перевод: «направление flex-оси»
Пример:
flex-direction: column; — элементы выстраиваются вертикально.11. row
/roʊ/
Перевод: «строка» (горизонтальное направление)
Пример:
flex-direction: row; — элементы идут слева направо (значение по умолчанию).12. column
/ˈkɑːləm/
Перевод: «колонка» (вертикальное направление)
Пример:
flex-direction: column; — элементы идут сверху вниз.13. gap
/ɡæp/
Перевод: «расстояние, зазор»
Пример:
gap: 10px; — задаёт расстояние между flex-элементами.2. Margin, padding и border: отступы и границы в CSS
14. margin
/ˈmɑːrdʒɪn/
Перевод: «внешний отступ»
Пример:
margin: 0 auto; — выравнивает блок по центру.15. padding
/ˈpædɪŋ/
Перевод: «внутренний отступ»
Пример:
padding: 12px 14px; — отступы внутри элемента от краёв до контента.16. border
/ˈbɔːrdər/
Перевод: «граница»
Пример:
border: 1px solid #e0d5c0; — рамка вокруг элемента.17. outline
/ˈaʊtlaɪn/
Перевод: «внешний контур»
Пример:
outline: 2px dashed #c8a85d; — контур вокруг элемента (не влияет на размер).3. Position, relative, absolute: позиционирование элементов в CSS
18. position
/pəˈzɪʃən/
Перевод: «позиционирование»
Пример:
position: relative; — задаёт способ расположения элемента.19. relative
/ˈrelətɪv/
Перевод: «относительное»
Пример:
position: relative; — элемент сдвигается относительно своего обычного места.20. absolute
/ˈæbsəluːt/
Перевод: «абсолютное»
Пример:
position: absolute; — элемент вырывается из потока и привязывается к ближайшему relative-родителю.21. fixed
/fɪkst/
Перевод: «фиксированное»
Пример:
position: fixed; — элемент привязан к окну браузера и не двигается при скролле.22. sticky
/ˈstɪki/
Перевод: «липкое»
Пример:
position: sticky; — элемент ведёт себя как relative, пока не достигнет границы, затем фиксируется.23. z-index
/ziː ˈɪndeks/
Перевод: «порядок наложения» (ось Z)
Пример:
z-index: 999; — чем больше число, тем выше элемент перекрывает другие.4. Overflow в CSS: как управлять переполнением контента
24. overflow
/ˌoʊvərˈfloʊ/
Перевод: «переполнение»
Пример:
overflow: auto; — управляет тем, что делать с контентом, который не помещается в блок.25. overflow: hidden
/ˈhɪdən/
Перевод: «скрыть переполнение»
Пример:
overflow: hidden; — всё, что выходит за границы блока, обрезается.26. overflow: auto
/ˈɔːtoʊ/
Перевод: «автоматически (добавить скролл)»
Пример:
overflow: auto; — если контент не помещается, появляется полоса прокрутки.27. overflow: scroll
/skroʊl/
Перевод: «всегда показывать скролл»
Пример:
overflow: scroll; — полосы прокрутки появляются всегда, даже если контент помещается.28. overflow-x
/ˌoʊvərˈfloʊ eks/
Перевод: «переполнение по горизонтали»
Пример:
overflow-x: auto; — горизонтальный скролл, если контент не помещается по ширине.29. overflow-y
/ˌoʊvərˈfloʊ waɪ/
Перевод: «переполнение по вертикали»
Пример:
overflow-y: auto; — вертикальный скролл, если контент не помещается по высоте.5. Font-family, font-weight, text-align: шрифты и текст в CSS
30. font-family
/fɑːnt ˈfæməli/
Перевод: «гарнитура шрифта»
Пример:
font-family: Georgia, "Times New Roman", serif; — список шрифтов по приоритету.31. font-size
/fɑːnt saɪz/
Перевод: «размер шрифта»
Пример:
font-size: 36px; — задаёт высоту символов.32. font-weight
/fɑːnt weɪt/
Перевод: «насыщенность шрифта» (жирность)
Пример:
font-weight: 700; — жирный текст (bold).33. line-height
/laɪn haɪt/
Перевод: «межстрочный интервал»
Пример:
line-height: 1.5; — расстояние между строками текста.34. text-align
/tekst əˈlaɪn/
Перевод: «выравнивание текста»
Пример:
text-align: center; — выравнивает текст по центру.35. letter-spacing
/ˈletər ˈspeɪsɪŋ/
Перевод: «межбуквенный интервал»
Пример:
letter-spacing: 2px; — расстояние между буквами.6. Frontend и backend: что это такое и в чём разница
36. frontend
/ˌfrʌntˈend/
Перевод: «клиентская часть» (то, что видит пользователь)
Пример: HTML, CSS и JavaScript — это технологии frontend.
37. backend
/ˌbækˈend/
Перевод: «серверная часть» (скрытая логика)
Пример: Базы данных, API, авторизация — это backend.
38. fullstack
/ˌfʊlˈstæk/
Перевод: «полный стек» (и frontend, и backend)
Пример: Fullstack-разработчик умеет делать и клиентскую, и серверную часть.
7. CSS-переменные: var() и custom properties
39. var()
/vɑːr/
Перевод: «переменная в CSS»
Пример:
color: var(--sl-gold); — подставляет значение переменной --sl-gold.40. custom property
/ˈkʌstəm ˈprɑːpərti/
Перевод: «пользовательское свойство»
Пример:
--sl-paper: #f5f1e8; — объявление CSS-переменной.8. CSS Grid: grid-template-columns и fr единица измерения
41. display: grid
/dɪˈspleɪ ɡrɪd/
Перевод: «включить сеточную раскладку»
Пример:
display: grid; — контейнер становится сеткой для двухмерной раскладки.42. grid-template-columns
/ɡrɪd ˈtempleɪt ˈkɑːləmz/
Перевод: «шаблон колонок сетки»
Пример:
grid-template-columns: repeat(3, 1fr); — три колонки одинаковой ширины.43. fr
/ef ɑːr/
Перевод: «доля доступного пространства» (fraction)
Пример:
grid-template-columns: 1fr 2fr; — вторая колонка в два раза шире первой.9. JavaScript для начинающих: null, addEventListener, callback и другие термины
44. null
/nʌl/
Перевод: «пустое значение» (объект отсутствует)
Пример:
selectedWord = null; — переменная намеренно очищена.45. undefined
/ˌʌndɪˈfaɪnd/
Перевод: «не определено» (переменная без значения)
Пример: Объявленная переменная, которой не присвоили значение, имеет тип
undefined.46. addEventListener
/æd ˈiːvənt ˈlɪsənər/
Перевод: «добавить обработчик события»
Пример:
btn.addEventListener('click', handler); — назначает действие на клик по кнопке.47. classList
/klæs lɪst/
Перевод: «список классов элемента»
Пример:
classList.add('is-visible'); — добавляет CSS-класс элементу.48. closest()
/ˈkloʊzɪst/
Перевод: «ближайший предок с селектором»
Пример:
e.target.closest('.sl-card'); — ищет родительский элемент с классом sl-card.49. dataset
/ˈdeɪtəset/
Перевод: «доступ к data-атрибутам»
Пример:
box.getAttribute('data-word'); — чтение атрибута data-word="Biology".50. callback
/ˈkɔːlbæk/
Перевод: «функция обратного вызова»
Пример: Функция внутри
addEventListener — это callback, она вызывается при наступлении события.10. Таблица всех 50 IT-терминов для быстрого повторения
| № | Термин | Перевод | Аудио |
|---|---|---|---|
| 1 | justify-content | выравнивание по главной оси | |
| 2 | display: flex | включить flex-режим | |
| 3 | flex container | flex-контейнер | |
| 4 | flex item | flex-элемент | |
| 5 | center | центр | |
| 6 | space-between | пространство между | |
| 7 | space-around | пространство вокруг | |
| 8 | space-evenly | равномерное пространство | |
| 9 | align-items | выравнивание по поперечной оси | |
| 10 | flex-direction | направление flex-оси | |
| 11 | row | строка (горизонтально) | |
| 12 | column | колонка (вертикально) | |
| 13 | gap | расстояние, зазор | |
| 14 | margin | внешний отступ | |
| 15 | padding | внутренний отступ | |
| 16 | border | граница | |
| 17 | outline | внешний контур | |
| 18 | position | позиционирование | |
| 19 | relative | относительное | |
| 20 | absolute | абсолютное | |
| 21 | fixed | фиксированное | |
| 22 | sticky | липкое | |
| 23 | z-index | порядок наложения | |
| 24 | overflow | переполнение | |
| 25 | overflow: hidden | скрыть переполнение | |
| 26 | overflow: auto | автоматический скролл | |
| 27 | overflow: scroll | всегда показывать скролл | |
| 28 | overflow-x | переполнение по горизонтали | |
| 29 | overflow-y | переполнение по вертикали | |
| 30 | font-family | гарнитура шрифта | |
| 31 | font-size | размер шрифта | |
| 32 | font-weight | насыщенность шрифта | |
| 33 | line-height | межстрочный интервал | |
| 34 | text-align | выравнивание текста | |
| 35 | letter-spacing | межбуквенный интервал | |
| 36 | frontend | клиентская часть | |
| 37 | backend | серверная часть | |
| 38 | fullstack | полный стек | |
| 39 | var() | CSS-переменная | |
| 40 | custom property | пользовательское свойство | |
| 41 | display: grid | сеточная раскладка | |
| 42 | grid-template-columns | шаблон колонок сетки | |
| 43 | fr | доля пространства | |
| 44 | null | пустое значение | |
| 45 | undefined | не определено | |
| 46 | addEventListener | добавить обработчик события | |
| 47 | classList | список классов | |
| 48 | closest() | ближайший предок | |
| 49 | dataset | доступ к data-атрибутам | |
| 50 | callback | функция обратного вызова |
11. Часто задаваемые вопросы об IT-терминах на английском
Что такое margin в CSS?
Margin — это внешний отступ элемента. Он создаёт пространство между границей элемента и соседними элементами. Например, margin: 20px; добавит 20 пикселей отступа со всех сторон.
Чем отличается margin от padding?
Margin — отступ снаружи элемента (между элементами). Padding — отступ внутри элемента (между границей и контентом). Margin создаёт расстояние между блоками, padding — увеличивает внутреннее пространство блока.
Что такое justify-content?
Justify-content — это CSS-свойство для выравнивания flex-элементов по главной оси. Основные значения: center (по центру), space-between (первый и последний по краям), space-around (равные отступы вокруг каждого).
Что такое null в JavaScript?
Null — это специальное значение в JavaScript, которое означает «пусто» или «значение отсутствует». Оно используется, когда нужно явно указать, что переменная не содержит объекта.
Как перевести callback на русский?
Callback переводится как «функция обратного вызова». Это функция, которая передаётся в другую функцию и вызывается после завершения какого-либо действия. Например, в addEventListener вторым аргументом передаётся callback-функция.
12. Как эффективно учить технический английский
- Учите термины в контексте — не просто «margin», а
margin: 0 auto;. - Используйте аудио — нажимайте на кнопки 🔊 и повторяйте вслух. Технические термины часто произносятся неочевидно.
- Смотрите на примеры из кода — каждый термин в статье сопровождается реальным CSS или JS примером.
- Повторяйте по таблице — в конце статьи есть полный список для быстрого повторения.
13. Заключение
Начните с первых 10 терминов: justify-content, margin, padding, position, overflow, font-family, frontend, display: grid, null, addEventListener. Это база, которая встречается в коде каждый день.
Главное правило: понимать, что делает термин, а не просто переводить его. Например, justify-content — это не «оправдать содержание», а «выравнивание элементов по главной оси».