Перевод статьи «Here Are 7 Fun, Yet Challenging Front-End Ideas You Can Code».
В программировании трудно достичь мастерства. Причем единственный верный способ это все-таки сделать — постоянно практиковаться, реализуя самые разные проекты. Как известно, тяжелый труд окупается, и программирования это касается в первую очередь.
В этой статье собрано несколько идей, которые должны послужить источником вдохновения для создания ваших собственных проектов. Выбирайте то, что вам больше всего понравилось, и пробуйте создать что-то свое на этой основе.
1. Анимация на панели вкладок на чистом CSS
Прекрасно выглядящая панель, значки которой анимируются при наведении или клике. Обратите особое внимание на мелкие детали.
See the Pen Tabbar animation — Only CSS by Milan Raring (@milanraring) on CodePen.
Реализовав этот проект, вы научитесь использовать продвинутые концепции CSS — трансформации, анимации, переходы и т. д.
2. Страница продукта для краудфандинга
Попробуйте написать код страницы продукта и сделать так, чтобы ваша страница в точности соответствовала дизайну. Подробности и инструкции к этому челленджу вы найдете по ссылке.
Реализовав этот проект, вы научитесь:
- отображать количество спонсоров и увеличивать его по мере подтверждений подписки,
- отмечать, добавлен ли продукт в закладки,
- использовать состояния наведения курсора (CSS) для интерактивных компонентов,
- создавать шелково-гладкий макет на CSS и HTML.
3. CSS Adventure Pack
Отправляемся обратно в школу — школу программирования. Обратите внимание на этот прекрасный рюкзак, созданный Брейдоном Коером при помощи одного лишь CSS.
See the Pen CSS Adventure Pack by Braydon Coyer (@braydoncoyer) on CodePen.
Создав собственный рюкзачок, вы научитесь:
- Рисовать реальные объекты при помощи HTML и CSS,
- использовать CSS-переменные.
4. Таймер, отсчитывающий время до запуска
Все мы видели такие таймеры. Почему бы не создать собственный? Попробуйте написать код таким образом, чтобы ваш таймер был как можно ближе к предложенному дизайну. Подробности челленджа здесь.
5. Клон Substack-ридера
Substack — площадка для писательства (журналистики), где можно подписываться на отдельных авторов.
Любая рассылка, на которую вы подпишитесь в Substack, будет автоматически показываться в ридере. При желании можно добавить и сторонние RSS-ленты.
Примечание: под «клоном» в данном случае мы понимаем воспроизведение макета фронтнда. Данные можно использовать фейковые.
Работая над этим проектом, вы научитесь использовать CSS и HTML для воссоздания современно выглядящих приложений. В качестве задания со звездочкой можете сделать приложение функциональным, использовав API любого агрегатора новостей.
6. Компонент для показа счета футбольного матча
Попробуйте создать карточку футбольного матча, придерживаясь заданного дизайна. Не упустите мелкие детали, вроде CSS-теней и значков.
See the Pen Football (soccer) match score component by Håvard Brynjulfsen (@havardob) on CodePen.
Создавая этот проект, вы потренируетесь гармонично сочетать CSS и HTML, а также изучите продвинутые функции CSS, такие как тени и переменные.
7. Пользовательский интерфейс приложения для менеджмента задач
Вы только посмотрите, какая красота. Почему все приложения не выглядят так, как это?
See the Pen Task Management UI by AaronMcGuire (@aaronmcg) on CodePen.
Работая над этим проектом, вы научитесь создавать красивые приложения при помощи CSS, HTML и JavaScript.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
