Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Frontend > Web (HTML, CSS, сети) > Flashcards

Web (HTML, CSS, сети) Flashcards

1
Q

Разница между протоколами TCP и UDP?

A

TCP гарантирует доставку данных, но медленнее чем UDP. UDP может применяться, например, в потоковом аудио и видео.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Методы простой оптимизации загрузки сайтов и JS приложений (производительность)

A
  1. Использование async и defer.
  2. Оптимизация изображений - использование svg, сжатие и сам размер изображений.
  3. Конкатенация и углификация файлов.
  4. Инлайн стили (например критический CSS)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Анализ производительности (какие есть метрики)

A
  • Скоростные метрики:

TTFB - время до получения первого байта (вычисления на сервере + сеть)

FCP - время до того как на экране появится хоть что-нибудь

LCP - время до того, как на экране появится полезный контент

  • Полный вес сайта
  • Пользовательские метрики:

Показатель отказов - процент покинувших сайт со страницы входа или посмотревших не более 1 страницы.

Конверсия - полезное действие.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

XSS - как провести атаку, как защититься

A

Атака:

Исполнение вредоносного JS-кода на сайте не предусмотренным способом. Например через ввод каких-то данных, которые отображаются на сайте: строка поиска, комментарий, параметры поиска в адресной строке. Получение таким способом конфиденциальных данных, например токены авторизации, авторизационные куки, логин-пароли.

Защита:

Экранирование полученный от пользователя данных, валидация ввода, httponly cookies.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

GraphQL (знать, что это)

A

Язык запросов. Позволяет получать данные по конкретному запросу, как в SQL, а не целыми “пластами”, ограничиваясь только предоставленными нам эндпоинтами, как в REST.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Git Flow

A

Методика работы с гит. В ней создаётся отдельная ветка для разработки, а от неё создаются ветки для фич. После того как фича готова делается запрос на слияние. Код перед слиянием проходит ревью.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Что такое кросс-браузерность?
Какие инструменты используются для этого?

A

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

Инструменты:
* префиксы
* обнуление или нормализация
* полифилы

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Из чего состоит запрос HTTP?

A
  • Стартовая строка: метод, URN и версия протокола.
  • Заголовки: параметры запроса. Тут же указывается заголовок Host.
  • Тело запроса: состав сообщения, которое отправляется.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Какие методы есть в HTTP?

A

Основные: GET (получение), POST (отправка), PUT (замена, обновление), DELETE (удаление), PATCH (частичное обновление)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Чем HTTP отличается от HTTPS?

A

HTTPS - с шифрованием. В нём участвуют сертификаты, которые должны быть подтверждены центром сертификации и обмен ключами по принципу “рукопожатия” (handshake, TSL, SSL).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Что такое SSL и TLS? Зачем они используются в веб-разработке?

A

Это протоколы шифрования. Используются для:

  • защита передаваемых данных от несанкционированного доступа
  • аутентификация сервера сертификатом - позволяет предотвратить подмену сервера
  • предотвращает подделку данных
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Как работает DNS?

A

Есть дерево серверов, где каждый отвечает за свою зону. При поиске адреса через DNS сначала идёт обращение к корневому серверу, который переадресует запрос далее, например в ru регион, тот далее, например к серверу yandex.

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Что такое REST?

A

Архитектурный подход для создания API.

API, полностью соответствующий правилам будет RESTful.

  1. Клиент-сервер
  2. Отсутствие состояния
  3. Кэширование
  4. Единообразие интерфейса
    1. Основан на ресурсах
    2. Манипуляция над ресурсами через представления (клиент представляет как должно выглядеть, сервер решает)
    3. Само-документируемые сообщения (в ответах и запросах есть вся необходимая информация)
    4. Гипермедиа как средство изменения состояния приложения (в ответах есть URI ресурсов, которыми можно воспользоваться)
  5. Слои
  6. [опционально] Код по требованию
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Структура URL?

A

URI - https://domain.com/some/url?q=foo&bar=baz

URL - https://domain.com

URN - some/url

URI = URL + URN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Что могут в себе содержать заголовки и Cookies?

A

Популярные заголовки:
* Host
* User-Agent описание клиента - браузер, ос итд
* Accept указывается формат в котором клиент принимает ответ, “любое” указывается как “/”
* Authorization
* Cookie

Cookie хранятся в виде пар ключ-значение. Небольшие фрагменты данных, которые могут выступать в виде идентификатора пользователя или, например хранить в себе предпочтения пользователя.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Какие типы кодов ответов HTTP есть?

A

100 - информационные

200 - успешное выполнение запроса

300 - переадресация

400 - ошибка клиента

500 - ошибка сервера

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Что такое прогрессивная отрисовка? Какие технологии используются?

A

Кусочки HTML генерируются на сервере и отсылаются браузеру в порядке приоритетности (например <header> генерируется и отсылается в первую очередь).

В прогрессивной отрисовке используются техники ленивой загрузки и приоритизации контента (например не загружать изначально все CSS-стили в <head>, а только важные, остальные загрузить в конце <body>).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Для чего предназначены линтеры (code style linting tool)?

