CodeBase | Frontend
2.11K subscribers
487 photos
220 videos
5 files
786 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Interactive Blackhole — Интересная кнопка с анимацией при наведении и нажатии.

Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
❗️Самые «имбовые» каналы в Telegram по мнению пользователей:

Hardware Club — здесь вы узнаете, как даже с маленьким бюджетом собрать мощный ПК. Разгон железа, оптимизация системы, новинки, лайфхаки, обзоры, комплектующие, готовые сборки.

Windows Club — этот канал удивит даже уверенного пользователя Windows. Бесплатные ключи активации, полезные софты, сервисы, фишки и нейросети.

Linux Club — это мечта для пользователей Linux. Здесь вы найдёте всё, от полезных команд в терминале, до обучающих уроков, которые пригодятся даже профи.

Apple Club — все фишки, лайфхаки, функции и свежайшие новости для iOS и macOS, собранные в одном канале.

⚡️Даже Стив Джобс бы подписался на эти каналы, пользуйтесь
2👍1🔥1
👩‍💻 Метод every() в JavaScript и как он используется

Метод every() проверяет, удовлетворяют ли все элементы массива заданному условию.

Возвращает true, если условие выполняется для каждого элемента, иначе false.


➡️ Пример:

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

const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true


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

every() проверяет все числа на чётность
• Возвращает true, так как все элементы подходят
• Полезен для валидации данных (например, все ли поля заполнены)

every() часто используют для проверки массивов перед отправкой данных на сервер


CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥1
⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

Свойство object-fit управляет тем, как изображение или видео масштабируется внутри контейнера, не искажая пропорции.

По смыслу похоже на background-size, но применяется к <img> и <video>.


➡️ Пример:

<div class="wrapper">
<img src="photo.jpg" alt="пример">
</div>

<style>
.wrapper {
width: 300px;
height: 200px;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>


🗣️ Популярные приёмы:

cover — заполняет контейнер, обрезая лишнее
contain — показывает всё изображение, сохраняя пропорции
fill — растягивает без сохранения пропорций
none — без масштабирования

object-fit решает классическую проблему «кривых картинок» в карточках, галереях и адаптивных интерфейсах


CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍1
После 12 месяцев изучения HTML я с гордостью могу сказать... что наконец-то научился выравнивать div по центру.

CodeBase | Frontend | #meme
🤣71😭1🫡1🤪1
🖥 Atomic CSS: верстка и легкость бытия

Автор спокойно разбирает Atomic CSS: какие мифы вокруг него живы, где он реально помогает, а где мешает. Практика, примеры и выводы без фанатизма и холиваров.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️destination slider — Анимированный слайдер достижения цели.

Технологии: SVG, GSAP

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1🔥1
С Рождеством Христовым! 🎄
🕊52🎄2
Инструкция в виде комикса по основам пайки.

Скачать ТУТ 💾💾💾

Репост лайк подписка

Подпишись на наш ТГ https://t.iss.one/club_arduino

Библиотека с книгами https://t.iss.one/Geek_book_hub

Канал по Али https://t.iss.one/Ali_radio_top

Андроид софт премиум https://t.iss.one/Pirate_Gram
⚙️ Что такое свойство gap в CSS и зачем оно используется?

Свойство gap управляет расстоянием между элементами во flex- и grid-контейнерах.

Это современная замена margin для управления отступами между, а не вокруг элементов


➡️ Пример:

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

<style>
.container {
display: flex;
gap: 16px;
}

.item {
padding: 10px;
background: #007bff;
color: white;
}
</style>


🗣 gap — чистый и предсказуемый способ управлять расстояниями в современных интерфейсах.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🎄2
🖥 Верстаем сложный прогрессбар в 2026 году

Автор показывает, как сегодня делать круговой прогрессбар на чистом CSS: один div, одно свойство, нормальная поддержка. Потом тюнинг, визуал и немного CSS-магии. Без SVG-страданий.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🎄1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁41😭1