Джон Резиг, Беэр Бибо, Иосип Марас
"Секреты JavaScript ниндзя" (2017)

Книга Секреты javascript ниндзя раскрывает секреты мастерства разработки веб-приложений на javascript (соавтор книги, Джон Резиг - создатель библиотеки JQuery).

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

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

Примеры:
"bitcoin take over the world maybe who knows perhaps")
// 3

"turns out random test cases are easier than writing out basic ones")
//3

Грокаем алгоритмы (2017)

Целевая аудитория: начинающие программисты
Алгоритмы представляют собой наиболее эффективные и продуманные этапы решения задачи.

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

Что такое DOM?

DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое.

По сути, DOM – это представление HTML-документа в виде дерева тегов.
Каждый узел этого дерева – это объект.
Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: <html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.

Текст внутри элементов образует текстовые узлы, обозначенные как #text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.

Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы.
Например, document.body – объект для тега <body>.

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. В книге сравниваются разные подходы к веб-разработке и содержатся ссылки на материалы для дальнейшего обучения.