Frontend Interview - собеседования по Javascript / Html / Css

Чемпионат для подростков по 14 направлениям от «Алабуга Политех»☺️ Программирование и Битва роботов, Экономика и Юриспруденция, 3D моделирование и Английский язык и многое другое, чтобы каждый нашел свою дисциплину. Для участия тебе нужно☺️ ☺️Оставь заявку на сайте😀 ☺️Пройди заочный этап на HR-платформе: Business Cats до 1,0 по «Общению» и «Аналитике» для оплаты дороги туда и обратно😀 ☺️Приезжай на чемпионат😀 Мы предлагаем тебе☺️ ☺️Общий призовой фонд турнира составляет 450 000 рублей😀 ☺️Проживание и дорога бесплатно😀 ☺️Возможность поступить в «Алабуга Политех»😀 Участвуй в турнире от образовательного центра мирового уровня и получай призы и преимущество в поступлении☺️

Свежие стажировки в IT и вакансии для джунов каждый день ✅ Канал "Стажировки в IT" помогает новичкам найти свою первую работу. Подпишись, чтобы не потерять. Смотреть #реклама О рекламодателе

​Когда нужно использовать кнопки, а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. Когда использовать `<button>`? - Когда действие выполняется на странице без перехода на другую - Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) - Отправка формы - Открытие/закрытие модального окна - Включение/выключение чего-то на странице - Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

Когда использовать `<a>`? - Когда нужно перейти на другую страницу (или секцию сайта) - Когда ссылка ведет на внешний или внутренний ресурс - Навигация по сайту - Переход на другую страницу - Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

👉 @frontendInterview

🧑🏻‍💻Хотите писать фронтенд быстрее, понятнее и без боли? Vue.js решает эту задачу. Фреймворк, который избавляет от лишнего кода и делает разработку удобной.  На открытом вебинаре 27 марта в 20:00 мск вы увидите разницу между обычным JS и Vue.js. Разберетесь, как директивы упрощают работу с DOM и делают код лаконичнее. Vue.js уже используют крупнейшие компании, и спрос на разработчиков растет. Освойте фреймворк, который упростит вашу работу и ускорит рост в профессии. ⚡️Регистрируйтесь на вебинар и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3Jbq/?erid=2W5zFJHjP8c  Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе

Binary Pyramid 101 Даны два числа m и n, такие, что 0 ≤ m ≤ n : переведите все числа от m до n (включительно) в двоичную систему счисления просуммируйте их, как если бы они были в основании 10 преобразовать результат в двоичную систему вернуть в виде строки. Пример:

 binaryPyramid(1,6) = "101001101"

👉 @frontendInterview

Building Micro Frontends with React 18 В книге рассматриваются два паттерна построения микрофронтендов - паттерн multi-SPA и паттерн micro apps.Вы узнаете, какие паттерны и когда следует использовать, а также рассмотрите нюансы развертывания этих микрофронтендов с использованием облачных нативных технологий, таких как Kubernetes и Firebase. С помощью этой книги вы получите глубокое понимание управления состояниями, решения проблем с маршрутизацией и стратегий развертывания между различными микрофронтендами. К концу книги вы научитесь проектировать и создавать микрофронтенд-приложение на основе React с использованием федерации модулей и эффективно развертывать его в облаке. 👉 @frontendInterview

​Какие существуют способы центрирования в CSS? Центрирование элементов может быть выполнено несколькими способами, в зависимости от типа элемента (блочный или строчный), его размеров и родительского контейнера. Вот основные методы центрирования элементов по горизонтали и вертикали: Центрирование по горизонтали 1. Использование `text-align` для строчных и встроенно-блочных элементов

.container {
  text-align: center;
}

2. Использование margin: auto для блочных элементов с фиксированной шириной

.element {
  width: 50%;
  margin: 0 auto;
}

Комбинированное центрирование (по горизонтали и вертикали) 1. Flexbox - Удобен для центрирования по обеим осям.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

2. Grid Layout - Предоставляет способ центрирования по горизонтали и вертикали с использованием place-items.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

3. Абсолютное позиционирование - В сочетании с трансформацией.

.container {
  position: relative;
  height: 100vh; /* Высота контейнера */
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрирование с учетом размеров элемента */
}

HTML:

<div class="container">
  <div class="element">Центрированный элемент</div>
</div>

👉 @frontendInterview

Почувствуйте всю боль удалёнщиков. Не каждый вывезет такое... 👉 @frontendInterview

Обучение на Data Protection Officer (DPO) ⚡Обучение по защите персональных данных от практиков из Comply, ALUMNI Partners, Ozon, VK и др ✨ На курсе вы узнаете: » Узнаете все про работу с персональными данными » 152-ФЗ и трансграничную передачу данных 🎓Программа: » Управление рисками » Проверка регулятора » Составление документов Скидка до конца недели! Оставьте заявку сейчас и станьте ближе к успешной карьере юриста! ❤️ Узнать больше #реклама 16+ mosdigitals.ru О рекламодателе

