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 | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Твой портал в Web3, Web4 и Web5!
Хочешь создавать проекты будущего? Здесь ты найдёшь:
Пошаговые гайды по смарт-контрактам и блокчейну TON.
Практические знания о токенах, DeFi и DAO.
Эксклюзивные инструменты для работы с Web3, Web4 и Web5.
💡 Только практика, без х##ни.
⚡ Бонус: Мы запускаем свой токен и скоро будет аэрдроп — будь среди первых!!!
📲 Подписывайся — будущее уже здесь.
Хочешь создавать проекты будущего? Здесь ты найдёшь:
Пошаговые гайды по смарт-контрактам и блокчейну TON.
Практические знания о токенах, DeFi и DAO.
Эксклюзивные инструменты для работы с Web3, Web4 и Web5.
💡 Только практика, без х##ни.
⚡ Бонус: Мы запускаем свой токен и скоро будет аэрдроп — будь среди первых!!!
📲 Подписывайся — будущее уже здесь.
👍5❤2🔥2💯1
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2🔥1
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1🔥1
💡 Сидите по 10 часов за компом и хотите сбросить лишний вес без экстремальных диет и спортзала?
Иван Лагунцов — CDTO, который за 6 месяцев похудел на 18 кг и убедился, что «меньше жрать и больше двигаться» — лишь часть правды. Нужны ещё системный подход, создание привычек и немного науки. Каждый день — новый пост из реального опыта.
Подписывайтесь на «Лагунцов Иван | Про похудение» и начинайте сбрасывать вес без радикальных шагов, просто формируя правильные привычки!
Иван Лагунцов — CDTO, который за 6 месяцев похудел на 18 кг и убедился, что «меньше жрать и больше двигаться» — лишь часть правды. Нужны ещё системный подход, создание привычек и немного науки. Каждый день — новый пост из реального опыта.
Подписывайтесь на «Лагунцов Иван | Про похудение» и начинайте сбрасывать вес без радикальных шагов, просто формируя правильные привычки!
👍3
rel в HTML и зачем он используется?Атрибут
rel определяет тип отношения между текущим документом и связанным ресурсом. Он используется в <link> и <a> для указания назначения ссылки или загружаемого ресурса.<!-- Подключение таблицы стилей -->
<link rel="stylesheet" href="styles.css">
<!-- Ссылка на альтернативную версию страницы -->
<link rel="alternate" hreflang="en" href="example.com/en">
<!-- Обычная ссылка с атрибутом rel -->
<a href="https://example.com" rel="noopener noreferrer">Перейти</a>
•
rel="stylesheet" указывает, что это таблица стилей.•
rel="alternate" задаёт альтернативную версию страницы.•
rel="noopener noreferrer" защищает от потенциальных атак через window.opener при открытии ссылки в новом окне.Атрибут rel важен для SEO, безопасности и улучшения пользовательского опыта.
CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥2❤1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Нейросети снова поражают!
TikTok создают GameGen-O — ИИ, который генерирует игры с открытым миром прямо по текстовому запросу, без всякого программирования.
На канале "Новости. Технологии. Нейросети." мониторят новости по ИИ каждый день и рассказывают про самые топовые бесплатные сервисы с нейросетями.
Заценить их можно сразу.
Автор канала выкладывает обзоры самых новых нейросетей, а так же последние новости по ИИ.
👉 Подписывайся и начни выполнять свою работу в десятки раз быстрее!
TikTok создают GameGen-O — ИИ, который генерирует игры с открытым миром прямо по текстовому запросу, без всякого программирования.
На канале "Новости. Технологии. Нейросети." мониторят новости по ИИ каждый день и рассказывают про самые топовые бесплатные сервисы с нейросетями.
Заценить их можно сразу.
Автор канала выкладывает обзоры самых новых нейросетей, а так же последние новости по ИИ.
👉 Подписывайся и начни выполнять свою работу в десятки раз быстрее!
👍3🙈3
😡 Устал от нудных уроков на YouTube, где половина — вода?
Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:
➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.
Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!
Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)
Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:
➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.
Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!
Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)
👍2
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🔥1👌1🤝1
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
Подборка популярных каналов по информационной безопасности и этичному хакингу:
🔐 infosec — ламповое сообщество, которое публикует редкую литературу, курсы и полезный контент для ИБ специалистов любого уровня и направления.
😈 Social Engineering — самый крупный ресурс в Telegram, посвященный этичному Хакингу, OSINT и социальной инженерии.
💬 Вакансии в ИБ — актуальные предложения от самых крупных работодателей и лидеров рынка в сфере информационной безопасности.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Атрибут
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 | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3❤1
Forwarded from Видеоуроки IT
1 — Разработка крутого веб-сайта для начинающих
2 — Построение шапки сайта
3 — Секция с играми
4 — Информация про проект
5 — Подписка на рассылку
6 — Дополнительная страница
7 — Страница с контактами
8 — Заключительная часть
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥4
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Forwarded from Bad Pixel
Please open Telegram to view this post
VIEW IN TELEGRAM
😁8👍7👏2
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 | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤3🥰2🔥1
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥2👏2