اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
Frontend | Вопросы собесов
رفتن به کانال در Telegram
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
نمایش بیشتر📈 تحلیل کانال تلگرام Frontend | Вопросы собесов
کانال Frontend | Вопросы собесов (@easy_javascript_ru) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 18 227 مشترک است و جایگاه 7 298 را در دسته فناوری و برنامهها و رتبه 36 913 را در منطقه روسيا دارد.
📊 شاخصهای مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 18 227 مشترک جذب کرده است.
بر اساس آخرین دادهها در تاریخ 24 ژوئن, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -148 و در ۲۴ ساعت گذشته برابر -5 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 9.20% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 5.38% واکنش نسبت به کل مشترکان کسب میکند.
- دسترسی پستها: هر پست به طور میانگین 1 678 بازدید دریافت میکند. در اولین روز معمولاً 981 بازدید جمعآوری میشود.
- واکنشها و تعامل: مخاطبان بهطور فعال حمایت میکنند؛ میانگین واکنش به هر پست 9 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند ставь, браузер, html, border, flex تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاههای شخصی توصیف میکند:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
به لطف بهروزرسانیهای پرتکرار (آخرین داده در تاریخ 25 ژوئن, 2026)، کانال همواره بهروز و دارای دسترسی بالاست. تحلیلها نشان میدهد مخاطبان بهطور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامهها تبدیل کردهاند.
18 227
مشترکین
-524 ساعت
-467 روز
-14830 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
ژوئن '26
ژوئن '26
+24
در 1 کانالها
مه '26
+41
در 0 کانالها
Get PRO
آوریل '26
+28
در 0 کانالها
Get PRO
مارس '26
+28
در 0 کانالها
Get PRO
فوریه '26
+42
در 0 کانالها
Get PRO
ژانویه '26
+97
در 1 کانالها
Get PRO
دسامبر '25
+15
در 2 کانالها
Get PRO
نوامبر '25
+120
در 0 کانالها
Get PRO
اکتبر '25
+89
در 0 کانالها
Get PRO
سپتامبر '25
+55
در 0 کانالها
Get PRO
اوت '25
+65
در 0 کانالها
Get PRO
ژوئیه '25
+98
در 0 کانالها
Get PRO
ژوئن '25
+103
در 2 کانالها
Get PRO
مه '25
+121
در 2 کانالها
Get PRO
آوریل '25
+171
در 0 کانالها
Get PRO
مارس '25
+162
در 5 کانالها
Get PRO
فوریه '25
+359
در 5 کانالها
Get PRO
ژانویه '25
+531
در 53 کانالها
Get PRO
دسامبر '24
+285
در 1 کانالها
Get PRO
نوامبر '24
+539
در 0 کانالها
Get PRO
اکتبر '24
+1 456
در 46 کانالها
Get PRO
سپتامبر '24
+2 372
در 275 کانالها
Get PRO
اوت '24
+742
در 0 کانالها
Get PRO
ژوئیه '24
+855
در 54 کانالها
Get PRO
ژوئن '24
+3 780
در 245 کانالها
Get PRO
مه '24
+3 174
در 224 کانالها
Get PRO
آوریل '24
+2 890
در 69 کانالها
Get PRO
مارس '24
+2 687
در 48 کانالها
Get PRO
فوریه '24
+3 294
در 32 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 25 ژوئن | 0 | |||
| 24 ژوئن | 0 | |||
| 23 ژوئن | 0 | |||
| 22 ژوئن | 0 | |||
| 21 ژوئن | 0 | |||
| 20 ژوئن | 0 | |||
| 19 ژوئن | +1 | |||
| 18 ژوئن | 0 | |||
| 17 ژوئن | +4 | |||
| 16 ژوئن | +2 | |||
| 15 ژوئن | 0 | |||
| 14 ژوئن | 0 | |||
| 13 ژوئن | 0 | |||
| 12 ژوئن | 0 | |||
| 11 ژوئن | 0 | |||
| 10 ژوئن | 0 | |||
| 09 ژوئن | +1 | |||
| 08 ژوئن | 0 | |||
| 07 ژوئن | 0 | |||
| 06 ژوئن | 0 | |||
| 05 ژوئن | +3 | |||
| 04 ژوئن | +3 | |||
| 03 ژوئن | 0 | |||
| 02 ژوئن | +10 | |||
| 01 ژوئن | 0 |
پستهای کانال
Кредитная карта супер Сплита
Платите ей на кассах магазинов и онлайн — лимит до 1 млн ₽ на любые покупки.
Сумму можно разделить на части до 6 месяцев без переплат. А также:
— Бесплатное обслуживание
— 0 ₽ в день покупки, первый платёж — только через месяц
— Самостоятельная настройка графика платежей
— Бесплатная пластиковая карта
Узнать больше
Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: АО «Яндекс Банк» .
#реклама
pay.yandex.ru
О рекламодателе
| 2 | 🤔 Какой метод запускает проигрывание аудио-файла?
Для воспроизведения используется метод play(), вызываемый на элементе <audio> или объекте, созданном через JavaScript.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 800 |
| 3 | 🤔 Как браузер понимает что ресурс нужно закешировать?
Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить.
🚩Как браузер решает, кешировать ресурс или нет?
Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.
HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"
🚩Как работают заголовки кэширования?
🟠`Cache-Control` – главный заголовок
Определяет, как долго ресурс должен храниться в кэше.
Cache-Control: max-age=86400, public
🟠`Expires` – устаревший, но ещё используется
Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.
Expires: Wed, 26 Feb 2025 12:00:00 GMT
🟠`ETag` – проверка обновлений ресурса
Позволяет браузеру узнать, изменился ли файл на сервере.
ETag: "abc123"
Если браузер снова запрашивает ресурс, он отправляет заголовок
If-None-Match: "abc123"
🟠`Last-Modified` – альтернатива `ETag`
Дата последнего изменения ресурса.
Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT
Браузер может отправить запрос с
If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT
Ставь 👍 и забирай 📚 Базу знаний | 1 053 |
| 4 | Осталось 3 часа до конца акции:
«Пожизненный PRO тариф — по цене 1 года»
Поиск работы отнимает силы, время и веру в себя, но не у тех кто использует easyoffer PRO. Успей сделать самую выгодную инвестицию в развитие своей карьеры.
Акция закончится уже сегодня 23 июня 23:59 по мск:
👉 https://easyoffer.ru/pro | 403 |
| 5 | 🤔 Что такое CDN?
CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 259 |
| 6 |  Нужен мессенджер для работы?
Битрикс24 — ваш мессенджер для работы и бизнеса.
Личные и групповые чаты, видеозвонки и каналы в одном сервисе. Приглашайте коллег и внешние команды. Работает как привычный мессенджер.
Есть бесплатный тариф. Начните работать уже сейчас.
Битрикс24 — мессенджер для вашей компании.
Попробовать
#реклама 16+
bitrix24.ru
О рекламодателе | 1 284 |
| 7 | 🤔 Как передать данные из родительского компонента в дочерний?
Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.
🚩Шаги для передачи данных из родительского компонента в дочерний
1⃣Создание родительского компонента
В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
Затем передаем эти данные в дочерний компонент через пропсы.
2⃣Приём данных в дочернем компоненте
В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.
Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const message = "Привет, дочерний компонент!";
return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent message={message} />
</div>
);
}
export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>{props.message}</p>
</div>
);
}
export default ChildComponent;
🚩Пояснение
1⃣В родительском компоненте `ParentComponent`:
Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.
2⃣В дочернем компоненте ChildComponent:
Принимаем пропс message через параметр props.
Используем props.message для отображения переданной строки внутри тега <p>.
🚩Дополнительные примеры
Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const user = {
name: "Иван",
age: 25
};
return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent user={user} />
</div>
);
}
export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>Имя: {props.user.name}</p>
<p>Возраст: {props.user.age}</p>
</div>
);
}
export default ChildComponent;
Ставь 👍 и забирай 📚 Базу знаний | 966 |
| 8 | Последний день акции:
«Пожизненный PRO тариф — по цене 1 года»
🚀 PRO включает:
– Полный доступ ко всем грейдам и профессиям
– База live-coding задач и вопросов из технических собеседований с вероятностью их встречи
– Примеры лучших ответов от Senior разработчиков
– 1100+ записи реальных собеседований, в том числе в топовые компании (Сбер, Авито, Яндекс, WB, OZON, МТС и др.)
– База 400+ тестовых заданий от компаний.
– Автоотклики на вакансии в хедхантер
– Аналитика ТОП-требований из вакансий для лучшего написания резюме и прохождения ATS систем рекрутеров
– Генератор уникального резюме и CV под каждую вакансию
– Тренажеры подготовки к собеседованию: «Реальное собеседование» и «Проработка вопросов» по методике интервальных повторений (как Anki)
– (скоро) Агрегатор вакансий
– (скоро) Сообщество
Акция закончится уже сегодня 23 июня 23:59 по мск:
👉 https://easyoffer.ru/pro | 896 |
| 9 | Аренда VPS/VDS-сервера.
Виртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураций от 200 ₽/мес.
Преимущества аренды:
- Выделенные ресурсы без переплаты;
- KVM-виртуализация;
- Быстрые NVMe SSD;
- Соответствие 152-ФЗ, PCI DSS;
- Бесплатная защита от DDoS;
- Управление через панель, API и Terraform;
- Техподдержка 24/7.
Запустите сервер за несколько минут!
Попробовать
#реклама 16+
selectel.ru
О рекламодателе | 1 148 |
| 10 | 🤔 Что такое falsy значения?
Это значения, которые при приведении к булевому типу становятся false.
1. Примеры: 0, '' (пустая строка), null, undefined, NaN, false.
2. Они полезны для проверки в логических операциях и условиях.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 178 |
| 11 | Пожизненный PRO тариф — по цене 1 года.
Покупаешь один раз — пользуешься всю жизнь:
👉 https://easyoffer.ru/pro
🚀 PRO-доступ закроет 99% проблем на пути к офферу:
1. Полный доступ ко всем грейдам и профессиям. Не важно, Junior вы или Senior, Тестировщик, Разработчик, Проджект — вы получите материалы под ваш текущий уровень и цели, без ограничений.
2. База live-coding задач и вопросов с реальных собесов с уникальной системой вероятности их встречи. Вы будете готовиться не вслепую, а точечно по тем темам, которые спрашивают чаще всего.
3. Эталонные ответы от Senior-разработчиков. Никакой воды и догадок — только четкие, структурированные решения, за которые дают «зеленый свет» к офферу
4. 1100+ записей реальных собеседований (включая топы: Сбер, Авито, Яндекс, WB, OZON, МТС). Вы увидите всё изнутри: как спрашивают, как отвечают сильные кандидаты и на каких ошибках проваливаются 80% проходящих.
5. База 400+ тестовых заданий. Если вы еще студент, то практикуйтесь на решении задач, которые помогут попасть на собес
6. Автоотклики на Хедхантере — пока вы спите, ваше резюме летит к рекрутерам автоматически. Это экономия сотен часов ручного кликанья.
7. Аналитика ТОП-требований из вакансий. Мы парсим рынок и показываем, какие скиллы сейчас в цене. Это позволит вам точечно апгрейдить резюме и проходить суровые ATS-фильтры (которые отсеивают до 75% резюме еще до просмотра рекрутером).
8. Генератор уникального резюме и CV под каждую вакансию. Забудьте про «универсальное» резюме — нейросеть адаптирует ваш опыт под конкретную позицию за минуту, повышая шансы на приглашение в разы.
9. Тренажеры подготовки к собеседованию:
«Реальное собеседование» — сценарий вопросов из реальных интервью
«Проработка вопросов» — флеш карточки с вопросами/ответами по методике интервальных повторений (как Anki)
10. (Скоро) Агрегатор вакансий — все вакансии из HH, Telegram, LinkedIn и других площадок в одной ленте.
11. (Скоро) Закрытое комьюнити — нетворкинг и помощь в сложных вопросах от таких же целеустремленных айтишников.
Завтра последний день акции:
👉 https://easyoffer.ru/pro | 1 098 |
| 12 | 🤔 К какой категории относятся промисы?
Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами).
Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await, then/catch)
🚩Почему промисы – асинхронная конструкция?
Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Данные загружены!"); // Успех
}, 2000);
});
fetchData.then(data => console.log(data));
🚩Promise – это не просто колбэк
До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".
function fetchData(callback) {
setTimeout(() => {
callback("Данные загружены!");
}, 2000);
}
fetchData(data => console.log(data));
Решение с Promise
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
Ставь 👍 и забирай 📚 Базу знаний | 1 136 |
| 13 | 🤔 Как между собой связаны HTML, CSS и JS
HTML задаёт структуру, CSS отвечает за внешний вид, JS — за динамическое поведение. Они взаимодействуют через DOM: JS может читать и изменять HTML и CSS.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 270 |
| 14 | 🤔 Как общаться между iframe и самой страницой?
Общение между iframe и родительской страницей может происходить с помощью:
Метода postMessage (лучший способ)
Доступа к window.frames или window.parent (если тот же домен)
Передачи данных через localStorage или cookies
🟠`postMessage` – безопасный способ для разных доменов
Метод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.
🚩Передача данных из `iframe` в родительскую страницу
*Код в iframe (child.html)
// Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");
Код в родительской странице (index.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от iframe:", event.data);
});
* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например:
window.parent.postMessage({ type: "hello" }, "https://example.com");
🚩Передача данных из родителя в `iframe`
Код в родительской странице (index.html)
const iframe = document.getElementById("myIframe");
// Ждём, когда iframe загрузится
iframe.onload = () => {
iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};
Код в iframe (child.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от родителя:", event.data);
});
🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!)
Если iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.
Родительская страница → iframe
const iframe = document.getElementById("myIframe");
// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";
iframe → Родительская страница
console.log(window.parent.document.title); // Доступ к заголовку страницы
🚩`localStorage` или `cookies` (если оба окна на одном домене)
Можно сохранять данные в localStorage или cookies, а другая сторона будет их читать.
Запись в localStorage из iframe
localStorage.setItem("message", "Привет от iframe!");
Чтение localStorage в родительской странице
console.log(localStorage.getItem("message")); // "Привет от iframe!"
Ставь 👍 и забирай 📚 Базу знаний | 1 268 |
| 15 | 🤔 Что такое inline-block?
Это значение CSS-свойства display, при котором элемент ведёт себя как строчный, но сохраняет возможность задавать ширину и высоту, как блочный. Это удобно для создания адаптивных интерфейсов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 254 |
| 16 | 🤔 Что произойдет если мы напишем невалидную разметку?
Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так.
🚩Что делает браузер с невалидным HTML?
Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что:
Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег).
Некоторые элементы могут быть проигнорированы или отображены некорректно.
CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре.
🚩Примеры ошибок и их последствия
Отсутствие закрывающего тега
<p>Привет, мир!
<p>Это новый абзац?
Вложенность тегов в неправильных местах
<p>Текст <div>Блок внутри абзаца</div></p>
По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца.
Итоговый HTML может быть таким:
<p>Текст </p>
<div>Блок внутри абзаца</div>
🟠Отсутствие `DOCTYPE`
Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей.
Неправильные атрибуты в тегах
<img src="image.jpg" alt="Картинка" wrongAttr="что это?">
Незакрытые теги в таблице
<table>
<tr>
<td>Ячейка 1
<td>Ячейка 2
</tr>
</table>
Ставь 👍 и забирай 📚 Базу знаний | 1 399 |
| 17 | Привет, ребята!
У нас для вас отличные новости — на easyoffer вышло сразу несколько крупных обновлений:
1. Автоотклики на HeadHunter
Снова работают в полную силу — можно смело возвращаться к активному поиску.
2. Новый раздел «Резюмейкер»
Теперь вы можете быстро создавать уникальные резюме, адаптированные под каждую вакансию, и сразу добавлять сопроводительное письмо. Это заметно повышает шансы получить приглашение на собеседование.
3. База вопросов стала чище
Мы навели порядок и удалили около 30% дубликатов.
Ориентироваться стало проще.
––––––––––––––––––
🔥 Акция в честь обновления
Пожизненный тариф easyoffer PRO — по цене одного года.
Успейте до 23 июня:
👉 https://easyoffer.ru/pro
––––––––––––––––––
Что дальше?
В ближайшие пару недель добавим ещё два раздела:
1. Сообщество с чатами по всем профессиональным направлениям.
2. Агрегатор вакансий, чтобы поиск работы стал ещё удобнее. | 1 036 |
| 18 | 🤔 Зачем нужен хеш в названиях файлов (на примере Vue CLI)?
- Например: app.4f3e1a.js
- Если файл меняется — хеш меняется.
- Браузер получает новый файл, обходит кеш.
Это способ кеш-инвалидации — позволяет пользователям всегда получать актуальные файлы.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний | 1 404 |
| 19 | 🤔 Как реализовать адаптивную верстку?
Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).
🟠Гибкие сетки (Flexbox, Grid, `max-width`)
Использование max-width вместо width
.container {
width: 100%; /* Контейнер занимает всю ширину */
max-width: 1200px; /* Но не больше 1200px */
margin: auto; /* Центрирование */
}
Использование Flexbox
.container {
display: flex;
flex-wrap: wrap; /* Перенос элементов, если не влезают */
justify-content: space-between;
}
.item {
width: 48%; /* Два элемента в ряд */
}
@media (max-width: 768px) {
.item {
width: 100%; /* Один элемент в ряд на маленьких экранах */
}
}
Использование CSS Grid
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
🟠Медиа-запросы (`@media`)
Изменяют стили в зависимости от ширины экрана.
/* Десктоп (от 1024px) */
body {
font-size: 18px;
}
/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
body {
font-size: 16px;
}
}
/* Телефоны (до 767px) */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
🟠Адаптивные изображения (`srcset`, `sizes`)
Позволяет загружать разные изображения в зависимости от устройства.
<img
src="image-400.jpg"
srcset="image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Адаптивное изображение">
🟠Viewport (`meta viewport`)
Управляет масштабированием на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1">
🟠CSS-фреймворки (Bootstrap, Tailwind)
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">Контент</div>
<div class="col-md-6 col-sm-12">Контент</div>
</div>
</div>
Tailwind CSS
<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
<div class="bg-blue-500">1</div>
<div class="bg-green-500">2</div>
<div class="bg-red-500">3</div>
</div>
Ставь 👍 и забирай 📚 Базу знаний | 1 449 |
| 20 | Получи грант до 3,48 млн на обучение дизайну
Поступай на дизайн в Центральный университет с грантом.
Для учеников 10–11-х классов и СПО. Освой графический, UI/UX и продуктовый дизайн. Создавай визуальные концепты будущего.
На программе студенты получают фундаментальную базу, развивают прикладные навыки, приобретают опыт работы над реальными проектами, собирают портфолио и строят связи внутри дизайн-сообщества
Подать заявку
#реклама 16+
cu.ru
О рекламодателе | 1 058 |
