Frontend | Вопросы собесов

🤔 Что такое CSS? CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования HTML-элементов, включая цвета, размеры, шрифты и расположение. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Квартиры в Краснодаре. Ремонт в подарок до 31.12 Новый жилой район "Первое место" в Краснодаре. Здесь всё для счастливой жизни на первом месте: - Две школы - Шесть детских садов - Поликлиники - Собственный фитнес-центр - Многоуровневый паркинг Жилой комплекс располагается в новом районе города «Новознаменский», в Карасунском округе Краснодара и имеет удобный выезд на трассу М4 ДОН, Джубгскую трассу в направлении Черного моря и горнолыжных курортов. Успейте забрать билет в жизнь, где вы всегда будете на «Первом месте»! Получить предложение Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО " СЗ Живые квартиры" #реклама promo.tochno-pervoe.ru О рекламодателе

🤔 Для чего используются препроцессоры? Препроцессоры используются для расширения возможностей CSS, упрощения написания стилей и улучшения организации кода. Они добавляют функциональность, которая отсутствует в стандартном CSS, такую как переменные, вложенные правила, миксины, функции и операции. Основные препроцессоры, такие как Sass, LESS и Stylus, помогают разработчикам писать более чистый, структурированный и поддерживаемый код. 🚩Основные преимущества препроцессоров 🟠Переменные Препроцессоры позволяют использовать переменные для хранения значений, таких как цвета, размеры и другие повторяющиеся значения. Это упрощает изменение стилей, поскольку изменения нужно вносить только в одном месте.

// Пример на Sass
$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}   

🟠Вложенные правила В стандартном CSS вложенность не поддерживается, что может затруднять чтение и поддержку кода. Препроцессоры позволяют использовать вложенные правила, что делает структуру кода более логичной и читаемой.

// Пример на Sass
.nav {
    background: #eee;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: inline-block;

            a {
                color: #333;
            }
        }
    }
}
   

🟠Миксины Миксины позволяют определять повторяющиеся блоки стилей и использовать их в разных местах кода. Это помогает избежать дублирования и облегчает внесение изменений.

// Пример на Sass
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
}   

🟠Функции и операции Препроцессоры поддерживают использование функций и операций для выполнения вычислений и обработки значений непосредственно в CSS-коде.

// Пример на Sass
$base-font-size: 16px;

.large-text {
    font-size: $base-font-size * 1.5;
}   

🟠Импорт файлов Препроцессоры позволяют разбивать CSS на несколько файлов и импортировать их в основной файл стилей. Это улучшает организацию кода и его поддерживаемость.

// Пример на Sass
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';   

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём отличие хранения данных в local storage от сессий? localStorage сохраняет данные бессрочно, пока их не удалят вручную, а sessionStorage хранит данные только на время текущей сессии браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Быстрая миграция в Yandex Cloud за наш счёт Чувствуете, что текущая инфраструктура ограничивает рост вашего бизнеса? Пора переходить в облако! Специалисты Yandex Cloud помогут сделать процесс миграции максимально простым. Всё, что потребуется от вас, — выделить специалиста с доступом к инфраструктуре. Остальное мы берём на себя! И самое приятное: подайте заявку до 31 декабря, и мы покроем расходы на услуги нашей команды и тестовую инфраструктуру. ✨ Мигрируйте в Yandex Cloud легко и без рисков! ⚡Заполните заявку прямо сейчас Подать заявку #реклама yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Как сделать анимацию бесконечно повторяющейся? Чтобы создать бесконечно повторяющуюся анимацию в CSS, используется свойство animation вместе с параметром infinite, который указывает, что анимация должна повторяться бесконечно. 🚩Основные шаги 1⃣Определение ключевых кадров анимации с помощью @keyframes. 2⃣Применение анимации к элементу с использованием свойства animation и указанием параметра infinite. 🚩Пример использования Сначала создайте анимацию с ключевыми кадрами. Допустим, мы хотим, чтобы элемент плавно изменял цвет и возвращался к исходному состоянию.

@keyframes changeColor {
    0% {
        background-color: lightblue;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightblue;
    }
}

Теперь применим эту анимацию к элементу и укажем, что она должна повторяться бесконечно.

.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: changeColor 3s infinite;
}

🚩Зачем это нужно 🟠Эффекты на сайте Бесконечные анимации могут использоваться для создания привлекательных визуальных эффектов на сайте, таких как мерцание, изменение цвета или вращение элементов. 🟠Интерактивность Такие анимации могут сделать пользовательский интерфейс более динамичным и интересным. Ставь 👍 и забирай 📚 Базу знаний

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку. Реклама. ИП Чернова О. А., ИНН:771399721044

