👩‍💻 Что такое flexbox? Объясни основные его свойства

Flexbox — современный CSS-модуль, предназначенный для создания гибких и адаптивных макетов. Он упрощает выравнивание и распределение пространства между элементами контейнера, даже при их изменяющихся размерах.

Основные свойства контейнера (display: flex):

- flex-direction: определяет направление главной оси. Возможные значения:
- row — по горизонтали (по умолчанию),
- column — по вертикали,
- row-reverse и column-reverse — в обратном порядке.

- justify-content: управляет выравниванием элементов вдоль главной оси. Значения:
- flex-start,
- flex-end,
- center,
- space-between,
- space-around,
- space-evenly.

- align-items: выравнивание по поперечной оси. Значения:
- stretch (по умолчанию),
- flex-start,
- flex-end,
- center,
- baseline.

- flex-wrap: задает перенос элементов на новую строку. Значения:
- nowrap (по умолчанию),
- wrap,
- wrap-reverse.

Свойства элементов:

- flex-grow: определяет способность элемента расширяться.
- flex-shrink: способность элемента сжиматься.
- flex-basis: начальная основа для размера элемента.

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

.container {
  display: flex;
  flex-direction: row; /* направление элементов */
  justify-content: space-between; /* распределение пространства */
  align-items: center; /* выравнивание по центру */
}
.item {
  flex-grow: 1; /* элемент может расти */
}

Flexbox значительно облегчает создание сложных интерфейсов, обеспечивая гибкость и адаптивность дизайна.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни понятие приведения типов

Приведение типов в TypeScript позволяет явно указывать тип значения, обеспечивая безопасность и предсказуемость кода. Это особенно полезно при работе с данными типа any или при взаимодействии с DOM.

Существует два основных способа приведения типов:

1. Использование угловых скобок:

const someValue: any = "Hello TypeScript";
const strLength: number = (<string>someValue).length; // получаем длину строки

2. Использование ключевого слова as:

const someValue: any = "Hello TypeScript";
const strLength: number = (someValue as string).length; // получаем длину строки

Метод с as предпочтителен при работе с JSX, например, в React. Важно применять приведение типов осознанно, чтобы не нарушить безопасность типов, предоставляемую TypeScript.

Пример работы с DOM элементом:

const inputElement = document.getElementById('username') as HTMLInputElement;
console.log(inputElement.value); // доступ к свойству value

В этом примере элемент с id username приводится к типу HTMLInputElement, что позволяет безопасно обращаться к его свойствам. Приведение типов помогает избежать ошибок компиляции и улучшить автодополнение в редакторах кода, делая разработку более эффективной и надежной.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое пропсы по умолчанию (defaultProps)?

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

Для функциональных и классовых компонентов существуют разные подходы к использованию defaultProps.

Классовый компонент:

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Greeting.defaultProps = {
  name: 'Guest', // значение по умолчанию для пропса name
};

Функциональный компонент:

import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Greeting.defaultProps = {
  name: 'Guest', // значение по умолчанию для пропса name
};

С введением React Hooks и функциональных компонентов, используют значения по умолчанию непосредственно в параметрах функции:

const Greeting = ({ name = 'Guest' }) => {
  return <h1>Hello, {name}!</h1>;
};

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Каково назначение атрибута multiple в элементах select и input?

Атрибут multiple используется в элементах <select> и <input>, позволяя пользователям выбирать несколько значений одновременно. Это расширяет функциональность форм, обеспечивая более гибкий ввод данных.

Элемент <select> с атрибутом multiple:

Позволяет выбирать несколько опций из списка.

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Элемент <input> с атрибутом multiple:

Чаще всего применяется с типом file, позволяя загрузить несколько файлов одновременно.

<input type="file" multiple>

Использование multiple улучшает удобство пользователей при взаимодействии с формами, особенно когда требуется ввод нескольких значений. Важно учитывать обработку таких данных на стороне сервера и обеспечить соответствующую валидацию для предотвращения ошибок.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как выровнять элементы по центру с помощью flexbox?

Для выравнивания элементов по центру с помощью Flexbox используются основные свойства justify-content и align-items. Эти свойства позволяют центрировать элементы как по горизонтали, так и по вертикали, обеспечивая гибкость и адаптивность макета.

Основные шаги для центрирования элементов:

1. Установить для родительского контейнера свойство display: flex.
2. Использовать justify-content: center для горизонтального выравнивания.
3. Применить align-items: center для вертикального выравнивания.

