😡 Устал от нудных уроков на YouTube, где половина — вода?
Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:
➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.
Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!
Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)
Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:
➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.
Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!
Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)
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
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
Подборка популярных каналов по информационной безопасности и этичному хакингу:
🔐 infosec — ламповое сообщество, которое публикует редкую литературу, курсы и полезный контент для ИБ специалистов любого уровня и направления.
😈 Social Engineering — самый крупный ресурс в Telegram, посвященный этичному Хакингу, OSINT и социальной инженерии.
💬 Вакансии в ИБ — актуальные предложения от самых крупных работодателей и лидеров рынка в сфере информационной безопасности.
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Видеоуроки IT
1 — Разработка крутого веб-сайта для начинающих
2 — Построение шапки сайта
3 — Секция с играми
4 — Информация про проект
5 — Подписка на рассылку
6 — Дополнительная страница
7 — Страница с контактами
8 — Заключительная часть
Please open Telegram to view this post
VIEW IN TELEGRAM
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
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
Forwarded from Bad Pixel
Please open Telegram to view this post
VIEW IN TELEGRAM
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
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
Please open Telegram to view this post
VIEW IN TELEGRAM
• infosec - это один из самых ламповых каналов по информационной безопасности, где говорят об истории ИТ, публикуют актуальные новости и пишут технический материал на разные темы:
- Что из себя представляет официально взломанный iPhone от Apple?
- К чему могла привести опечатка в инфраструктуре платёжной системы MasterCard?
- Авторский материал для ИБ специалистов с закрытого хакерского форума XSS;
- Бесплатный бот, который проверит файлы на предмет угроз более чем 70 антивирусами одновременно.
• А еще у нас часто проходят розыгрыши самых актуальных и новых книг для ИБ специалистов. Так что присоединяйся, у нас интересно!
- Что из себя представляет официально взломанный iPhone от Apple?
- К чему могла привести опечатка в инфраструктуре платёжной системы MasterCard?
- Авторский материал для ИБ специалистов с закрытого хакерского форума XSS;
- Бесплатный бот, который проверит файлы на предмет угроз более чем 70 антивирусами одновременно.
• А еще у нас часто проходят розыгрыши самых актуальных и новых книг для ИБ специалистов. Так что присоединяйся, у нас интересно!
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
Please open Telegram to view this post
VIEW IN TELEGRAM