Логово верстальщика

👩‍💻 Что такое Grid Layout в CSS и как он работает? CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов. ➡️ Пример:

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

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

🖥 Подробнее тут

👩‍💻 Gooey SVG Filter Button Анимированная кнопка с эффектом при наведении. Сделана на SVG, CSS и JavaScript. Открыть код...

👩‍💻 Создание карточки с изображением и текстом, выровненным по нижнему краю Создайте карточку, которая содержит изображение и текст, выровненный по нижнему краю карточки. Карточка должна иметь фиксированную высоту, и текст всегда должен находиться у нижней границы. Ожидаемое поведение: • Изображение занимает верхнюю часть карточки. • Текст закреплён внизу карточки, даже если изображение маленькое. Решение задачи🔽

<div class="card"> <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img"> <div class="card-text">Текст внизу карточки</div> </div> .card { width: 200px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-img { width: 100%; height: auto; max-height: 70%; /* Ограничиваем высоту изображения */ } .card-text { padding: 10px; background-color: #f9f9f9; text-align: center; }

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код. Читать...

🔝 Самые интересные статьи за последние дни: • Знакомьтесь: input, output и model. Новые функции в Angular • Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам • Новый этап эволюции Vue — Vapor • Как сделать один плагин сразу для всех сборщиков фронтенда? • Личный опыт: добавление микроразметки на сайт

👩‍💻 Адаптивный блок с равными колонками Создайте адаптивный блок, который содержит три колонки одинаковой ширины. На больших экранах (от 1024px) колонки должны располагаться в один ряд, на планшетах (от 768px до 1023px) — в два ряда по две и одну, а на мобильных устройствах (до 767px) — каждая колонка должна занимать всю ширину. Ожидаемое поведение: • На больших экранах: три колонки в один ряд. • На планшетах: две колонки в первом ряду, одна во втором. • На мобильных: каждая колонка занимает всю ширину. Решение задачи🔽

<div class="container"> <div class="column">Колонка 1</div> <div class="column">Колонка 2</div> <div class="column">Колонка 3</div> </div> .container { display: flex; flex-wrap: wrap; gap: 16px; /* Отступы между колонками */ margin: 0 auto; max-width: 1200px; } .column { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border-radius: 8px; flex: 1 1 calc(33.333% - 16px); /* Для больших экранов */ box-sizing: border-box; } /* Планшеты: две колонки в первом ряду */ @media (max-width: 1023px) { .column { flex: 1 1 calc(50% - 16px); } } /* Мобильные устройства: одна колонка в строке */ @media (max-width: 767px) { .column { flex: 1 1 100%; } }

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 👩‍💻 IT Новости — t.me/it_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Data Science — t.me/data_ready 🐞 QA-тестирование — t.me/qa_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

👩‍💻 Всё ли ты знаешь о работе с асинхронностью? Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину. Читать...

Общаетесь через нескольких мессенджеров? Объедините мессенджеры в одном приложении и используйте возможности GPT-4 для автоматизации общения. Агрегатор мессенджеров Umnico позволяет переписываться на 25+ платформах, включая WhatsApp, Telegram через единый веб-интерфейс. ✅ Поддержка функций популярных мессенджеров: цитирование и пересылка сообщений, статус прочтения. ✅ CRM-система: воронка продаж, календарь задач, назначение ответственных, карточки клиентов. ✅ Чат-боты на основе GPT понимают сообщения с опечатками и необычными оборотами. ✅ Аналитика переписки и распределение диалогов между пользователями. ✅ Несколько пользователей могут работать через один аккаунт без прямого доступа в соцсеть или мессенджер. Попробуйте функционал Umnico бесплатно! Зарегистрироваться #реклама 16+ umnico.com О рекламодателе

👩‍💻 CSS Веерное раскрытие с grid и @property Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию. Читать...

👩‍💻 Сравнение способов отрисовки спрайтов в canvas Статья описывает исследование различных методов отрисовки изображений в HTML5 Canvas для браузерных игр с мультиплеером. Автор делится находками по оптимизации производительности, основанными на проекте для курсовой. Читать...

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино Застряли в замкнутом круге "клавитура-мышка", из-за которого устаете и теряете время при написании кода? Представляем вашему вниманию полезные шорткаты VS Code, которые избавят от этих проблем. Читать...

⚡️ Запускаем крупный розыгрыш призов, где можно выиграть iPhone 17, игровые наушники, клавиатуру и мышь! Без лишних слов, условия: 1. Подписка на: — бизнестрендс — Технотренды — Блумберг 2. Нажать кнопку «Участвовать» снизу Итоги будут опубликованы 15 ноября в 18:00 на наших каналах, желаем удачи!

👩‍💻 Создание адаптивного круга с текстом по центру Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px. Ожидаемое поведение: • Круглый элемент с текстом по центру. • Размер круга меняется в зависимости от ширины экрана. Решение задачи🔽

<div class="circle">Текст</div> .circle { display: flex; align-items: center; justify-content: center; background-color: #4CAF50; color: white; border-radius: 50%; text-align: center; font-size: 1.2em; } /* Размер для больших экранов */ @media (min-width: 1024px) { .circle { width: 200px; height: 200px; } } /* Размер для планшетов */ @media (min-width: 768px) and (max-width: 1023px) { .circle { width: 150px; height: 150px; } } /* Размер для мобильных устройств */ @media (max-width: 767px) { .circle { width: 100px; height: 100px; } }

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации. Читать...

👩‍💻 В чем разница между em и rem в CSS? В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования. ➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

🖥 Подробнее тут

👩‍💻 Dropdown Menu Effects Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript. Открыть код...

👩‍💻 Создание карточки с изображением и текстом Создайте карточку, которая содержит изображение, заголовок и описание. Карточка должна иметь тень, плавно увеличиваться при наведении и иметь отступы для аккуратного отображения содержимого. Ожидаемое поведение: • Изображение находится в верхней части карточки. • Под изображением — заголовок и краткое описание. • Карточка при наведении увеличивается и добавляет лёгкую тень. Решение задачи🔽

<div class="card"> <img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img"> <h3 class="card-title">Заголовок карточки</h3> <p class="card-description">Это краткое описание для карточки. Оно даёт представление о содержимом.</p> </div> .card { width: 300px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .card-img { width: 100%; height: auto; } .card-title { margin: 16px; font-size: 1.2em; } .card-description { margin: 0 16px 16px; font-size: 0.9em; color: #555; }

👩‍💻 Проблема с new URL(), и как URL.parse() её решает Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна. Читать...

🔝 Самые интересные статьи за последние дни: • Отладка и мониторинг в MobX: trace, introspection и spy • Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2 • PHP и Laravel дайджест новостей за октябрь 2024 года • Битва титанов: натив, кроссплатформа и PWA – ищем плюсы и минусы на каждом этапе разработки • Внедрение методики решения проблем 8D на производственном предприятии в виде SRM/ERP-систем/Часть 1