A

Для проверки кода на стилистические и программные ошибки.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.

A
  1. Ввод адреса
  2. Поиск адреса в кеше DNS
  3. Если его нет, то запрос на сервер DNS
  4. Установка TCP соединения
  5. HTTP запрос от браузера
  6. Сервер получает запрос, готовит и отправляет ответ
  7. Браузер получает и отображает контент
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Что такое History API в браузере?

A

Даёт доступ к управлению историей браузера в рамках текущей сессии. Новая сессия - новая вкладка или окно.

Можно двигаться по истории с помощью объекта window.history, можно двигаться вперёд и управлять содержимым.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Объясните разницу между cookie, sessionStorage и localStorage (web storage).

A

Механизмы хранения ключ-значения. Могут хранить только строки.

sessionStorage - используется через JS, доступен только в рамках вкладки и до её закрытия

localStorage - используется через JS, доступен в рамках всего сайта для всех вкладок и после закрытия вкладок

cookie - может задаваться сервером или через JS, срок хранения настраивается, отправляется на сервер при каждом запросе

Ключевые отличия:

  • данные из storage не отправляются на сервер при каждом обращении
  • сервер не может изменять данные в storage, только на фронте через JS
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Что такое безопасные cookies (Secure cookies)? Что такое HttpOnly cookies?

A

Безопасные cookies - только по HTTPS.

HttpOnly - нельзя работать через JS с cookies.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Что такое IndexedDB в браузере? Преимущества IndexedDB?

A

Это база данных в браузере. Позволяет хранить больше данных, чем localStorage и более сложная в работе с ней, но и больше контроля.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Механизм установки сеанса между клиентом и сервером?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Что Такое API?

A

Aplication Programming Interface - программный интерфейс приложения.

Служит для возможности взаимодействия с программой на уровне языков программирования. Набор методов через которые интерфейс может взаимодействовать с базой данных. Обычно используются CRUD операции

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Что такое CDN?

A

Content Delivery Network - сеть доставки контента.

Служит для ускорения передачи контента клиенту за счёт того что серверов много и выбирается ближайший с наивысшей скоростью.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Что такое IP-адрес?

A

Уникальный сетевой адрес.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Разница между host и domain?

A

Host - тот кто содержит на себе сервер или сайт.

Domain - доменное имя, уникальное имя адреса, которое сопоставляется с ip-адресом.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Почему очищать кэш важно? Как это можно сделать?

A

Когда сайт обновляется, если в кеше будут старые файлы, то возможна ситуация в которой приложение может сломаться из-за ссылки на более несуществующий объект (изменённое имя) или что-то подобное.

Делается это путём присваивания файлу другого имя.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Разница между идентификацией, аутентификацией, авторизацией?

A

Идентификация - процедура установления личности или сущности (кто это?).

Аутентификация - это подтверждение личности, например вводом логина и пароля (действительно ли это?).

Авторизация - предоставление прав (что может делать?)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Виды аутентификации?

A

Токен - предоставляется токен, последующие запросы происходят с ним.

Другие виды: авторизация через социальные сети, двухфакторная, биометрическая, с использованием сертификата, одноразовый пароль на телефон.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Какие меры безопасности следует принять при работе с cookie на стороне клиента?

A

Флаг Secure (только HTTPS)

Флаг HttpOnly (запрет на работу с cookie через JS)

Атрибут SameSite:
strict - полностью блокирует отправку кук на другие сайты
lax - разрешает отправку при переходе с одного на другой
none - разрешает отправку всегда, но обязательно должен быть Secure

Срок годности cookie

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Что такое прогрессивный SSR?

A

Server Side Rendering - прогрессивный рендеринг на стороне сервера.

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?

A
  1. Новые семантические элементы
  2. Мультимедиа - поддержка аудио и видео
  3. Графика - стало возможно делать игры и диаграммы
  4. API для веб-приложений - геолокация, хранение в браузере и другие.
  5. Поддержка устройств - совместимость независимо от самого устройства.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Можете ли вы описать некоторые методы SEO?

A

существует множество методов для улучшения поисковых метрик, вот несколько:

  • повышение производительности и скорости ответа
  • семантическая вёрстка с правильной структурой и микроразметкой, альт-атрибуты и метатеги
  • настройка robots.txt (там можно указать какие страницы индексировать, какие нет, а так же указать карту сайта)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Как можно оптимизировать загрузку внешних ресурсов на странице?

A

Можно использовать кеширование, ленивую загрузку (lazy-loading), поддомены. Если используется HTTP/1.1, для HTTP/2 это неактуально.

Можно оптимизировать сборку JS-кода, минифицировать скрипты, использовать CDN, gzip-сжатие, css- и svg-спрайты, настроить кеширование.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Сколько ресурсов браузер может одновременно загружать с одного домена?

A

Для http/1.1 было ограничение в 6 соединений. На http/2 ограничений нет.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Почему лучше загружать ресурсы для сайта с нескольких доменов?

A

Актуально только для HTTP/1.1, так как в нём ограничение на количество соединений с одним доменом.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

В чём различия между Long-Polling, Websockets и Server-Sent Events?

A

Long-Polling - клиент делает запрос, сервер отвечает как только есть новая информация, клиент тут же делает новый запрос.

Websokets - двухсторонняя постоянная связь по протоколу websoket

Server-Sent Events - тоже постоянная связь, но односторонняя в сторону клиента от сервера.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Что такое Веб-компоненты?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Что означает CORS и какую проблему решает?

A

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

CORS (Cross-Origin Resource Sharing) - механизм, который позволяет браузеру загружать ресурсы с домена, отличного от того, что используется в данный момент. Работает посредством установки дополнительных HTTP заголовков со стороны сервера.

Сервер говорит браузеру откуда можно брать данные.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

Что такое Content Security Policy (CSP)?

A

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

Защищает от XSS.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

Какие основные угрозы безопасности могут возникать на веб-страницах?

A
  • Межсайтовый скриптинг (XSS) - внедрение кода на страницу (например комментарий), который выполняется на странице пользователя.
  • Межсайтовая подделка запроса (CSRF) - атака при которой запросы отправляются от имени аутентифицированного пользователя без его ведома.
  • Инъекции кода (Injections) - вредоносный код внедряется в sql запросы или операции ОС.
  • Утечка информации - неправильная конфиругация прав и отсутствие наименьших привелегий.
  • Неправильная конфигурация безопасности.
  • Уязвимости браузера и его расширений - утаревшие версии браузеров и расширений могут содержать неисправленные уязвимости.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Что такое принцип наименьших привилегий (POLP)?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

Назовите критические этапы рендеринга?

A

Последовательность шагов которые выполняет браузер, когда HTML, CSS и JS преобразуются в пиксели, которые видны на экране.

  • Document Object Model - трансформирование HTML в DOM-дерево.
  • CSS Object Model - если HTML документ содержит стили, то при парсинге они запрашиваются и участвуют в построении CSS OM.
  • JavaScript - если HTML документ содержит тег <script>, то происходит либо исполнение этого скрипта, либо запрос и исполнение сторонних подключенных скриптов.
  • Accessibility Tree - при парсинге HTML анализируются атрибуты role и ARIA. В результате чего происходит построение дерева доступности.
  • Render Tree - на данном этапе происходит объединение DOM и CSS OM. Для построения дерева рендера браузер проверяет каждый узел дом, начиная от корневого и определяет какие CSS правила нужно присоединить к этому узлу.
  • Layout/Reflow - после того как дерево рендера построено, определяется где и как на странице будут спозиционированы элементы. На основании размеров элемента определяется его положение.
  • Painting/Repaint - когда дерево рендера создано, компоновка произошла происходит покраска веб-страницы, согласно заданным стилям.
  • Compositing - отрисовка слоёв в правильном порядке (правильное наложение и т.д.). Элементы выстраиваются друг относительно друга по уровням или потокам.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

Объясните разницу между раскладкой (layout), painting и композитингом (compositing).

A
  • Layout: расчёт места для объекта на основе правил.
  • Paint: рисовка пикселей для отображения визуальных элементов.
  • Compositing: рисовка слоёв в правильном порядке (правильное наложение и т.д.).
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

Что такое HTML и для чего он используется?

A

HyperText Markup Language - язык гипертекстовой разметки. Нужен для размещения на странице элементов: текст, картинки, таблицы, видео. Браузер умеет его интерпретировать.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Что такое атрибуты в HTML? Как они используются в элементах?

A

Атрибут - это модификатор HTML элемента. Изменяет существующий функционал или предоставляет новый. Меняет или уточняет статус.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

Какие глобальные атрибуты есть в HTML?

A

Глобальные атрибуты - те, которые можно применить почти к любому элементу.

Например
- class
- hidden
- data-
- contenteditable
- tabindex

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

Опишите базовую структуру HTML-страницы?

A 
<!doctype html> // обязательное указание типа документа
<html> // корневая обёртка страницы
	<head> // подключение шрифтов, стилей, seo итд
		<meta charset=”UTF-8”>
		<title>Document</title>
	</head>
	<body> // основная разметка
		<h1>Hello world</h1>
	</body>
</html>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

Что такое валидация? И какие типы проверок HTML документа вы знаете?

A

Валидация - проверка документа программой-валидатором на соответствие спецификациям.

Валидатор проверяет:

  • dtd - document type definition. Документ должен содердать доктайп и в соответствии с типом документа будет применяться соответствующие правила.
  • проверка синтаксиса
  • проверка вложенности
  • проверка на наличие посторонних элементов
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

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

A

Просто кнопка - <button>...

Подтверждение формы - <button type="submit">... или <input type="submit" value="button">

Ссылка - <a href="#">...

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

Что такое инлайновый стиль? Можно ли его переопределить?

A

Инлайновый стиль - стиль, указанный в HTML через атрибут style. Переопределить можно только с помощью important в CSS.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

Объясните, как браузер определяет, на какие элементы накладывать CSS стили?

