Как создать адаптивный текстовый градиент

Градиенты в тексте — это модный тренд, который можно использовать не только для заголовков, но и для адаптивных интерфейсов.

HTML:

<h1 class="gradient-text">Смотри, я градиентный!</h1>

CSS:

.gradient-text {
background: linear-gradient(90deg, #ff6ec4, #7873f5, #00d4ff);
-webkit-background-clip: text;
color: transparent;
font-size: clamp(2rem, 5vw, 4rem);
}
clamp() обеспечивает адаптивный размер текста.
linear-gradient() позволяет настроить цвета и направление.

#какэтосделать

Макет для тренировки (terra)

Перейти к макету 🧑‍💻

#практика | #макет

JS Задача: Event Emitter

Описание:
Разработайте класс EventEmitter. Этот интерфейс аналогичен (но с некоторыми отличиями) интерфейсу, описанному в Node.js или интерфейсу назначения событий в DOM. EventEmitter должен позволять подписываться на события и отправлять их.

Ваш класс EventEmitter должен иметь следующие два метода:
subscribe - Этот метод принимает два аргумента: имя события в виде строки и функцию обратного вызова. Эта функция обратного вызова будет вызвана позже, когда событие будет отправлено.
У события должно быть несколько слушателей для одного и того же события. При отправке события с несколькими обратными вызовами каждый из них должен вызываться в том порядке, в котором они были подписаны. Должен быть возвращен массив результатов. Можно предположить, что ни один из обратных вызовов, передаваемых для subscribe, не является ссылочно идентичным.
Метод subscribe также должен возвращать объект с методом unsubscribe, который позволяет пользователю отказаться от подписки. При его вызове обратный вызов должен быть удален из списка подписок, а значение undefined должно быть возвращено

Пример:

Input: 
actions = ["EventEmitter", "emit", "subscribe", "subscribe", "emit"], 
values = [[], ["firstEvent"], ["firstEvent", "function cb1() { return 5; }"],  ["firstEvent", "function cb1() { return 6; }"], ["firstEvent"]]
Output: [[],["emitted",[]],["subscribed"],["subscribed"],["emitted",[5,6]]]
Explanation: 
const emitter = new EventEmitter();
emitter.emit("firstEvent"); // [], no callback are subscribed yet
emitter.subscribe("firstEvent", function cb1() { return 5; });
emitter.subscribe("firstEvent", function cb2() { return 6; });
emitter.emit("firstEvent"); // [5, 6], returns the output of cb1 and cb2

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Как создать адаптивный текстовый градиент
2. :has
3. Слова программиста

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Frontend разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер
2. Web дизайнер
3. UX/UI дизайнер

#лучшеезанеделю

Вопросы по css на собеседовании

Читать 👨‍💻

#css | #полезности

SEO фишки

Читать 👨‍💻

#полезности

Полезные расширения Chrome для верстки

Читать 👨‍💻

#полезности

Макет для тренировки (ft score)

Перейти к макету 🧑‍💻

#практика | #макет

JS Задача: Список задач (To-Do List)

Читать 👨‍💻

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Вопросы по css на собеседовании
2. SEO фишки
3. Полезные расширения chrome

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Стажер HTML верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Стажер веб дизайнер
2. Web дизайнер
3. UX/UI дизайнер

#лучшеезанеделю

Ссылки mailto: и tel:

Читать 🧑‍💻

#html | #теория

Что такое PWA и почему это важно для современного веба?

В мире современных технологий пользователи ожидают быстрые, удобные и надежные приложения. Здесь на помощь приходит концепция Progressive Web Apps (PWA) — прогрессивных веб-приложений.

Что такое PWA?
PWA — это веб-приложения, которые работают как нативные мобильные приложения. Они разрабатываются с использованием веб-технологий, таких как HTML, CSS и JavaScript, но обладают возможностями, которые раньше были доступны только нативным приложениям.

Основные характеристики PWA:
- Установка: PWA можно добавить на главный экран устройства без необходимости загрузки из магазина приложений.
- Высокая производительность: Кэширование позволяет сократить время загрузки.
- Обновления в реальном времени: Приложение всегда актуально, так как оно обновляется прямо с сервера.

Ключевые преимущества PWA
- Кросс-платформенность: Одно приложение работает на всех устройствах — компьютерах, планшетах и смартфонах.
- Экономия ресурсов: PWA занимают меньше места, чем нативные приложения, и не требуют установки через App Store или Google Play.
- Повышение вовлеченности: Благодаря push-уведомлениям и возможности работы офлайн, пользователи остаются дольше на сайте.
- Простая разработка: Нет необходимости писать код отдельно для Android и iOS.
Как PWA изменяет бизнес?
Компании, которые внедряют PWA, часто отмечают рост конверсий и снижение отказов. Примером может служить компания AliExpress: после перехода на PWA время, проводимое пользователями на сайте, увеличилось на 74%, а конверсии — на 104%.

PWA — это не будущее, а настоящее веб-разработки. Если вы хотите сделать ваш сайт быстрым, удобным и доступным для всех пользователей, рассмотрите возможность внедрения PWA уже сегодня!

#полезнаястатья

Макет для тренировки (Natitanic)
Лендинг - портфолио

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Фиксация блока при скролле (CSS + HTML)

Представьте, что вам нужно создать страницу с фиксированной шапкой и основным контентом. Шапка должна оставаться видимой при прокрутке страницы.
Создайте HTML-структуру с блоками: header, main, и footer.
Напишите CSS, чтобы шапка оставалась на экране, а остальные блоки прокручивались.

Дополнительно:
Как сделать, чтобы шапка становилась полупрозрачной при скролле?

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Что такое PWA
2. Макет для тренировки (Natitanic)
3. Ссылки mailto: и tel:

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Junior Frontend developer

Лучшие дизайн вакансии @job_webdesign:
1. Product дизайнер
2. Младший Web дизайнер
3. Web дизайнер

#лучшеезанеделю

Что такое Progressive Enhancement и как его внедрить в проект?

Читать 👨‍💻

#полезнаястатья

Красивый шаблон для портфолио

Смотреть на codepen 👨‍💻

#какэтосделать

Что такое PostCSS и зачем он нужен?

Читать 👨‍💻

#полезности | #css