🤔 Что такое хук? Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Вы уже работаете с JavaScript? А вы сможете пройти тест для PRO? https://otus.pw/Yuuu/  📚Получите актуальные навыки на практике, используя привычные подходы. — Node.js, Angular, React.js и Vue.js уже ждут вас на онлайн-курсе «JavaScript Developer. Professional» от OTUS. 🔥Пройдите тестирование, чтобы: - Оценить свои навыки - Получить курс по специальной цене после успешного прохождения теста - Получить доступ к бесплатным урокам курса от OTUS 👉Ссылка на тест: https://otus.pw/Yuuu/   #реклама О рекламодателе

🤔 Как сделать вращения по оси x и y заметными? Чтобы сделать вращения по осям X и Y заметными, нужно учитывать перспективу. Перспектива добавляет глубину к элементам, позволяя визуально различать вращение по осям X и Y. В CSS для этого используются свойства perspective и transform. 🚩Пример использования

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            perspective: 800px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 50px;
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        .rotate-x {
            transform: rotateX(45deg);
        }
        .rotate-y {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box rotate-x"></div>
        <div class="box rotate-y"></div>
    </div>
</body>
</html>

🚩Объяснение 🟠Контейнер с перспективой Определяет глубину перспективы. Меньшие значения делают перспективу более выраженной, большие значения — более плоской.

.container {
    perspective: 800px;
}
   

🟠Элемент с трехмерной трансформацией Обеспечивает сохранение трехмерных преобразований для потомков элемента. Добавляет плавный переход при изменении трансформации.

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 50px;
    transform-style: preserve-3d;
    transition: transform 1s;
}   

🟠Вращение по оси X Вращает элемент на 45 градусов вокруг оси X.

.rotate-x {
    transform: rotateX(45deg);
}   

🟠Вращение по оси Y Вращает элемент на 45 градусов вокруг оси Y.

.rotate-y {
    transform: rotateY(45deg);
}   

🚩Зачем это нужно 🟠Перспектива Добавляет визуальную глубину, делая трехмерные эффекты более реалистичными. 🟠Трехмерные эффекты Вращение по осям X и Y без перспективы не будет выглядеть объемным. Перспектива помогает зрительно отличить, что элемент вращается в трехмерном пространстве. Ставь 👍 и забирай 📚 Базу знаний

📶 С 1 декабря для граждан РФ открыт доступ к платным материалам по программированию Вот отсортированные базы с тонной материала(книги, курсы, ресурсы и гайды). Выбирай своё направление: 👩‍💻 Frontend 👩‍💻 PHP ⚙️ Backend 👩‍💻 Моб. Dev 📱 GitHub 👩‍💻 GameDev 🤓 Всё айти 👩‍💻 DevOps 👩‍💻 Python 🖥 Data Science 👩‍💻 Java 🐞 Тестирование 👩‍💻 C# 🤔 Хакинг & ИБ 👩‍💻 С/С++ 📱 Маркетинг 🖥 SQL 🖥 Дизайн 👩‍💻 Golang 👣 Rust Скачивать ничего не нужно — все выложили в Telegram с доступом по ссылке

🤔 Что такое React? React — это библиотека JavaScript для создания пользовательских интерфейсов, основанная на компонентах и виртуальном DOM, что делает её эффективной и удобной для масштабирования. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатное IT-образование в 2024 Отобрали для вас полезные телеграм-каналы, которые помогут освоить IT-направления Выбирайте нужное и подписывайтесь: — Frontend: t.me/+qWPopdiaxVMzZDgy — Backend: t.me/+X-zQb-NgzGNhMzRi — GitHub: t.me/+3BVAmDixuO9lYTFi — Книги айти: t.me/+IG2NAVECUXs4MGYy — Python: t.me/+vBSA5zgB_gA0OWRi — Java: t.me/+3BRKfZ09ewg0NDJi — C#: t.me/+O3pnFY4bpF5hNTEy — С/С++: t.me/+PGxPXpZZczQxODcy — Базы Данных & SQL: t.me/+530qWWydM8ExZjk6 — Golang: t.me/+FvTd7F-O-NNmNGMy — PHP: t.me/+jBvbaet0vpplNDQy — Моб. разработка: t.me/+Ikx5H4MrPihlOWZi — Разработка игр: t.me/+Z34knEvL8P9lZTAy — DevOps: t.me/+3wSgqmP5NOBhZGUy — Data Science: t.me/+-CuoNNa6P7VjOTRi — ИБ: t.me/+4jo8N5jtGDs1NTli — Тестирование: t.me/+MvFXlXbmmPFkM2Ey — Маркетинг: t.me/+lgiFPJTYp8M0ZjRi — Дизайн: t.me/+gmflvDFPc_c1YmIy Получить предложение #реклама 16+ О рекламодателе

