🤔 Что такое гибридные приложения?

Это приложения, которые сочетают в себе элементы как веб-приложений, так и нативных мобильных приложений. Они разрабатываются с использованием веб-технологий (HTML, CSS, JavaScript) и затем оборачиваются в нативные контейнеры, что позволяет запускать их на различных мобильных платформах (iOS, Android и др.).

🚩Основные характеристики

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

🟠Использование веб-технологий
Гибридные приложения разрабатываются с использованием стандартных веб-технологий (HTML, CSS, JavaScript), что упрощает процесс разработки для веб-разработчиков.

🟠Нативные контейнеры
Эти приложения оборачиваются в нативные контейнеры (например, с помощью Apache Cordova или Capacitor), что позволяет им использовать функции и API нативных платформ.

🚩Примеры технологий и фреймворков

🟠Apache Cordova (ранее PhoneGap)
Фреймворк для создания мобильных приложений с использованием веб-технологий. Позволяет оборачивать веб-приложения в нативные контейнеры.
🟠Ionic
Популярный фреймворк для разработки гибридных мобильных приложений. Основан на Angular и Cordova, но также поддерживает другие фреймворки, такие как React и Vue.
🟠Capacitor
Современная альтернатива Cordova, разработанная командой Ionic. Предоставляет более мощные и гибкие возможности для интеграции с нативными функциями.
🟠React Native
Хотя React Native обычно рассматривается как фреймворк для кроссплатформенной разработки нативных приложений, его можно использовать для создания гибридных приложений, интегрируя веб-контент.

🚩Пример создания

1⃣Установка Ionic CLI

npm install -g @ionic/cli   

2⃣Создание нового проекта

ionic start myApp tabs --type=angular   

3⃣Запуск приложения в браузере

cd myApp
ionic serve   

4⃣Сборка и запуск на мобильном устройстве

ionic capacitor add android
ionic capacitor run android   

🚩Плюсы

➕Снижение затрат на разработку
Разработка и поддержка единой кодовой базы для нескольких платформ позволяет сократить затраты на разработку и время выхода на рынок.
➕Кроссплатформенность
Возможность запуска на различных платформах без необходимости переписывать код для каждой платформы.
➕Использование существующих навыков
Веб-разработчики могут использовать свои знания HTML, CSS и JavaScript для создания мобильных приложений.

🚩Минусы

➖Производительность
Гибридные приложения могут работать медленнее по сравнению с нативными приложениями, особенно при выполнении сложных графических операций или интенсивного использования ресурсов.
➖Ограниченный доступ к нативным функциям
Хотя большинство нативных функций доступны через плагины, некоторые из них могут быть ограничены или требовать дополнительных усилий для интеграции.
➖Пользовательский интерфейс
Достижение нативного пользовательского интерфейса может быть сложным, и гибридные приложения могут не всегда соответствовать ожиданиям пользователей по внешнему виду и поведению.

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

🤔 Расскажи про области видимости?

Области видимости определяют, где переменные доступны в коде. В языках, таких как JavaScript, есть глобальная, функциональная, блочная и модульная области видимости. Эти области помогают организовывать код, избегая конфликтов имен.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое function expression?

Это способ определения функции в JavaScript, при котором функция создается как часть выражения и может быть присвоена переменной, объекту или передана в качестве аргумента другой функции. В отличие от Function Declaration (функционального объявления), функциональные выражения не подлежат "поднятию" (hoisting), что означает, что их можно использовать только после их определения.

🚩Примеры использования

Присваивание функции переменной

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

Анонимные функции

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Alice')); // Hello, Alice!

Именованные функции

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

console.log(factorial(5)); // 120

Использование функции в качестве аргумента другой функции

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

IIFE (Immediately Invoked Function Expression)

(function() {
  const message = 'Hello, World!';
  console.log(message);
})();
// Hello, World!

Использование стрелочных функций

const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 6

🚩Основные отличия

🟠Поднятие (Hoisting)
Функции, определенные с помощью функционального объявления, поднимаются, то есть могут быть вызваны до их определения в коде.

console.log(add(2, 3)); // 5

function add(a, b) {
  return a + b;
}     

Функциональные выражения не поднимаются, поэтому они могут быть использованы только после их определения.

console.log(add(2, 3)); // Ошибка: add is not defined

const add = function(a, b) {
  return a + b;
};     

🟠Именование
Обязательно имеют имя.

function subtract(a, b) {
  return a - b;
}
     

Могут быть анонимными или именованными.

const divide = function(a, b) {
  return a / b;
};     

🟠Использование в коде
Подходит для определения основных функций на верхнем уровне программы. Более гибкий способ определения функций, особенно полезен для создания замыканий, обработки событий и использования в функциональных конструкциях.

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

