⚙️ Что такое свойство 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

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

🔐 infosec — ламповое сообщество, которое публикует редкую литературу, курсы и полезный контент для ИБ специалистов любого уровня и направления.

😈 Social Engineering — самый крупный ресурс в Telegram, посвященный этичному Хакингу, OSINT и социальной инженерии.

💬 Вакансии в ИБ — актуальные предложения от самых крупных работодателей и лидеров рынка в сфере информационной безопасности.

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

Атрибут target определяет, где откроется ссылка или загруженный ресурс. Он используется в <a> и <form> для указания способа открытия новой страницы или вкладки.

➡️ Пример:

<!-- Открытие ссылки в новой вкладке -->
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>

<!-- Открытие ссылки в том же окне -->
<a href="https://example.com" target="_self">Открыть в этом же окне</a>

<!-- Открытие в новом окне без доступа к родительскому -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Открыть безопасно</a>

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

• target="_blank" открывает ссылку в новой вкладке.
• target="_self" (по умолчанию) открывает ссылку в том же окне.
• rel="noopener noreferrer" защищает от возможных атак через window.opener.

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

CodeBase | Frontend | #Основы

🎬 Верстка сайта с нуля для начинающих

🔴Видеоуроки:
1 — Разработка крутого веб-сайта для начинающих
2 — Построение шапки сайта
3 — Секция с играми
4 — Информация про проект
5 — Подписка на рассылку
6 — Дополнительная страница
7 — Страница с контактами
8 — Заключительная часть

▶️ Плейлист YouTube

🔻Канал: Школа itProger / Программирование
🔴#html #css

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

object-fit — это CSS-свойство, которое определяет, как содержимое <img> или <video> должно масштабироваться внутри контейнера. Оно позволяет изменять размер изображения, сохраняя его пропорции, без искажений.

➡️ Пример:

<img src="image.jpg" class="responsive-img" alt="Пример изображения">

<style>
  .responsive-img {
    width: 300px;
    height: 200px;
    object-fit: cover; /* Заполняет контейнер, обрезая лишнее */
  }
</style>

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

• object-fit: cover; делает так, что изображение заполняет контейнер, но не растягивается.
• object-fit: contain; сохраняет весь контент, добавляя пустое пространство.
• Это свойство особенно полезно при адаптивной вёрстке и работе с изображениями разного размера.

CodeBase | Frontend | #CSS

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

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

➡️ Пример:

const text = "JavaScript — крутой язык!";

// Проверяем, начинается ли строка с "Java"
console.log(text.startsWith("Java")); // true

// Проверяем с учетом позиции
console.log(text.startsWith("крутой", 13)); // true

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

• startsWith("Java") проверяет, начинается ли строка с "Java".
• startsWith("крутой", 13) проверяет подстроку с 13-го символа.
• Этот метод удобен для валидации данных, обработки URL и фильтрации текстовых данных.

CodeBase | Frontend | #JS

Когда соседи узнали, что у тебя дедлайн через час 😄

💰Bad Pixel › IT Video Memes

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

Атрибут aria-label используется для улучшения доступности веб-страниц. Он задаёт текстовое описание элемента для экранных читалок, что делает интерфейс более удобным для людей с ограниченными возможностями.

➡️ Пример:

<!-- Кнопка без видимого текста, но с доступным описанием -->
<button aria-label="Открыть меню">
  <img src="menu-icon.svg" alt="">
</button>

🗣️ Почему полезно:

• aria-label="Открыть меню" делает кнопку понятной для пользователей с экранными читалками.
• Это полезно для иконок без текстовых подписей.
• Улучшает доступность, что важно для SEO и UX.

Атрибут aria-label помогает делать сайты доступными для всех и соответствует стандартам Web Accessibility (WCAG).

CodeBase | Frontend | #Основы

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

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

➡️ Пример:

<div class="box">Этот текст слишком длинный для блока и может выходить за его границы.</div>

<style>
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    overflow: hidden; /* Обрезаем лишний контент */
  }
</style>

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

• overflow: hidden; обрезает текст, выходящий за границы блока.
• overflow: scroll; добавляет прокрутку внутри контейнера.
• overflow: auto; включает прокрутку, если контент не помещается.

Это свойство важно для управления адаптивностью и предотвращения ломки верстки.

CodeBase | Frontend | #CSS

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

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

➡️ Пример:

const text = "frontend — это круто!";

// Проверяем, заканчивается ли строка на "круто!"
console.log(text.endsWith("круто!")); // true

// Проверяем с ограничением по длине
console.log(text.endsWith("frontend", 8)); // true

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

• endsWith("круто!") проверяет, заканчивается ли строка на "круто!".
• endsWith("frontend", 8) проверяет первые 8 символов строки.
• Этот метод полезен для проверки расширений файлов, валидации URL и обработки текстов.

CodeBase | Frontend | #JS

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

Атрибут aria-hidden используется для управления доступностью элементов на веб-странице. Он скрывает элемент от экранных читалок, но не влияет на его видимость для пользователей.

➡️ Пример:

<!-- Иконка, не нужная для экранных читалок -->
<span aria-hidden="true">🔔</span>

<!-- Видимый, но скрытый от читалок текст -->
<p aria-hidden="true">Этот текст будет проигнорирован</p>

🗣️ Почему полезно:

• aria-hidden="true" предотвращает озвучивание декоративных элементов.
• Используется для скрытия дублирующегося контента, например, иконок, дублирующих текст.
• Улучшает доступность и делает сайты более удобными для пользователей с ограниченными возможностями.

Атрибут aria-hidden помогает создавать семантически корректные интерфейсы, соответствующие стандартам Web Accessibility (WCAG).

CodeBase | Frontend | #Основы

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

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

➡️ Пример:

<div class="box">Этот блок всегда виден</div>
<div class="box hidden">А этот скрыт, но занимает место</div>

<style>
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }

  .hidden {
    visibility: hidden; /* Элемент становится невидимым, но остаётся на месте */
  }
</style>

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

• visibility: hidden; скрывает элемент, но он по-прежнему занимает место в разметке.
• display: none; убирает элемент полностью (в отличие от visibility).

Это свойство помогает управлять интерфейсом без изменения структуры страницы.

CodeBase | Frontend | #CSS

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

padStart() — это метод строк в JavaScript, который дополняет строку до нужной длины, добавляя заданные символы в начало. Он удобен для форматирования чисел, дат и других данных.

➡️ Пример:

const num = "7";

// Дополняем до двух символов нулями
console.log(num.padStart(2, "0")); // "07"

// Выравнивание текста
console.log("JS".padStart(5, "-")); // "--JS"

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

• padStart(2, "0") превращает "7" в "07", полезно для форматирования чисел.
• padStart(5, "-") добавляет символы до нужной длины.

CodeBase | Frontend | #JS