Я устроился на работу в 2025 году, и вот как это вышло Так уж вышло, что черт меня дернул выйти на рынок труда и предложить свои безусловно квалифицированные услуги работодателям за достойную награду. В этой статье я хочу изложить свои мысли, впечатления и эмоции по поиску работы на рынке, ставшем рынком работодателя. 👉 @frontendInterview

Т-Банк открыл донабор на оплачиваемые стажировки по восьми направлениям 🧑🏻‍💻 Сейчас можно отправить заявку на специальности: Java, Frontend, 1C, аналитик, QA, дизайнер, редактор, координатор образовательных проектов. Ждут студентов и начинающих специалистов, готовых посвящать работе от 20 часов в неделю. Стажер в Т-Банке — это полноценный член команды, который с первых дней включается в работу над реальными проектами. А после успешного окончания стажировки у вас будет возможность перейти на штатную позицию. Работу можно (и даже нужно) совмещать с обучением в университете: большинство стажеров в Т-Банке так и делают. График можно подстроить под учебу — менторы и руководители относятся к этому с пониманием. Выберите направление, отправьте заявку и решите экзамены до 26 марта

AbortController в JavaScript Сегодня мы рассмотрим интересный инструмент в JS. AbortController в JS — инструмент, который позволяет отменять асинхронные операции в любой момент. В этой статье разберёмся, как он работает, где пригодится и какие у него есть проблемы. 👉 @frontendInterview

Возможности для молодых людей в «Алабуге», Республике Татарстан В особой экономической зоне «Алабуга» активно развивается лидерская программа «100 Лидеров». В ней могут поучаствовать молодые специалисты от 19 до 26 лет. У участников есть возможность познакомиться с топ-менеджерами компании, поиграть в бизнес-игры, пройти собеседования с реальным шансом трудоустройства в компанию «Алабуга». Питание и проживание за счет компании. Работа в «Алабуге» - это зарплата от 110 до 240 тысяч рублей и участие в реализации проектов мирового уровня. Следующий поток - с 5 по 9 апреля! Заявку можно подать на сайте

Онлайн-магистратура «DevOps-инженер облачных сервисов» День открытых дверей 26 марта в 19:00 мск | Онлайн Эксперты Яндекса и ИТМО расскажут об очной онлайн-магистратуре для карьеры в IT. Всё о поступлении и обучении, выступления экспертов, ответы на вопросы. Забронировать #реклама 16+ practicum.yandex.ru О рекламодателе

​Чем синхронный код отличается от асинхронного ? Синхронный и асинхронный код отличаются тем, как они выполняются и управляют операциями ввода-вывода, временем ожидания и выполнением задач. Давайте рассмотрим их различия подробно. Синхронный код Выполняется последовательно, строка за строкой. Это означает, что каждая операция должна завершиться, прежде чем начнется следующая. Если одна операция занимает много времени (например, запрос к серверу или чтение файла), выполнение всей программы будет приостановлено, пока эта операция не завершится. Пример синхронного кода:

function syncTask() {
  console.log('Начало');
  for (let i = 0; i < 1000000000; i++) { /* Длительная операция */}
  console.log('Конец');
}

syncTask();
console.log('Это будет выполнено после syncTask');

В этом примере, пока длительная операция (цикл) не завершится, программа не продолжит выполнение и следующий console.log не будет вызван. Асинхронный код Позволяет выполнять другие операции, не дожидаясь завершения текущих долгих операций. Это особенно полезно для задач ввода-вывода, работы с сетью и других операций, которые могут занять значительное время. Обычно используют коллбеки, промисы или async/await для обработки результата по завершении. С использованием коллбеков:

console.log('Начало');

setTimeout(() => {
  console.log('Асинхронная операция');
}, 1000);

console.log('Конец');

В этом примере setTimeout ставит задачу на выполнение через 1 секунду, но код продолжает выполняться дальше, и console.log('Конец') вызывается до завершения асинхронной операции. С использованием промисов:

console.log('Начало');

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Асинхронная операция завершена');
  }, 1000);
}).then(message => {
  console.log(message);
});

console.log('Конец');

С использованием async/await:

console.log('Начало');

async function asyncTask() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Асинхронная операция завершена');
}

asyncTask();
console.log('Конец');

Основные отличия - Синхронный код: Выполняется последовательно. Каждая операция должна завершиться до начала следующей. - Асинхронный код: Позволяет выполнять другие операции, пока текущая не завершится. - Синхронный код: Может блокировать выполнение всей программы, если операция длительная. - Асинхронный код: Не блокирует выполнение программы. Другие операции могут выполняться параллельно. - Синхронный код: Время ожидания одной операции может замедлить всю программу. - Асинхронный код: Ожидание длительных операций не мешает выполнению других задач. - Синхронный код: Проще для понимания и отладки, так как выполняется последовательно. - Асинхронный код: Может быть сложнее для понимания из-за необходимости управления состоянием и ожиданием результатов асинхронных операций. 👉 @frontendInterview