Идеи для анимаций по ховеру: подборка с CodePen

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

Танец клавиш
автор: @Numb boi Nate

Анимация изображения
автор: @RomainJeff

Анимация кнопок
автор: @webcrafterscz

Touch ID анимация
автор: @ctcworksg

Анимация логотипа
автор: @Joseph Victory

А чтобы научиться делать также — приходите на курс «CSS-анимации», сейчас его можно пройти со скидкой 30%. Ещё есть пакет «Золотой», в котором три курса: «CSS-анимации», «Алгоритмы и структуры данных» и TypeScript. На этот пакет тоже действует скидка. Вы сможете научиться делать не только анимации, но и полноценно встраивать их в любой пользовательский интерфейс, самостоятельно продумывать логику, чтобы всё работало как надо.

Забрать весь пакет или необходимый курс

Положительные ответы в опросе делают своё дело — мы публикуем отрывок из навыка «Создание семантической разметки по макету».

Читать

17 октября стартует курс «React. Разработка сложных клиентских приложений»

Разработчик, который дружит с React и TypeScript, уже не верстает макеты, он пишет приложения и продумывает их логику, разрабатывает пользовательские интерфейсы, с которыми ежедневно взаимодействуют миллионы людей.

На рынке труда его зарплата начинается минимум с 80 000 рублей. Этих денег вполне может хватить, чтобы снять маленькую студию и съехать от родителей или купить билет на самолёт и улететь, куда хочется.

Здесь должна быть красивая картинка со словами «Записывайтесь на курс», но мы скажем чуть иначе. Мы будем рады новым студентам. Дадим все необходимые знания и практику для старта в профессии «React-разработчик».

Для записи кликать сюда

Ликбез по паттернам проектирования

Многие проблемы, с которыми разработчики сталкиваются в работе, уже кто-то решил. Поэтому не нужно придумывать новые решения или создавать костыли — лучше использовать в проекте готовые паттерны.

Паттернов проектирования много, и каждый решает свои задачи. В статье рассказали, какие паттерны бывают, какие проблемы решают, как и когда их можно использовать.

Все научились программировать. А дальше-то что?

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

Заглядывайте, чтобы узнать

Мне тяжело учиться, кто поможет?

Вы записались на курс. Сначала всё было хорошо, мотивации море, задания делаются за секунду. Но вот, прошёл месяц, сложности нашли вас и застали врасплох.

В статье мы расскажем, к кому и с каким вопросом вы можете обратиться в Академии, чтобы быстро получить помощь.

Лучи поддержки и розовые сердечки тут

Подборка статей, которые ответят на все вопросы о вёрстке

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

Как написать и запустить HTML на компьютере

За 6 шагов разберётесь, как и в чём написать и запустить HTML-код на своём компьютере.

Обзор редакторов кода

Редакторов кода много — даже из числа популярных. Они есть под любую систему, некоторые даже работают в терминале. В этой статье — обзоры VS Code, Atom и Sublime Text. Узнайте, что они умеют, как к ним прикрутить плагины и как это всё будет работать.

Как сверстать макет. Пошаговый план

Когда разобрались, как запустить HTML на компьютере, установили редактор кода и поняли, как в нём работать — настало самое время приступить к вёрстке. Наш план вам в помощь.

К нам в редакцию заглянул Серёжа Джуновский, кот Кекс дал ему задачу. Поможете решить? Делитесь вариантами решения в комментариях.

Задача

Есть массив целых чисел и число K. Необходимо найти в массиве пару таких чисел, чтобы их сумма равнялась К, или вывести, что таких чисел нет.

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

Если вам понравился такой формат постов — ставьте лайк. А если хотите научиться щёлкать подобные задачи, как орешки, то записывайтесь на курс «Алгоритмы и структуры данных» до 23 октября на него действует скидка 30%.

Записаться

Новый выпуск фронтенд-новостей уже в блоге

Три главных новости за неделю 3–9 октября:

Пройдите опрос для State of CSS

Внесите свой вклад в базу знаний о технологиях в CSS, которыми чаще всего пользуются разработчики.

Обновите ваше расширение с Manifest V2 на V3

Иначе скоро оно превратится в тыкву.

Полное руководство по рендерингу в React

Узнайте, как использование Context и React-Redux влияет на рендеринг React-компонентов.

Больше новостей

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

Чтобы вам было проще разобраться, 19 октября в 13:00 мы проведём лайв «Работа в продуктовой компании: интервью с Андреем Смирновым из X5 Group».

Что же будем обсуждать на лайве?

— Что нужно для трудоустойства в X5 Group;
— Какие навыки важны мидл разработчику для успешного прохождения интервью;
— Как не провалить собеседование и произвести хорошее впечатление на работодателя;
— В чём специфика работы мидл фронтенд-разработчика.

Лайв проведут Серёжа Попов и Андрей Смирнов.

Серёжа руководит направлением «Курсы для практикующих разработчиков» в HTML Academy, а Андрей — руководитель управления клиентской разработки в X5 Group, бессменный ведущий подкаста «Frontend Weekend» и участник ПК Frontend Conf.

Советуем записаться, чтобы не пропустить — будет интересно и полезно!

Вышел новый выпуск подкаста Frontend Weekend

В гостях у Андрея Смирнова побывал Виктор Русакович — Lead Frontend Developer в компании GP Solutions и участник ПК Frontend Conf.

Виктор поделился секретами, как проработать в одной компании 11 лет и не потерять интерес. Дал несколько годных советов для развития во фронтенде, а ещё подарил свой гитхаб со всеми выступлениями на конференции Frontend Conf.

Слушать подкаст на всех площадках
GitHub Виктора со всеми выступлениями

Расскажите, что помогает вам не бросить обучение? Возможно, ваши советы и практики помогут другим.