🤔 Что ты знаешь про специфичность селекторов?

Специфичность определяет приоритет CSS-правил при конфликте стилей. Она зависит от типов селекторов: инлайновые стили имеют самый высокий приоритет, за ними следуют ID, классы и псевдоклассы, и, наконец, теги. Чем выше специфичность, тем больше вероятность применения стиля.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое function decloration?

Это способ определения функции в JavaScript, при котором функция объявляется явно с помощью ключевого слова function, за которым следует имя функции. Функции, определенные таким образом, подлежат "поднятию" (hoisting), что означает, что их можно использовать до их фактического объявления в коде.

🚩Синтаксис Function Declaration

function имяФункции(параметр1, параметр2, ...) {
  // Тело функции
  // Инструкции
}

🚩Примеры использования Function Declaration

Основное объявление функции

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

🟠Поднятие (Hoisting)
Функции, объявленные с помощью Function Declaration, поднимаются, что позволяет вызывать их до объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

🚩Отличия между Function Declaration и Function Expression

🟠Поднятие (Hoisting)
Function Declaration: Функции поднимаются и могут быть вызваны до их объявления.

console.log(multiply(2, 3)); // 6

function multiply(a, b) {
  return a * b;
}
     

Function Expression: Функциональные выражения не поднимаются, поэтому их можно использовать только после их определения.

console.log(divide(6, 3)); // Ошибка: divide is not defined

const divide = function(a, b) {
return a / b;
};

🟠Именование
Function Declaration: Обязательно имеют имя.

function subtract(a, b) {
return a - b;
}

Function Expression: Могут быть анонимными или именованными.

const modulo = function(a, b) {
return a % b;
};

🟠Использование в коде
Function Declaration: Часто используются для определения основных функций, которые нужны на протяжении всего кода. Они удобны для структурирования кода и обеспечения доступности функций в любом месте программы.
Function Expression: Более гибкий способ определения функций, который часто используется для создания замыканий, обработки событий и в функциональных конструкциях, таких как методы массивов (map, filter и т.д.).


Function Declaration

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

Function Expression

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Alice')); // Hello, Alice!

🚩Когда использовать

🟠Замыкания и колбэки
Когда вам нужно создать функцию в контексте другой функции, например, передать её как аргумент или вернуть как результат.
🟠Модули и объекты
Когда функции являются частью модуля или объекта и вы хотите ограничить их видимость или управление.

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

🤔 Как отцентровать блок по горизонтали и по вертикали?

Блок можно отцентрировать с помощью flexbox (свойства justify-content: center и align-items: center) или grid. Также используются свойства position: absolute с вычислением смещения или transform: translate. Выбор метода зависит от контекста верстки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое хостинг js?

Это механизм, при котором объявления переменных и функций поднимаются (hoisted) в верхнюю часть своей области видимости перед выполнением кода. Это означает, что переменные и функции могут быть использованы до того, как они были фактически объявлены в коде. Однако важно понимать, что хостинг поднимает только объявления, а не инициализации.

🟠Хостинг переменных
Переменные, объявленные с помощью var, поднимаются в начало своей функции или глобальной области видимости. При этом они инициализируются значением undefined.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

🟠Хостинг с использованием let и const
Переменные, объявленные с помощью let и const, также поднимаются, но они не инициализируются. Попытка доступа к ним до объявления приведет к ошибке ReferenceError из-за временной мертвой зоны (Temporal Dead Zone, TDZ).

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

🟠Хостинг функций
Функции, объявленные с помощью Function Declaration, поднимаются полностью, включая тело функции. Это позволяет вызывать функции до их фактического объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

🟠Хостинг функциональных выражений
Функции, объявленные с помощью Function Expression, поднимаются как обычные переменные. То есть их объявления поднимаются, но сами функции остаются неинициализированными до выполнения строки, где они определены.

console.log(subtract); // undefined
console.log(subtract(5, 3)); // TypeError: subtract is not a function

var subtract = function(a, b) {
  return a - b;
};

console.log(subtract(5, 3)); // 2

🚩Важные аспекты хостинга

🟠Понимание и использование хостинга
Хостинг позволяет писать код, который может использовать функции и переменные до их фактического объявления, что может быть полезно в некоторых случаях. Однако злоупотребление этим механизмом может привести к путанице и трудноуловимым ошибкам.
🟠Лучшие практики
Рекомендуется объявлять все переменные и функции в начале их соответствующей области видимости. Это улучшает читаемость и поддержку кода. Используйте let и const вместо var, чтобы избежать проблем с хостингом и повысить безопасность и предсказуемость кода.

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

🤔 Что такое inline стили, и какой они имеют приоритет?

Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие отличия между новым и старым js?

JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии):

🚩Основные отличия между ES5 и ES6+ (ES2015+)