A

Браузер отсеивает элементы по селекторам, но ключевая разница в том что он это делает справа налево.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

Объясните, что такое блочный контекст форматирования и как он работает.

A

Это часть механизма отображения веб страницы в CSS. Регион в котором блоки размещаются в привычном для себя порядке.

Те, кто могут его создать:

  • корневой элемент <html>
  • float ≠ none
  • position: absolute или fixed
  • части таблиц
  • и другие
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?

A

FOUC (Flash Of Unstyled Content) - это появление неоформленного контента при загрузке.

Вставить в <head> критичный CSS (минимальный набор стилей для первого экрана) или скрыть контент, пока он не загрузится.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

Что такое ARIA атрибуты? Для чего они.

A

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

role - можно задать роль тега, например роль navigation сделает из тега <nav>

aria-свойство - состояние или свойство, которое начинается с aria-, указывает на текущее состояние элемента, например состояние aria-hidden

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

Что такое микроразметка и для чего она нужна?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

Объясните разницу между
<script>
<script async>
<script defer>

A

script - отрисовка HTML блокируется, скрипт выполняется немедленно, после этого возобновляется отрисовка

async - скрипт будет получен и выполнен параллельно с отрисовкой HTML (подходит для скриптов аналитики или рекламы)

defer - скрипт будет получен параллельно с отрисовкой HTML, но выполнен после того как загрузится вся страница

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

Чем отличаются размеры px, em, rem, vw, vh?

A

px - базовая, абсолютная

em - относительно шрифта

% - относительно размеров родителя

rem - относительно шрифта <html>

vw - 1% ширины окна браузера.

vh - 1% высоты окна браузера.

vmin - 1% меньшего размера окна браузера по высоте или ширине.

vmax - 1% большего размера окна браузера по высоте или ширине.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

Объясните, что такое z-index и как формируется контекст наложения.

A

Он нужен для позиционирования элементов по условной оси Z (глубина).
Не действует на position: static.

Самый базовый контекст наложения это тег <html>. Так же есть ряд условий при которых формируется новый контекст внутри предыдущего. Вот самые важные из них:
- position: absolute и relative с значением z-index !== auto
- флекс-элемент с значением z-index !== auto
- элемент с opacity меньше 1
- элемент с transform не none

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?

A

visibility: hidden (в отличии от display: none оставляет доступность для читалки и поисковых роботов)

height и width: 0px

opacity: 0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

Как можно скрыть элемент не используя CSS и JS?

A

Возможно использовать атрибут hidden - использовать его не рекомендуется. По сути это равно display: none.

64
Q

Что делает {box-sizing: border-box;}? В чем его преимущества?

A

По умолчанию box-sizing: content-box и при таком значении размеры элемента определяются контентом без учёта отступов и толщины рамки. Если border-box, то размеры учитывают отступ и рамку, что сильно удобнее.

65
Q

Чем border отличается от outline?

A

Различие в том, что outline не является частью элемента и не взаимодействует с блоками.

66
Q

Что означает свойство display и можете ли вы привести несколько примеров его использования?

A

Определяет то, как элемент должен быть показан в документе.

none, block, inline-block, flex, grid, table

67
Q

Объясните что такое блочная модель.

A

Правила по которым браузер определяет размеры элемента. Ширина, высота, отступы (внутренние и внешние) и рамка.

68
Q

Все виды позиционирования и их различия (position).

A

static - значение по умолчанию

fixed - убирается из потока, позиционируется относительно окна браузера

absolute - убирается из потока. Позиционируется относительно элементов с не стандартной позицией. Если такого нет, то относительно окна браузера.

relative - тень не убирается из потока, позиционирование относительно своего текущего положения

sticky - в доступной зоне родителя ведёт себя как fixed, но за границу родителя не выходит

69
Q

В чем разница между блочным (block, блок), строчным (inline, инлайн) и блочно-строчным элементом (inline-block, инлайн-блок)?

A

inline - не занимает всю строчку (подстраивается под размер контента), находится в строке, нельзя изменять высоту и ширину

block - занимает всю строчку, можно изменять ширину и высоту

inline-block - располагается в строке (не занимает всё строчку), но при этом можно изменять ширину и высоту

70
Q

Как можно скрыть контент через overflow?

A

visible - стандартное значение

hidden - скрывает

scroll - показывает скрол-бар

auto - скрол-бар появится при переполнении

71
Q

Объясните, что такое плавающие элементы (floats) и как они работают.

A

Нужны для “обтекания” текстом. Элемент сдвигается влево или вправо до границы родителя и другого плавающего элемента. Если по горизонту не хватает места, то двигается вниз, пока не поместится.

72
Q

Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?

A

С помощью clear можно указать игнорировать плавающий элемент и двигаться дальше вниз. Значения могут быть none (отмена clear), left, right, both и inherit.

Так же пригодится для поправки выпадающих элементов при обтекании (псевдоэлемент + clear: both)

73
Q

Пользовались ли вы Flexbox или Grid?

A

Использую flex постоянно. Grid, когда нужна большая адаптивная сетка товаров.