🤔 Как бы повернул блок на 45 градусов? Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон. 🚩Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

🚩Объяснение Основной синтаксис 🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

🟠Параметры Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

🚩Пояснение 🟠Свойство `transform` Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение. 🟠Функция `rotate` Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки. 🚩Использование в реальных проектах 🟠Вращение элементов Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста. 🟠Анимация В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое props? Props (свойства) — это данные, передаваемые от родительского компонента к дочернему в React, которые используются для конфигурации и не могут быть изменены внутри дочернего компонента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Мастер-класс по Python для школьников. Бесплатно! Онлайн-урок от ведущего ИТ ВУЗа страны - Университета Иннополис для учеников 6-11 классов. 👍Бесплатно! ✅Познакомим с профессией тестировщика. ✅Научим проверять программы, находить баги. ✅На практике отработаем использование инструментов и методов тестирования. ⚡Ваш ребёнок за один час создаст автоматический тест на языке программирования Python и сможет использовать полученные знания в дальнейшем! Для участия важно знание основ программирования на Python. Помогите ребёнку освоить востребованную профессию. Регистрируйтесь! Зарегистрироваться #реклама 16+ progmatica.innopolis.university О рекламодателе

🤔 Что такое set и map? Это встроенные коллекции в JavaScript, введенные в ECMAScript 2015 (ES6), которые предоставляют новые способы хранения и управления данными. 🚩Set Это коллекция, которая позволяет хранить уникальные значения любого типа, будь то примитивы или объекты. 1⃣Создание Set

const set = new Set();
const setWithValues = new Set([1, 2, 3, 4, 5]);   

2⃣Добавление элементов

set.add(1);
set.add(2);
set.add(2); // Игнорируется, т.к. 2 уже существует
console.log(set); // Set { 1, 2 }   

3⃣Удаление элементов

set.delete(1);
console.log(set); // Set { 2 }   

4⃣Проверка наличия элемента

console.log(set.has(2)); // true
console.log(set.has(3)); // false   

5⃣Размер коллекции

console.log(set.size); // 1   

6⃣Итерация по элементам

set.forEach((value) => {
    console.log(value);
});

for (let value of set) {
    console.log(value);
}   

🚩Map Это коллекция, которая позволяет хранить пары ключ-значение. В отличие от обычных объектов, ключи в Map могут быть любого типа, включая функции, объекты и примитивы. 1⃣Создание Map

const map = new Map();
const mapWithValues = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);
   

2⃣Добавление элементов

map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map); // Map { 'key1' => 'value1', 'key2' => 'value2' }   

3⃣Удаление элементов

map.delete('key1');
console.log(map); // Map { 'key2' => 'value2' }   

4⃣Получение значения по ключу

console.log(map.get('key2')); // value2   

5⃣Проверка наличия ключа

console.log(map.has('key2')); // true
console.log(map.has('key1')); // false   

6⃣Размер коллекции

console.log(map.size); // 1   

🚩Примеры использования 🟠Уникальные значения с Set Если вам нужно хранить только уникальные значения, Set идеально подходит:

const numbers = [1, 2, 3, 4, 5, 5, 6, 7, 7, 8];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // Set { 1, 2, 3, 4, 5, 6, 7, 8 }

🟠Пары ключ-значение с Map Если вам нужно хранить данные в формате ключ-значение и вам важна возможность использовать сложные типы данных в качестве ключей, Map — лучший выбор:

const userRoles = new Map();
const admin = { name: 'Admin' };
const editor = { name: 'Editor' };

userRoles.set(admin, 'admin');
userRoles.set(editor, 'editor');

console.log(userRoles.get(admin)); // admin
console.log(userRoles.get(editor)); // editor

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое JSX? JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript, упрощая создание React-компонентов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Гайд «Как собственнику управлять отделом маркетинга?» Собственник бизнеса — это не тот, кто занимается всем, от стратегических решений до маркетинга. Это человек, который создает систему, где каждый элемент работает как одно целое. Маркетолог — это специалист, который погружён в данные, анализ, тестирование гипотез и построение стратегии. Считаете, что можно совмещать это с управлением компанией? Ошибка. Собственник должен направлять бизнес, а не тратить время на то, что могут сделать другие, лучше и эффективнее. Наш гайд — инструкция, как выстроить отдел маркетинга, который будет работать автономно, результативно, а главное, без участия собственника. Это шаг к построению бизнеса, который работает слаженно, как система, а не как набор отдельных задач. Забирайте! Скачать #реклама 16+ cmonster.io О рекламодателе