HTML5, как сделать верстку семантичной и зачем это нужно?

Семантический HTML, определяет точные теги для пояснения четкой роли контента на странице. Эта дополнительная информация помогает роботам/индексаторам, таким как Google и Bing лучше понять какой контент важен, какой является второстепенным, какой используется для навигации и так далее.

Для того, чтобы сделать верстку семантичной, нужно использовать семантические теги, такие как <nav>, который определяет набор навигационных ссылок. или <header> и <footer> которые соответственно определяют заголовок и подвал страницы.

Напишите функцию, которая объединяет два массива и при этом берет поочередно по элементу из каждого массива.

Пример:
[a, b, c, d, e] и [1, 2, 3, 4, 5]
становятся [a, 1, b, 2, c, 3, d, 4, e, 5]

[1, 2, 3] и [a, b, c, d, e, f]
становятся [1, a, 2, b, 3, c, d, e, f]

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

Мета-теги — часть HTML-кода, заключенная между тегом <head>...</head>. Эти атрибуты не являются обязательными: они не видны пользователю, но сообщают определенную информацию поисковой системе (описание, заголовок, ключевые слова и т.д.).

Мета-теги выполняют несколько важных функций:

1.Влияют на то, как отображается и какую позицию занимает страница в индексе (выдаче).

2.Помогают продвигать ресурс по наиболее соответствующим Вашей целевой аудитории запросам.

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

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

Что такое контекст наложения и какие свойства его создают?

Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML элементы занимают это место по порядку, основанному на атрибутах элемента.

Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий:

1. является корневым элементом (HTML),
2. позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto",
3. flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex|inline-flex,
4. Если заданы следующие свойства:
opacity меньше чем 1.
transform отличный от "none",
mix-blend-mode со значением отличным от "normal",
filter со значением отличным от "none",
isolation установленный в "isolate",
5. элементы с position: fixed

Как пользоваться медиазапросами в CSS?

В медиазапросах используется правило @media, с помощью которого можно применять CSS-стили к различным типам содержимого. Медиазапросы могут использоваться и для настройки элементов страниц с учётом характеристик среды, в которой просматривают страницы.

@media only screen and (max-width: 600px) {
div {
background-color: red;
}
}
Данный код изменяет фоновый цвет любого элемента <div> на "red" в том случае, если ширина окна браузера составляет 600px или меньше

Web Development for beginners (2020)

Книга подойдет вам, если вы не знакомы ни с одним из языков программирования и хотите начать изучение веб-разработки. Автор пошагово разбирает этапы создания сайта с использованием HTML, CSS и JavaScript. В книге сравниваются разные подходы к веб-разработке и содержатся ссылки на материалы для дальнейшего обучения.

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

 Solve("*'&ABCDabcde12345") = [4,5,5,3]. 

Порядок: Заглавные, строчные, числа и спец.символы.

JavaScript. Сильные стороны

Автор книги — Дуглас Крокфорд, создатель формата JSON и инструментов JSLint и JSMin, а также активный участник в развитии JavaScript. Его книга «JavaScript: сильные стороны» стала классикой и must-have для прочтения всеми программистами, желающими изучить JavaScript. Она поясняет принципы объектно-ориентированного подхода, принятого в языке, и выделяет как крутые возможности JS (синтаксис, функции, объекты, динамическую типизацию, наследование, массивы, регулярные выражения и многое другое), так и не самые удобные фичи, например программную модель на глобальных переменных. Благодаря разбору языка с различных сторон вы сможете писать более качественный и элегантный код.

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

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

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

 a:hover {
   color: green;
 }

При наведении на ссылку её текст окрашивается в зеленый цвет

a:visited {
color: purple;
}
Посещенные ссылки окрашиваются в фиолетовый цвет

Чем отличаются куки-файлы, сессионное хранилище и локальное хранилище?

Локальное хранилище, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных. Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.

Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, они отправляются с каждым запросом в заголовках и сервер может устанавливать их посредством заголовка "Set-Cookie".