74
Q

Для чего нужен doctype?

A

Это декларация типа документа. Так браузер узнает, на каком языке и с какими технологиями он был создан. Если не указать - страница может отобразиться не корректно. Актуальный doctype - просто html. Без него браузер переключится в режим совместимости со старым кодом.

75
Q

Где определяется кодировка страницы?

A

В теге <meta charset='utf-8'> в <head>.

76
Q

Как открыть ссылку <a> в новом окне?

A

Для ссылки <a> добавить атрибут target="_blank".

77
Q

Какие виды <input> есть?

A

text - ввод букв и цифр

password - для паролей (звёздочки)

email - ввод email

number - только числа

button и submit - подтверждение формы

checkbox и radio - галочка и точка

date, month, daytime, local - дата

78
Q

Для чего используется элемент <datalist>?

A

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

79
Q

Keyframes для чего нужен и как использовать.

A

Через @keyframes название-анимации описываются ключевые кадры для применения CSS анимации.
Могут определяться как начальная и конечная точка (from, to), так и процентно (0%, 100%)
Например:

@keyframes circle-to-square {
  from {
    border-radius: 50%;
    background-color: red;
  }
  to {
    border-radius: 0;
    background-color: blue;
  }
}

Саму анимацию затем можно будет применить через её имя

animation-name: название-анимации;
animation-duration: 1s;
80
Q

В каком случае вы предпочтёте использовать translate() вместо абсолютного позиционирования и наоборот? И почему?

A

Для анимации - translate из-за большой частоты кадров. Для обычного позиционирования - position.

81
Q

Как вы реализуете макет, который использует нестандартные шрифты?

A

Подключить эти шрифты через @font-face для каждого font-weight.

82
Q

Что такое селектор? Какие селекторы существуют?

A

Часть CSS правила. Сообщает какому элементу будет применено правило.

Простые:

.class {} // класс

#id {} // id

p {} // тег

a[href="test"] {} // атрибут

Составные:

h1, h2, span {} // через запятую, перечисление

div p {} // через пробел, селектор потомка

li > a {} // дочерний элемент (потомок)

a:hover {} // псевдокласс состояние

li:nth-last-child(2n) // псевдокласс условие

div::before // псевдоэлемент

83
Q

Что такое селектор атрибутов?

A

В квадратных скобках можно указать нужное значение атрибута, например input[type=password] или button[disabled]

84
Q

Что такое специфичность CSS-селекторов и как она работает?

A

Если на элемент применяется несколько стилей, то применится тот, у которого выше специфичность.