Пример реализации:

.container {
  display: flex; /* активация Flexbox */
  justify-content: center; /* центрирование по горизонтали */
  align-items: center; /* центрирование по вертикали */
  height: 100vh; /* высота контейнера для вертикального центрирования */
  border: 1px solid #ccc; /* граница для наглядности */
}

.item {
  padding: 20px;
  background-color: #f0f0f0;
}

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

Дополнительные настройки:

- Центрирование вдоль нескольких строк: Если элементов много и они располагаются в несколько строк, можно использовать flex-wrap: wrap вместе с justify-content и align-items.

- Центрирование элемента внутри другого гибкого элемента: Свойство align-self: center может использоваться для индивидуального центрирования элемента по поперечной оси.

Использование Flexbox для центрирования элементов значительно упрощает создание адаптивных и аккуратных макетов, обеспечивая высокую совместимость с различными устройствами и экранами.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как получить доступ к элементам массива?

Доступ к элементам массива в JavaScript осуществляется несколькими способами. Основной метод — использование индексов, начиная с нуля.

Пример доступа по индексу:

const fruits = ['яблоко', 'банан', 'вишня'];
console.log(fruits[0]); // выводит 'яблоко'
console.log(fruits[2]); // выводит 'вишня'

В данном примере fruits[0] возвращает первый элемент массива, а fruits[2] — третий.

Методы перебора массива:

1. Цикл for:

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]); // выводит каждый элемент массива
}

Используется для доступа к каждому элементу по индексу.

