Перевод статьи «Here’s Another List of Exciting Front-End Challenges».
От редакции Techrocks. Недавно мы уже публиковали подборку фронтенд-проектов Индрека Ласна. Сегодня хотим представить еще одну.
Каждый из проектов в этой статье — скорее источник вдохновения. Вы, конечно, можете повторить их в точности, но лучше использовать какие-то элементы в собственных проектах.
Синтвейв
Анимация в сетке 10×10 в стиле синтвейв.
See the Pen #viewBoxChallenge — Glitchy Synthwave SVG Sun by George Francis (@georgedoescode) on CodePen.
Чему вы научитесь, создав такой проект:
- Рисовать сетку 10×10. Попробуйте использовать для этого CSS Grid.
- Использовать CSS-трансформации, переходы и анимации.
Пользовательский интерфейс панели инструментов для рекрутера
Прекрасно выглядящая панель со всеми инструментами, которые могут понадобиться рекрутеру.
See the Pen Job Recruiter Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Чему вы научитесь, создав такой проект:
- Создавать красивые диаграммы при помощи JavaScript и CSS. Выберите для работы библиотеку графиков и диаграмм по своему вкусу.
- Получать данные из API. На любой панели инструментов отображаются какие-нибудь данные. Источник данных можете взять совершенно произвольный.
- Создавать макет при помощи CSS и HTML. Любое приложение нуждается в базовом макете.
Карточка профиля со статистикой
Простая, но современно выглядящая карточка профиля со статистикой социальных сетей (число подписчиков, лайков, фотографий). Данные профиля можно захардкодить или же использовать для создания карточки какой-нибудь набор фейковых данных.
Чему вы научитесь, создав такой проект:
- Создавать современно выглядящие карточки соцсетей.
- Отточите навыки использования HTML и CSS.
Плазменная анимация
Плазма — самое распространенное состояние материи во Вселенной. Из нее состоят звезды, ею заполнено межзвездное пространство, она есть в люминесцентных лампах, неоновых вывесках и многих других вещах. Электрическое свечение и цвета, часто производимые плазмой, очень впечатляют.
See the Pen Plasma Ball — Pure CSS by Josetxu (@josetxu) on CodePen.
Работая над этим проектом, вы научитесь создавать «газообразную» анимацию при помощи CSS или JavaScript.
Интерактивный ценовой компонент
Слайдер с бегунком, который можно передвигать. Отображаемая цена зависит от желаемого количества просмотров.
Обратите внимание на красивый градиент фона и тени от слайдера.
Чему вы научитесь, поработав над таким проектом:
- Создавать пользовательские слайдеры.
- Использовать линейный градиент для создания красивых и современных фонов.
Креативный редизайн облачного приложения в стиле глассморфизма
See the Pen Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur) on CodePen.
Сейчас набирает популярность новый тренд в дизайне — глассморфизм. Его определяющие характеристики:
- прозрачность (эффект матового стекла с использованием размытия фона)
- многослойный подход с объектами, плавающими в пространстве
- яркие цвета для подчеркивания размытой прозрачности
- тонкие, легкие рамки просвечивающих объектов.
Чему вы научитесь, поработав над таким проектом:
- создавать бэкграунды в стиле глассморфизма
- отточите навыки CSS и HTML при создании макета.
«Отзывы» в CSS-сетке
Мы часто видим отзывы такого типа на сайтах. Это хороший способ вызвать доверие у пользователей и, возможно, превратить их в покупателей.
Чему вы научитесь, поработав над таким проектом:
- пользоваться CSS Grid
- основам CSS и HTML.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]