Приоритет специфичности:
1. инлайновые стили
2. идентификаторы (#)
3. классы + псевдоклассы + селекторы атрибутов (.class, :hover, input[cheked])
4. селекторы по тегу + псевдоэлементы (div, ::after)

85
Q

Как выбрать элемент, следующий за каким-то?

A

Надо использовать +, например input + span выберет только <span> после <input>.

86
Q

Разница между классом и идентификатором в CSS?

A

id - может быть только 1 (уникальный)

у id больше вес селектора

87
Q

Как отцентрировать элемент?

A

Текст внутри дива или инлайн - text-aling: center;

Блок внутри другого блока - margin: auto;

Вертикально текст через высоту строки - line-height: высота-блока;

Через флекс.

88
Q

Для чего нужны атрибуты, начинающиеся с data-?

A

Для добавления к HTML-элементам своих собственных атрибутов. Использование без data- не рекомендуется из-за того что используемое название например может появиться в новых версиях HTML. К таким атрибутам есть доступ из JS и из CSS (можно выбрать элементы содержащие нужный атрибут или его конкретное значение).
В CSS доступ получается через селектор атрибута:

[data-age="46"] {
  color: red;
}

В JS доступ получается через метод getAttribute() или используя объект dataset

const article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
89
Q

На что необходимо обратить внимание при разработке мультиязычных сайтов?

A
  • использование атрибута lang
  • перенаправление на нужную версию сайта
  • удобное переключение языка
  • разный размер слов на разных языках
  • текст на картинках
  • разный порядок слов и направление чтения
90
Q

В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?

A

Сброс это обнуление стилей в “никакое” значение. Нормализация - приведение стилей к одинаковому отображению во всех браузерах. Мне комфортнее работать с обнулением, так как получаю более полный контроль.

91
Q

Как вы решаете стилевые проблемы, связанные с особенностями браузеров?

A

Normalize и reset, а так же autoprefixer.

92
Q

Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями? Какие приёмы и процессы вы при этом используете?

A

Использование @supports.

Использование Autoprefixer.

Использование сайта caniuse.com

Graceful Degradation (разработка с самыми новыми технологиями, затем упрощение для конкретных браузеров) и Progressive Enhancement (разработка самыми простыми вещами, которые будут работать везде, затем добавление новых технологий)

93
Q

Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?

A

Да, приходилось. Определялись брекпоинты для перехода к мобильному интерфейсу (или переходу к десктопному, если это mobile-first) и писались медиазапросы. Брекпоинты обычно удобно записать в переменные.

В зависимости от того что первое - обычно используется медиа минимальная ширина (для мобильный первый) или максимальная ширина (для десктоп первый).

94
Q

Можете ли вы привести пример свойства @media, отличного от screen?

A

Например @media print - для вывода документа на печать.

95
Q

На что нужно обратить внимание при написании эффективного CSS?

A

На использование какой-нибудь систематизации, например БЭМ.

96
Q

Что такое CSS препроцессор?

A

Программа, которая генерирует CSS из собственного кода, который пишется в отличном от CSS стиле.

97
Q

Какие преимущества и недостатки в использовании CSS препроцессоров? Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.

A

Вложенность, переменные и переиспользование. Недостатков нет (разве что переборщить с кодом).

98
Q

Объясните, что такое псевдоэлементы и для чего они нужны.

A

Это ключевое слово, добавляемое к селектору.
* позволяет стилизовать определённую часть выбранного элемента (::first-line, ::first-letter)
* добавления элемента к разметке без изменения HTML (::before, ::after, обязательно с content)

99
Q

Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?

A

Использовать векторную графику и srcset для картинок.

100
Q

Вы знакомы со стилизацией SVG?

A

Fill вместо background-color, stroke вместо border.

101
Q

БЭМ

A

Блок, элемент, модификатор. Блок - самостоятельный. Элемент - только часть блока. Модификатор - изменение внешнего вида.

102
Q

Как реализовать кастомный чекбокс?

A
  • скрыть настоящий чекбокс через apperance: none;
  • добавить картинку в span (должно быть 6ыть минимум 6 картинок для разных состояний)
  • подогнать отступы
  • с помощью псведоклассов checked и disabled задаём соответствующие картинки
103
Q

Из чего состоит свойство background?

A

Цвет, изображение, повторение, позиция и закрепление фона (во время скролла).

104
Q

Из чего состоит тень box-shadow?

A

[inset] — внутренняя
5px — смещение по x (+ -)
10px — смещение по y (+ -)
[2px] — размытие (только +)
[3px] — масштабирование (+ и -)
[red] — цвет

105
Q

Как сделать градиент linear-gradient?

A

background-image: linear-gradient(цвет, цвет...);

Направление задать можно через ключевое слово (to top, to left…) или градус (deg).

Цвету можно указать колорстоп в %. Место, где цвет начнёт меняться. (yellow 25%, green 75%)

Повторяющийся - repeating-linear-gradient.

106
Q

Как вписать изображение?

A

Если для background-size задать значение contain (вписать) или cover (покрыть).

107
Q

Как убрать/поменять булеты у списка?

A

list-style: none;

108
Q

Как изменить буквы на заглавные через CSS?

A

text-transfom: uppercase; - сделает все буквы заглавными
text-transfom: capitalize; - сделает только первые буквы такими

109
Q

Что такое поток документа?

A

Принцип организации элементов при отсутствии стилей.

110
Q

Разница между адаптивным (adaptive), отзывчивым (responsive) и mobile-first дизайном.

A
  • адаптивный - страница адаптируется и изменяется под устройство (несколько дизайнов).
  • отзывчивый - страница резиновая и не имеет разный дизайн для разных размеров.
  • mobile-first - как адаптивный, но стартовый дизайн мобильный.
111
Q

Что такое семантика и семантическая разметка?

A

Использование тегов, которые описывают содержимое внутри себя. Например nav, article, header, footer, h1, main итд. Полезна для доступности, поисковой оптимизации и удобства поддержки кода.

112
Q

Как семантически правильно сверстать картинку с подписью?

A 
<figure>
	<img src="picture1.jpg" alt="картинка">
	<img src="picture2.jpg" alt="ещё одна (может быть)">
	<figcaption>Поясняющий текст</figcaption>
</figure>
113
Q

Типы списков в HTML?

A

Маркированный - ul, внутри li

Нумерованный - ol, внутри li

Список определений - dl, внутри dt (элемент списка), у которого может быть dd (описание элемента списка)

114
Q

Какая разница между тегами strong, em и b, i?

A

strong (жирный) и em (наклонный) - предназначены в том числе для семантики, скринридеры сделают акцент

b и i - сделают только визуальное изменение

115
Q

Что такое мета-тэги?

A

Это тег <meta>, который располагается в <head> и описывает содержимое страницы. В основном предназначены для SEO и роботов.

Например <meta name="description" content="Test page">

116
Q

Что описывается в тэге <head>?

A

title - заголовок страницы, будет на вкладке

meta - кодировка, описание и ключевые слова, указать вспомогательные механизмы для браузеров и устройств

link - ссылка на таблицу стилей и/или шрифтов

script - скрипты, либо прям там, либо файлом

117
Q

Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script>для подключения JS ставить перед </body>?

A

CSS располагается в <head> для оптимизации загрузки - при первой загрузке HTML и CSS анализируется одновременно и создаются DOM и CSSOM.

Скрипт располагается перед окончанием <body> для того что бы загрузка скрипта не блокировала отрисовку HTML.

118
Q

Для чего используются тэги <tr>, <th>, <td>?

A

Это теги, которые используются внутри table.

tr - строка таблицы

th - заголовочная ячейка

td - обычная ячейка

119
Q

Расскажите о теге <meta> с атрибутом name="viewport"?

A

Говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

В атрибуте content описывается как страница должна себя вести на устройствах с разным разрешением.

<meta name="viewport" content="width=device-width, initial-scale=1" />
120
Q

Что такое элемент <canvas>? И для чего он используется?

A

Холст - низкоуровневый api для отрисовки графики.

121
Q

Разница между <canvas> и <svg>? В каких случаях лучше использовать <canvas>, а в каких <svg>?

A

DOM - canvas одиночный элемент, svg набор элементов

Язык - canvas скриптовый язык, svg язык разметки

Графика - canvas растровая, svg векторная

Формат - canvas не имеет своего, svg можно сохранить в файл

События - canvas имеет события, svg нет

Сжатие - canvas нет, svg да

Canvas - редактирование изображений, обрезка, изменение размеров, фильтры (яркость, контрастов), графики функций, фракталы, анализ изображений, игровая графика

Плюсы canvas: производительность в 2д, png и jpg, работа с растровой графикой

Минусы canvas: отрисовка на пикселях, нет api для анимации, слабые возможности работы с текстом, плохо с доступностью

SVG - пользовательский интерфейс (независящий от разрешения экрана), высоко интерактивные анимированные пользовательские интерфейсы, графики и диаграммы, редактирование векторных изображений

Плюсы SVG: не зависим от разрешения, поддержка анимации, контроль над каждым элементом, хранение в xml

Минусы SVG: низкая скорость рендера при увеличении сложности (DOM), не подходит для игр.

122
Q

Для чего нужен атрибут autocomplete?

A

Для возможности использования автозаполнения. Может принимать разные типы значений, для заполнения в зависимости от типа данных, например name, email, tel итд.

123
Q

Что такое свойство valueAsNumber?

A

Применяется для полей формы. Позволяет получить значение сразу в виде числа, а не строки. На практике применяется для инпутов типа number, date и range.

124
Q

Что такое атрибут target? Какие значения он принимает?

A

Определяет, где откроется ссылка <a>: в том же окне, в новой вкладке или в новом окне браузера.

_self - по умолчанию, в том же окне.

_blank - в новой вкладке (или в новом окне - зависит от настроек браузера)

125
Q

Для чего используется элемент <picture>?

A

Для использования разных изображений под разные устройства (с разной шириной экрана).
Внутри <picture> указываются теги <source>, с атрибутами media (медиа-запрос) и srcset (ссылка на нужный вариант картинки).

<picture>
	<source media="(min-width: 1024px)" srcset="a1024.jpg">
	<source media="(min-width: 768px)" srcset="a768.jpg">
	<img src="a.jpg">
</picture>

<img> будет использован, если ничего не подошло.

126
Q

Для чего используется атрибут srcset в теге изображения <img>? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.

A

Используется для предоставления изображений разного размера. С помощью дескрипторов можно указать плотность пикселей, ширину или высоту экрана.

<img
src="cat.jpg" alt="Котик." width="360" height="240"
srcset="cat-360px.jpg 1x, cat-720px.jpg 2x, cat-1080px.jpg 3x"
>

На основе ширины экрана пользователя и ширины картинки рассчитывается плотность пикселей у картинок, затем на основе плотности экрана выбирается соответствующая картинка.

127
Q

Как семантически верно сверстать навигационное меню?

A 
<nav>
	<ul>
		<li><a>Главная</a></li>
		<li><a>О нас</a></li>
		<li><a>Контакты</a></li>
	</ul>
</nav>
128
Q

Что такое <iframe>?

A

Инлайн-фрейм. Позволяет вставить любой HTML документ из другого источника. Например карта, видео или пост из соцсети.

129
Q

Для чего используются тэги <sub> и <sup>?

A

sup - superscript, для степени

sub - subscript, для нижнего индекса

130
Q

Как можно сгруппировать опции внутри тэга select?

A

select - это выпадающий список

Сгруппировать варианты (option) можно тегом optgroup. Название группы можно задать через атрибут label.

<select>
	<optgroup label="HTML">
	  <option>Pug</option>
	  <option>Handlebars</option>
	</optgroup>
	<optgroup label="CSS">
	  <option>SASS</option>
	  <option>PostCSS</option>
	</optgroup>
</select>
131
Q

Чем отличается <article> от <section>?

A

Оба тега служат для семантики. Тег <article> используется если контент внутри него автономен. Тег <section> служит как часть какой-то информации, как контейнер, их можно вкладывать друг в друга.

132
Q

Для чего используется атрибут enterkeyhint?

A

Стилизация кнопки действия для виртуальной клавиатуры. Будет ли там “галочка” или кнопка “Поиск”.

133
Q

Для чего используют атрибут novalidate?

A

Для отключения встроенной валидации формы.

134
Q

Для чего используют атрибут inputmode?

A

Определяет какую клавиатуру показать на мобильных устройствах. Цифровую, буквенную или для ввода email.

135
Q

Для чего используется атрибут pattern?

A

Можно указать регулярное выражение для инпута.

136
Q

Что такое CSS? И для чего он используется?

A

Cascading Style Sheets - каскадные таблицы стилей.

Предназначены для добавления стилей на страницу.

137
Q

Варианты добавления CSS стилей на страницу.

A
  1. Инлайн стили.
  2. Глобальные стили - прямо в <head>, в <style> описание стилей.
  3. Внешний файл - через <link>
  4. Импорты внутри файлов стилей
138
Q

Что такое CSS-правило?

A

селектор { затем блок объявления }

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

139
Q

Что такое CSS спрайт? И для чего он используется?

A

CSS-спрайт это картинка, которая объединяет в себе много других, например иконок.

Сокращает количество обращений к серверу.

140
Q

Что такое вендорные префиксы? И для чего они используются?

A

Приставка перед CSS-свойствами, используются для поддержки этого свойства браузерами. Проверить совместимость можно на can i use.

141
Q

Что такое схлопывание границ (margin collapsing)?

A

Когда два элемента упираются вертикальным margin в друг друга. Будет действовать тот, который больше.

142
Q

Как с помощью CSS определить, поддерживается ли свойство в браузере?

A

Активно используется в progressive enhancement
Через @supports (свойство: значение) происходит проверка. Если результат положительный, то применится дальнейшее правило.

@supports (display: grid) {
	.main {
		display: grid;
	}
}
143
Q

Глобальные ключевые слова в CSS?

A

initial - значение по умолчанию

inherit - наследование

unset - с наследуемыми как inherit, с не наследуемыми как initial

revert - сбрасывает на стиль браузера

144
Q

Что такое CSS-атрибут (attr)?

A

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

Например attr(class) в примере равен “element”.

<div class="element" title="На самом деле внутри нет никакого текста"></div>

div::before {
	content: "Элемент с классом " attr(class);
}

div::after {
	content: "Подсказка: " attr(title);
}

Можно использовать где угодно, но полная поддержка только в content.

145
Q

Для чего используется ключевое слово currentColor в CSS?

A

Как переменная. Наследует значение color родителя.

146
Q

Какие фильтры есть в CSS?

A

Тона серого, сепия, прозрачность, яркость, контрастность, блюр.

147
Q

Для чего используется псевдокласс :invalid?

A

Псведокласс для стилизации невалидной формы, если используется нативная валидация. Есть так же :valid.

148
Q

Расскажите о свойстве text-rendering?

A

Позволяет указать браузеру - какие оптимизации нужно производить с текстом во время рендера.

  • auto - по умолчанию. Браузер самостоятельно пытается угадать, что важнее.
  • optimazeSpeed - скорость отрисовки. Лигатура и кёрнинг будут отключены.
  • optimazeLegibility - удобочитаемость текста, активное использование лигатуры и кёрнинга.
  • geometricPrecision - геометрическая точность.

Лигатура: перетикание или сливание одной буквы с другой
Кёрнинг: уменьшение межбуквенного растояния для тех букв, которые это поддерживают, например AV.

149
Q

Расскажите о свойстве text-decoration-skip-ink?

A

Настраивает как будет работать подчёркивание text-decoration.

none - сквозь глифы

auto - по умолчанию, может не касаться глифов

all - будет не касаться глифов

150
Q

Расскажите о свойстве pointer-events?

A

Свойство контролирует может ли курсор (или прикосновение) взаимодействовать с элементом.

auto - по умолчанию

none - предотвращает события клика с элементом

Остальные значения применимы для SVG.

151
Q

Расскажите о свойстве outline?

A

это как border, который не влияет на размер элемента

152
Q

Почему не стоит использовать краткую форму записи свойств в CSS?

A

При использовании короткой записи можно задать какое-то значение не желая этого делать. Например при background: red в том числе задастся начальное значение позиций в 0 0.

153
Q

Назовите псевдоэлементы для подсветки текста?

A

Псевдоэлементы выделения. Один из них:

selection - тот текст, что выделил пользователь

154
Q

Способы задания цвета в CSS?

A
  • слова: red, green, blue, в том числе transparent (прозрачный)
  • rgb(255, 0, 0) или hex #ff0000
  • rgba(255, 255, 255, 0.5) // с прозрачностью (альфа-канал)
  • hsl(120, 100%, 25%) и hsla(120, 100%, 25%, 0.1) - тон, насыщенность и яркость (может быть с альфа-каналом)
  • currentColor - наследование от родителя
155
Q

Какое CSS-свойство используется для изменения порядка отображения элементов на веб-странице без изменения их физического расположения в HTML-коде?

A

родителю display: flex;, а дочерние элементы расставлять через order: 1 и flex-direction;

156
Q

Разница между псевдоклассами и псевдоэлементами?

A

::псевдоэлементы селекторы, которые служат для вставки содержимого

::before, ::after, ::placeholder, ::first-letter
:псевдоклассы служат просто селекторами

Frontend (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions