Вёрстка сайтов | HTML, CSS, JS

Интернет технологии

Фронтенд и верстка.
HTML, CSS, JS

О канале
Полная статистика

Статистика

Количество постов

2 421

Среднее количество просмотров на пост

423

Средний охват (48ч)

170

Упоминаний

420

Получить детальную аналитику

Последние посты канала

imageИзображение недоступно для предпросмотра

Всё, чего не хватает начинающему веб-разработчику, чтобы стать востребованным 1. Отточить на реальных задачах работу с HTML, CSS, JS и Angular; 2. Научиться экономить время и силы с помощью нейросетей; 3. Получить советы от опытных разработчиков; 4. Упаковать свой проект в портфолио, на которое слетаются компании. ✅ Но самое важное — составить план развития в профессии, чтобы не сливать время на ерунду, а чётко по шагам за 2 месяца выйти на 2000$ в месяц с фриланса или получить офер в престижную IT-компанию. Всего 7 дней бесплатной практики — и ты закрываешь все эти пункты разом. Без тяжёлой теории. Без воды. Без страха, что не получится. Вход открыт до 20 ноября. → Просто заходи на сайт и запускай обучение 🎁 И забери бонус: «45 мест, где разработчики находят реальные заказы и оферы».

127

10:30

03.11.2025

imageИзображение недоступно для предпросмотра

Как сделать анимацию без лагов: transform и opacity Плавные анимации на сайте — это важно: они создают качественное впечатление. Но часто мы делаем анимации, которые вызывают тормоза: прыгает FPS, мышка как-бы “тяжёлая”. Почему? Потому что браузеру приходится делать layout, paint или composite на каждый кадр. Хорошая новость: есть “дешёвые” свойства, которые вызывают только стадию composite, и браузер, либо GPU справляется с ними гораздо лучше. Согласно руководству на Google / web.dev: «To improve the performance of your CSS animations, use the transform and opacity CSS properties as much as possible, and avoid anything that triggers layout or paint.» Также: Такие свойства «гарантированно ни на что не влияют и от чего-то не зависят во flow/DOM» — значит, браузеру не надо перерасчитывать размеры/позиции соседей. И ещё: списки “аппаратно ускоряемых” (GPU accelerated) свойств часто включают: transform, opacity, иногда filter. Почему не стоит анимировать, например, width или top Когда вы анимируете top, left, width, height или другие свойства, которые влияют на layout (позиционирование) или paint (отрисовка частей), браузеру нужно: * пересчитать стили (style) * пересчитать layout (reflow) * возможно, выполнить repaint * затем composite Поэтому прыжки FPS и лаги. Практика: как правильно Пример: двигаем элемент слева направо

    
        .box {
  position: absolute;
  /* НЕ делаем: top от-до или left от-до */
  /* Делаем: */
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}
.box.move {
  transform: translateX(300px);
}{}

Пример: плавное исчезновение/появление

    
        .fade {
  opacity: 1;
  transition: opacity 0.4s ease-in;
}
.fade.hide {
  opacity: 0;
}{}

Дополнительные приёмы * Используйте will-change: transform, opacity; перед анимацией, чтобы заранее “сообщить” браузеру, что будет изменяться. * Можно форсировать слой GPU, например transform: translateZ(0); или translate3d(0,0,0) - помогает, но не всегда необходимо. * Не забывайте: не всё GPU-ускорено автоматически, и “анимация без лагов” - зависит от того, сколько элементов, какова нагрузка, устройство. Когда хочешь “быструю” анимацию - используйте только transform и opacity. Избегайте width, height, top, left, margin и т.д., если возможен вариант с трансформацией. Это - простой способ повысить производительность интерфейса. #полезнаястатья

112

10:06

03.11.2025

imageИзображение недоступно для предпросмотра

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Игра Марио на чистом CSS! 2. Изучаем localStorage в JavaScript 3. Тег <meter> Лучшие фронтенд вакансии @job_webdev: 1. HTML-верстальщик 2. Frontend-разработчик Junior 3. HTML-верстальщик Лучшие дизайн вакансии @job_webdesign: 1. Веб-дизайнер 2. Дизайнер UX/UI 3. Product Designer #лучшеезанеделю

247

12:21

02.11.2025

imageИзображение недоступно для предпросмотра

Задача на JavaScript: Необходимо создать программу, которая будет переводить заданный текст на "Роботский язык". Роботский язык - это модифицированный алфавит, в котором все гласные буквы заменяются на "о" и после каждой согласной буквы, кроме "р" добавляется "p" . Например, слово "Программирование" будет переведено на "Пррогрромрмроровронроо". Задача: Напишите функцию, которая принимает на вход текстовую строку и возвращает этот текст, переведённый на Роботский язык. Убедитесь, что ваша функция учитывает регистр букв, и сохраняет оригинальную пунктуацию и пробелы. Пример использования:

    
        console.log(robotLanguage("Программирование")); // выводит "Пррогрромрмроровронроо"
console.log(robotLanguage("Привет, мир!")); // выводит "Прровротр, мрор!"{}

#домашка

347