2. Метод forEach:

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`); // выводит индекс и элемент
});

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

3. Деструктуризация:

const [first, second] = fruits;
console.log(first); // 'яблоко'
console.log(second); // 'банан'

Позволяет извлечь элементы массива в отдельные переменные.

Различные методы доступа к элементам массива позволяют эффективно работать с данными, обеспечивая гибкость и читаемость кода.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое never тип и когда он применяется?

Тип never в TypeScript представляет тип для значений, которые никогда не встречаются. Он используется в случаях, когда функция никогда не возвращает результат, например, всегда выбрасывает ошибку. Также never применим для обеспечения полной проверки исчерпывающих условий в конструкциях switch или if.

Пример использования функции, которая никогда ничего не возвращает:

function throwError(message: string): never {
    throw new Error(message); // Эта функция всегда выбрасывает ошибку
}

Использование never для обеспечения полноты проверок:

type Animal = Fish | Bird;

function getAnimal(): Animal {
    // Логика получения животного
}

function assertNever(x: never): never {
    throw new Error("Unexpected object: " + x); // Обработка неучтенного случая
}

switch (getAnimal()) {
    case "Fish":
        // Обработка кейса
        break;
    case "Bird":
        // Обработка кейса
        break;
    default:
        assertNever(x); // Компилятор проверяет, все ли случаи обработаны
}

Использование типа never помогает повысить надежность кода, гарантируя, что все возможные варианты учтены, и предотвращает неожиданные состояния в приложении.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Для чего используются propTypes?

PropTypes в React используются для проверки типов передаваемых пропсов в компоненты (если в проекте не используется, например, TypeScript для типизации). Это инструмент для обеспечения корректного использования компонентов, позволяющий выявлять ошибки на этапе разработки.

Основные преимущества использования PropTypes:

- Валидация типов пропсов: гарантирует, что переданные пропсы соответствуют ожидаемым типам.
- Улучшение отладки: облегчает обнаружение и исправление ошибок при неправильном использовании компонентов.
- Документация компонентов: служит своеобразной документацией, показывая, какие пропсы ожидает компонент.

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

import PropTypes from 'prop-types';

function UserProfile({ username, age }) {
    return (
        <div>
            <h1>{username}</h1>
            <p>Age: {age}</p>
        </div>
    );
}

UserProfile.propTypes = {
    username: PropTypes.string.isRequired, // Имя должно быть строкой и обязательно
    age: PropTypes.number, // Возраст должен быть числом
};

В этом примере компонент UserProfile ожидает пропсы username и age. Если переданный username не будет строкой или отсутствовать, React выведет предупреждение в консоль.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Для чего используется атрибут rel="noopener noreferrer"?

Атрибут rel="noopener noreferrer" используется в HTML для обеспечения безопасности при открытии ссылок в новых вкладках с помощью target="_blank".

Зачем нужен noopener:

Когда ссылка открывается с target="_blank", новая страница получает доступ к объекту window.opener, что позволяет ей изменять оригинальную страницу через JavaScript. Это может привести к фишинговым атакам или другим уязвимостям. Атрибут noopener предотвращает доступ новой страницы к window.opener, защищая исходный сайт.

Зачем нужен noreferrer:

Атрибут noreferrer дополнительно блокирует передачу информации о реферере (URL исходной страницы) на новую страницу. Это улучшает конфиденциальность пользователя и предотвращает утечку данных о источнике перехода.

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

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Посетить Example.com
</a>

В этом примере ссылка открывается в новой вкладке без предоставления доступа к window.opener и без передачи реферера. Это стандартная практика для повышения безопасности веб-приложений и предотвращения потенциальных атак через внешние ссылки.

Использование rel="noopener noreferrer" является важным аспектом безопасной разработки веб-приложений, особенно при работе с внешними ресурсами.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое CSS Grid и какие задачи он решает?

CSS Grid — это модуль компоновки в CSS, позволяющий создавать сложные 2D макеты веб-страниц. Он обеспечивает гибкость и контроль над размещением элементов как по строкам, так и по колонкам, что значительно упрощает процесс разработки интерфейсов.

Основные задачи, которые решает CSS Grid:

- Создание адаптивных макетов: позволяет легко адаптировать дизайн под разные размеры экранов без сложных медиазапросов.
- Организация контента: упрощает распределение элементов в сетку, обеспечивая четкое и структурированное размещение.
- Улучшение семантики кода: делает код более читаемым и поддерживаемым за счет декларативного описания макета.

Пример использования CSS Grid:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Создание трех колонок одинаковой ширины */
    grid-gap: 20px; /* Промежуток между элементами */
}

.item {
    background-color: #f0f0f0;
    padding: 10px;
}

В этом примере контейнер определен как сетка с тремя равными колонками и промежутками между элементами. Каждый элемент внутри контейнера будет автоматически располагаться согласно заданной сетке.

CSS Grid значительно упрощает создание сложных и адаптивных макетов, делая процесс разработки более эффективным и организованным.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать generics (обобщенные типы)?

Generics в TypeScript позволяют создавать компоненты и функции, работающие с различными типами данных, обеспечивая при этом типовую безопасность. Это инструмент для повышения гибкости и повторного использования кода без потери проверки типов на этапе компиляции.

Преимущества использования Generics:

- Повторное использование кода: позволяет писать универсальные функции и классы, которые работают с любыми типами.
- Типовая безопасность: обеспечивает проверку типов во время компиляции, предотвращая ошибки.
- Улучшенная читаемость и поддержка кода: делает намерения разработчика явными, облегчая понимание кода.

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

// Функция, возвращающая переданный аргумент
function identity<T>(arg: T): T {
    return arg; // Возвращает аргумент того же типа
}

// Использование функции с различными типами
const num = identity<number>(42); // Тип number
const str = identity<string>("Hello"); // Тип string

// Generic интерфейс
interface GenericBox<T> {
    value: T; // Значение типа T
}

const box: GenericBox<string> = { value: "Box content" }; // Тип string

В этом примере функция identity использует обобщенный тип T, позволяя ей возвращать значение того же типа, что и аргумент. Интерфейс GenericBox демонстрирует, как можно создавать обобщенные структуры данных. Generics значительно улучшают гибкость и надежность кода, делая его более адаптируемым к различным сценариям использования.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое форма в React?

Форма в React представляет собой средство сбора пользовательского ввода, управляемого компонентами React. В отличие от стандартных HTML-форм, React позволяет более гибко контролировать состояние и поведение формы, что улучшает взаимодействие пользователя с приложением.

Контролируемые компоненты:

В контролируемых компонентах состояние формы хранится в состоянии компонента React. Это позволяет легко отслеживать и валидировать ввод.

import React, { useState } from 'react';

function MyForm() {
    const [value, setValue] = useState('');

    const handleChange = (e) => {
        setValue(e.target.value); // Обновление состояния при изменении ввода
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(value); // Обработка отправки формы
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={value} onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
}

Неконтролируемые компоненты:

Используют рефы (refs) для доступа к значениям формы без управления состоянием через React.

import React, { useRef } from 'react';

function MyForm() {
    const inputRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(inputRef.current.value); // Получение значения через ref
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" ref={inputRef} />
            <button type="submit">Submit</button>
        </form>
    );
}

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как добавить элемент в конец массива?

Добавление элемента в конец массива является распространенной операцией в JavaScript и часто используется в разработке фронтенда.

Использование метода push:

Метод push добавляет один или несколько элементов в конец существующего массива и возвращает новую длину массива. Этот метод изменяет оригинальный массив.

const fruits = ['Apple', 'Banana'];
fruits.push('Orange'); // Добавление 'Orange' в конец массива
console.log(fruits); // Вывод: ['Apple', 'Banana', 'Orange']

Использование оператора spread:

Оператор распространения позволяет создавать новый массив, добавляя элементы без изменения оригинального массива. Это особенно полезно в контексте иммутабельности, например, при работе с React.

const fruits = ['Apple', 'Banana'];
const newFruits = [...fruits, 'Orange']; // Создание нового массива с добавлением 'Orange'
console.log(newFruits); // Вывод: ['Apple', 'Banana', 'Orange']

Использование метода concat:

Метод concat объединяет два или более массивов, возвращая новый массив без изменения исходных.

const fruits = ['Apple', 'Banana'];
const newFruits = fruits.concat('Orange'); // Объединение массивов с добавлением 'Orange'
console.log(newFruits); // Вывод: ['Apple', 'Banana', 'Orange']

Выбор метода зависит от конкретных требований проекта. Метод push эффективен для изменения существующих массивов, тогда как оператор распространения и concat предпочтительны для создания новых массивов, что соответствует принципам иммутабельности в современных фреймворках.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Для чего используются атрибуты min и max в элементах ввода?

Атрибуты min и max в input-элементах используются для определения минимально допустимого и максимального допустимого значений, которые пользователь может ввести. Эти атрибуты особенно полезны при работе с типами ввода, такими как number, range, date и другими, где важны ограничения на вводимые данные.

Преимущества использования min и max:

- Валидация данных на клиенте: предотвращает ввод значений вне допустимого диапазона еще до отправки формы.
- Улучшение пользовательского опыта: предоставляет пользователям визуальные подсказки о допустимых значениях.
- Снижение количества ошибок: минимизирует риск ошибок ввода, обеспечивая корректность данных.

Пример использования с типом number:

<form>
    <label for="age">Возраст:</label>
    <input type="number" id="age" name="age" min="18" max="99">
    <button type="submit">Отправить</button>
</form>

Пример использования с типом date:

<form>
    <label for="birthday">Дата рождения:</label>
    <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-18">
    <button type="submit">Отправить</button>
</form>

Использование атрибутов min и max способствует созданию более надежных и удобных форм, обеспечивая контроль над вводимыми данными.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни разницу между unknown и any типами

В TypeScript типы any и unknown используются для представления значений неопределённого типа, но между ними есть важные различия.

Тип any отключает все проверки типов. Использование any позволяет присваивать любое значение без ограничений, что может привести к ошибкам во время выполнения.

let value: any;
value = 10;
value = "строка";
value.toFixed(); // Ошибка во время выполнения, если value не число

В отличие от any, тип unknown более безопасен. Значение типа unknown нельзя использовать напрямую без предварительной проверки его типа. Это обеспечивает дополнительный уровень безопасности и предотвращает неожиданные ошибки.

let value: unknown;
value = 10;
value = "строка";

if (typeof value === "string") {
  console.log(value.toUpperCase()); // Безопасно
}

Использование unknown рекомендуется вместо any, когда точный тип значения неизвестен, но требуется сохранить безопасность типов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни разницу между flexbox и CSS Grid

Flexbox и CSS Grid – современные CSS-модули для построения макетов, но они решают разные задачи.

Flexbox ориентирован на однострочные или одностолбцовые макеты. Он идеально подходит для распределения пространства вдоль одной оси (горизонтальной или вертикальной) и управления выравниванием элементов.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Grid предназначен для двухмерных макетов, позволяя работать как с строками, так и со столбцами одновременно. Это мощный инструмент для создания сложных макетов страниц.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Ключевые различия:
- Ось: Flexbox – односторонняя, Grid – двухсторонняя.
- Применение: Flexbox подходит для компонентов, Grid – для целых страниц.
- Контроль: Grid обеспечивает более точное размещение элементов.

Выбор между Flexbox и Grid зависит от сложности макета и требований к расположению элементов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как создать ссылку для отправки электронной почты в HTML?

Для создания ссылки для отправки электронной почты в HTML используется протокол mailto: в атрибуте href тега <a>. Это позволяет пользователям при клике на ссылку автоматически открыть почтовый клиент с предзаполненными полями.

Пример базовой ссылки:

<a href="mailto:example@example.com">Отправить письмо</a>

При клике откроется почтовый клиент с полем "Кому" заполненным адресом example@example.com.

Добавление темы и тела письма:

Можно предварительно задать тему и текст письма, используя параметры subject и body.

<a href="mailto:example@example.com?subject=Вопрос&body=Здравствуйте, хотел бы узнать больше о вашем продукте.">Связаться</a>

Пояснения:

- subject: задаёт тему письма.
- body: задаёт текст сообщения.

Преимущества использования mailto::

- Простота реализации.
- Улучшение пользовательского опыта за счёт быстрого доступа к почтовому клиенту.

Особенности:

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

Использование mailto: ссылок является эффективным способом облегчить связь пользователей с разработчиками или службой поддержки через электронную почту.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как удалить последний элемент из массива?

Для удаления последнего элемента из массива в JavaScript используется метод pop(). Этот метод изменяет исходный массив, удаляя последний элемент и возвращая его значение.

let array = [1, 2, 3, 4];
const removedElement = array.pop();
console.log(array); // [1, 2, 3]
console.log(removedElement); // 4

Альтернативным способом является использование метода splice. Он позволяет удалить элементы из массива по указанному индексу.

let array = [1, 2, 3, 4];
const removedElements = array.splice(-1, 1);
console.log(array); // [1, 2, 3]
console.log(removedElements); // [4]

Метод pop предпочтителен для простой операции удаления последнего элемента из массива из-за его простоты и читаемости.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Чем отличаются контролируемые и неконтролируемые компоненты?

Контролируемые и неконтролируемые компоненты в React отличаются способом управления состоянием формы.

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

function ControlledInput() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

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

function UncontrolledInput() {
  const inputRef = useRef();
  
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  
  return (
    <input ref={inputRef} />
  );
}

Основные различия:
- Управление данными: Контролируемые – через состояние, неконтролируемые – через DOM.
- Контроль и валидация: Контролируемые обеспечивают больший контроль и удобную валидацию.
- Простота использования: Неконтролируемые проще в реализации для простых форм.

Выбор между ними зависит от требований к контролю над формой и сложности приложения.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни использование тега <nonoscript>

Тег <nonoscript> используется для предоставления альтернативного контента пользователям, у которых отключен JavaScript, или браузерам, не поддерживающим его. Это позволяет улучшить доступность и SEO сайта, обеспечивая базовый функционал независимо от выполнения скриптов.

Применение:

1. Отображение сообщения:

<nonoscript>
  Ваш браузер не поддерживает JavaScript или он отключен. Для корректной работы сайта включите JavaScript.
</nonoscript>

2. Альтернативный контент:

<nonoscript>
  <img src="static-image.jpg" alt="Статическое изображение для пользователей без JavaScript">
</nonoscript>

Преимущества:

- Улучшение доступности: Обеспечивает доступ к важной информации для пользователей без JavaScript.
- SEO: Помогает поисковым системам понимать альтернативный контент.
- Фолбэк решения: Предоставляет альтернативные пути взаимодействия при отсутствии скриптов.

Особенности:

- Содержимое <nonoscript> отображается только в том случае, если JavaScript отключен или не поддерживается.
- Использовать этот тег стоит для важной информации или функционала, критичного для работы сайта.

Использование <nonoscript> способствует созданию более универсальных и надежных веб-приложений, учитывающих различные сценарии использования.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как создать сетку с помощью CSS Grid?

Создание сетки с помощью CSS Grid начинается с задания контейнера как grid и определения строк и столбцов.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 200px;
  gap: 10px;
}

В этом примере:

- display: grid; превращает элемент в grid-контейнер.
- grid-template-columns: repeat(3, 1fr); создаёт три столбца одинаковой ширины.
- grid-template-rows: 200px 200px; задаёт две строки высотой по 200 пикселей.
- gap: 10px; устанавливает расстояние между ячейками сетки.

Размещение элементов:

Элементы внутри контейнера автоматически размещаются в ячейках сетки по порядку. Можно явно позиционировать элементы с помощью свойств grid-column и grid-row.

.item {
  grid-column: 1 / 3;
  grid-row: 1;
}

Этот код размещает элемент item от первого до третьего столбца в первой строке.

Преимущества CSS Grid:

- Двумерное построение макетов (строки и столбцы).
- Простое и интуитивное размещение элементов.
- Гибкость в создании адаптивных дизайнов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