👩‍💻 Создание карточки с изображением и текстом

Создайте карточку, которая содержит изображение, заголовок и описание. Карточка должна иметь тень, плавно увеличиваться при наведении и иметь отступы для аккуратного отображения содержимого.

Ожидаемое поведение:

• Изображение находится в верхней части карточки.
• Под изображением — заголовок и краткое описание.
• Карточка при наведении увеличивается и добавляет лёгкую тень.

Решение задачи🔽

<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img">
<h3 class="card-noscript">Заголовок карточки</h3>
<p class="card-denoscription">Это краткое описание для карточки. Оно даёт представление о содержимом.</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-noscript {
margin: 16px;
font-size: 1.2em;
}

.card-denoscription {
margin: 0 16px 16px;
font-size: 0.9em;
color: #555;
}

👩‍💻 Dropdown Menu Effects

Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript.

Открыть код...

👩‍💻 В чем разница между em и rem в CSS?

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

➡️ Пример:

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

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

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

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

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание

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

Читать...

👩‍💻 Создание адаптивного круга с текстом по центру

Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 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;
}
}

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино

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

Читать...

👩‍💻 Сравнение способов отрисовки спрайтов в canvas

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

Читать...

👩‍💻 CSS Веерное раскрытие с grid и @property

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

Читать...

👩‍💻 Всё ли ты знаешь о работе с асинхронностью?

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

Читать...

👩‍💻 Адаптивный блок с равными колонками

Создайте адаптивный блок, который содержит три колонки одинаковой ширины. На больших экранах (от 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%;
}
}

🔝 Самые интересные статьи за последние дни:

• Знакомьтесь: input, output и model. Новые функции в Angular

• Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам

• Новый этап эволюции Vue — Vapor

• Как сделать один плагин сразу для всех сборщиков фронтенда?

• Личный опыт: добавление микроразметки на сайт

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

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

Читать...