⚙️ Что такое атрибут alt у тегов <img> в HTML и зачем он используется?

Атрибут alt у тега <img> задаёт текстовое описание изображения. Он используется для улучшения доступности (помогает пользователям с нарушениями зрения) и отображения текста, если изображение не удалось загрузить.

➡️ Пример:

<img src="photo.jpg" alt="Фотография заката на пляже">

🗣️ В этом примере текст "Фотография заката на пляже" будет отображён вместо изображения, если оно недоступно. Атрибут alt улучшает опыт пользователей и способствует SEO-оптимизации страницы.

CodeBase | Frontend | #Основы

⚙️ Что такое z-index в CSS и зачем он используется?

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

➡️ Пример:

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<style>
  .box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    z-index: 1; /* Будет позади box2 */
  }

  .box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    left: 50px;
    z-index: 2; /* Отображается поверх box1 */
  }
</style>

🗣 В этом примере z-index определяет, что элемент с классом .box2 перекрывает элемент .box1. Свойство работает только с элементами, у которых задано позиционирование (position).

CodeBase | Frontend | #CSS

👨‍💻 В телеграме появился новый канал по Фронтенду

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

➡️ Перейти в канал "Фронтенд заметки"

👩‍💻 Что такое метод some() в JavaScript и как он используется?

some() — это метод массивов в JavaScript, который проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Он возвращает true, если хотя бы один элемент прошёл проверку, иначе false.

➡️ Пример:

const numbers = [1, 3, 5, 8];

// Проверяем, есть ли чётные числа
const hasEven = numbers.some(num => num % 2 === 0);

console.log(hasEven); // true

🗣️ В этом примере метод some() возвращает true, так как в массиве есть число 8, которое является чётным. Это полезно для проверки условий без необходимости проходить весь массив.

CodeBase | Frontend | #JS

⚙️ Что такое атрибут title в HTML и зачем он используется?

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

➡️ Пример:

<a href="https://example.com" title="Перейти на главную страницу">Главная</a>

🗣️ В этом примере при наведении на ссылку появится подсказка с текстом "Перейти на главную страницу". Это улучшает взаимодействие с пользователем, добавляя полезные пояснения.

CodeBase | Frontend | #Основы

⚙️ Что такое свойство opacity в CSS и зачем оно используется?

opacity — это CSS-свойство, которое задаёт степень прозрачности элемента. Значение opacity может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это полезно для создания визуальных эффектов, таких как затемнение или появление элементов.

➡️ Пример:

<div class="opaque-box">Прозрачный текст</div>

<style>
  .opaque-box {
    background-color: lightblue;
    opacity: 0.5; /* Устанавливаем 50% прозрачности */
    padding: 20px;
    text-align: center;
  }
</style>

🗣 В этом примере свойство opacity делает элемент .opaque-box полупрозрачным, что особенно полезно для наложений и визуального выделения интерфейсов.

CodeBase | Frontend | #CSS

👩‍💻 Что такое метод every() в JavaScript и как он используется?

every() — это метод массивов в JavaScript, который проверяет, удовлетворяют ли все элементы массива заданному условию. Он возвращает true, если все элементы проходят проверку, иначе false.

➡️ Пример:

const numbers = [2, 4, 6, 8];

// Проверяем, все ли числа чётные
const allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // true

🗣️ В этом примере метод every() возвращает true, так как все числа в массиве чётные. Этот метод полезен, когда требуется убедиться, что все элементы массива соответствуют определённым критериям.

CodeBase | Frontend | #JS

Простой парень-программист с 12-летним стажем в российских IT-компаниях загорелся идеей переехать в Лондон 💂

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

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

Хочешь увидеть, как выглядит путь программиста, решившего покорить Лондон, и заодно получить инсайты о работе в IT? 🧠

Подпишись на его канал @artur_speaking!

⚙️ Что такое атрибут lang в HTML и зачем он используется?

Атрибут lang указывает язык содержимого HTML-документа или конкретного элемента. Это важно для улучшения доступности, корректной обработки текста браузерами и поисковыми системами.

➡️ Пример:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример</title>
</head>
<body>
  <p lang="en">This is English text.</p>
  <p lang="fr">Ceci est un texte en français.</p>
</body>
</html>

🗣️ В этом примере атрибут lang указывает, что весь документ на русском языке, а отдельные элементы содержат текст на английском и французском языках. Это улучшает обработку текста экранными считывателями и помогает браузерам выбирать правильные шрифты.

CodeBase | Frontend | #Основы

⚙️ Что такое свойство box-shadow в CSS и зачем оно используется?

box-shadow — это CSS-свойство, которое добавляет тень к элементу. Оно позволяет задавать цвет, смещение, размытие и размер тени, улучшая визуальное восприятие элементов.

➡️ Пример:

<div class="box">Тень</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Тень с размитием */
  }
</style>

🗣 В этом примере box-shadow добавляет тень к элементу .box, делая его визуально "поднятым". Это свойство удобно для выделения карточек, кнопок и других элементов интерфейса.

CodeBase | Frontend | #CSS

А стоп-слово ты забыл 😂

🦥Ленивый программист

👩‍💻 Что такое метод find() в JavaScript и как он используется?

find() — это метод массивов в JavaScript, который возвращает первый элемент, удовлетворяющий заданному условию. Если ни один элемент не подходит, возвращается undefined.

➡️ Пример:

const numbers = [3, 7, 10, 15];

// Ищем первое число больше 5
const result = numbers.find(num => num > 5);

console.log(result); // 7

🗣️ В этом примере find() находит и возвращает 7, так как это первое число, удовлетворяющее условию. Этот метод удобен, если нужен только первый подходящий элемент, а не все соответствующие значения.

CodeBase | Frontend | #JS

⚙️ Что такое свойство text-shadow в CSS и зачем оно используется?

text-shadow — это CSS-свойство, которое добавляет тень к тексту, улучшая его визуальное восприятие. Оно позволяет задавать цвет, смещение, размытие и создавать эффекты, такие как свечение или объёмный текст.

➡️ Пример:

<div class="text">Тень у текста</div>

<style>
  .text {
    font-size: 24px;
    font-weight: bold;
    color: darkblue;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Тень с размитием */
  }
</style>

🗣 В этом примере text-shadow делает текст более выразительным. Это свойство часто используется для стилизации заголовков, кнопок и декоративных элементов.

CodeBase | Frontend | #CSS

👩‍💻 Что такое метод includes() в JavaScript и как он используется?

includes() — это метод массивов и строк в JavaScript, который проверяет, содержит ли массив или строка определённое значение. Он возвращает true, если элемент найден, и false, если нет.

➡️ Пример:

const numbers = [1, 3, 5, 7];

// Проверяем, есть ли число 5 в массиве
console.log(numbers.includes(5)); // true

const text = "Привет, мир!";
console.log(text.includes("мир")); // true

🗣️ В этом примере includes() проверяет наличие элемента в массиве и подстроки в строке. Этот метод полезен для быстрой проверки наличия значений без необходимости писать циклы.

CodeBase | Frontend | #JS