🟠Объявление переменных: `var` vs `let` и `const`
ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

var x = 10;
if (true) {
 var x = 20;
 console.log(x); // 20
}
console.log(x); // 20   

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции
ES5: Определение функций с использованием ключевого слова function.

var add = function(a, b) {
  return a + b;
};   

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

const add = (a, b) => a + b;   

🟠Шаблонные строки
ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';   

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;   

🟠Деструктуризация
ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;   

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};   

🟠Промисы
ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

fetchData(function(data) {
console.log(data); // 'data'
});

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

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

🤔 Разница между margin и padding?

Margin — это внешнее пространство между элементом и его соседями, а padding — внутреннее пространство между содержимым элемента и его границей. Margin влияет на положение элемента, а padding на размер его внутренней области. Оба свойства помогают управлять расстояниями в дизайне.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 С каким селектором можно добавлять стили на каждый элемент страницы?

Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор *. Этот селектор выбирает все элементы в документе.

🚩Пример использования

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

🚩Объяснение

🟠Выбор всех элементов
Универсальный селектор * выбирает все элементы в DOM (Document Object Model) структуре. Это включает в себя все теги HTML, такие как <div>, <p>, <span>, <a>, и так далее.

🟠Сброс стилей
Пример кода выше сбрасывает отступы (margin) и внутренние отступы (padding) всех элементов на странице до нуля. Это часто делается для того, чтобы избежать неожиданных отступов, которые могут быть заданы по умолчанию браузером. Также устанавливается box-sizing: border-box, что изменяет модель коробки элемента, позволяя лучше контролировать размеры элементов при добавлении отступов и границ.

🟠Глобальное применение
Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов.

🚩Минус

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

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

🤔 Что такое псевдоклассы?

Псевдоклассы — это специальные ключевые слова в CSS, которые позволяют применять стили к элементам в определённых состояниях или на основе их позиции в документе. Например, `:hover` применяется к элементу, когда на него наведен курсор, а `:nth-child()` используется для стилизации конкретных элементов в последовательности. Они расширяют возможности CSS, добавляя динамическую стилизацию без использования JavaScript.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?

Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.

.hidden-element {
    visibility: hidden;
}

🟠visible
По умолчанию, элементы имеют значение visibility: visible;, что означает, что они видимы на странице.
🟠hidden
Когда элементу назначается значение visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.

В этом примере, второй <div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

🚩Зачем это нужно?

🟠Сохранение макета
Когда важно сохранить исходный макет и расположение элементов.
🟠Динамическое управление видимостью
Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.

🚩Альтернативы

🟠display: none;
Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
🟠opacity: 0;
Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.

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

🤔 E.preventDefault() и E.stopPropagation(), для чего нужны?

e.preventDefault() предотвращает стандартное поведение элемента (например, отправку формы при нажатии на кнопку). e.stopPropagation() останавливает дальнейшую передачу события по цепочке DOM, предотвращая его обработку родительскими элементами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как сделать тень падающую от блока?

Используется свойство CSS box-shadow. Это свойство позволяет добавлять тени к элементам, создавая эффект объема и глубины.

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

🚩Объяснение

Основной синтаксис

box-shadow: [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [радиус растяжения] [цвет];   

🟠Параметры
Смещение по горизонтали (x-offset): Определяет смещение тени по горизонтали. Положительное значение сдвигает тень вправо, отрицательное — влево.
Смещение по вертикали (y-offset): Определяет смещение тени по вертикали. Положительное значение сдвигает тень вниз, отрицательное — вверх.
Радиус размытия (blur-radius): Определяет, насколько размытой будет тень. Большее значение создаст более размытые края.
Радиус растяжения (spread-radius): Определяет, насколько тень будет увеличена или уменьшена. Положительное значение увеличивает размер тени, отрицательное — уменьшает.
Цвет (color): Определяет цвет тени. Обычно используется полупрозрачный цвет, чтобы тень выглядела естественно.

🚩Пример с разными параметрами

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    /* Пример тени с разными параметрами */
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
}

🚩С множественными тенями

Свойство box-shadow также поддерживает добавление нескольких теней к одному элементу. Тени разделяются запятыми.

.multi-shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
                -5px -5px 10px rgba(0, 0, 0, 0.2);
}

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

🤔 Что такое JSX?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое 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

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

🤔 Что такое props?

Props (свойства) — это данные, передаваемые от родительского компонента к дочернему в React, которые используются для конфигурации и не могут быть изменены внутри дочернего компонента.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как бы повернул блок на 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), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.

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

🤔 Что такое React?

React — это библиотека JavaScript для создания пользовательских интерфейсов, основанная на компонентах и виртуальном DOM, что делает её эффективной и удобной для масштабирования.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний