Создание пользовательских интерфейсов помогает закрепить знания, полученные при изучении HTML, CSS и JS, а также развить дизайнерские способности. Представляем подборку подходящих идей UI-проектов. К каждому проекту прилагается скриншот общего вида и Codepen с примером реализации.
Адаптивная социальная платформа
See the Pen Responsive Social Platform UI by Aysenur Turk (@TurkAysenur) on CodePen.
Шаблоны Fox News
See the Pen 🦊 Fox News | Dribbble shot recreation by Håvard Brynjulfsen (@havardob) on CodePen.
Клон лендинга Netflix
See the Pen Netflix Landing Page Clone by Brad Traversy (@bradtraversy) on CodePen.
Книжный онлайн-магазин
See the Pen Book Store UI by Aysenur Turk (@TurkAysenur) on CodePen.
Приборная панель для менеджмента проектов
See the Pen Project Management Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Клон домашней страницы Microsoft
See the Pen Microsoft Homepage Clone by Brad Traversy (@bradtraversy) on CodePen.
Менеджер задач (используется CSS Grid)
See the Pen Task Manager UI with CSS Grid by Aysenur Turk (@TurkAysenur) on CodePen.
Веб-приложение для шеринга файлов
See the Pen File Sharing Web App by Aybüke Ceylan (@aybukeceylan) on CodePen.
Приложение-мессенджер с темным режимом
See the Pen Messaging App UI with Dark Mode by Aysenur Turk (@TurkAysenur) on CodePen.
Приложение для онлайн-букинга
See the Pen Booking App UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Платформа для поиска работы
See the Pen Job Search Platform UI by Aysenur Turk (@TurkAysenur) on CodePen.
Платформа для просмотра видео (для скейтбордистов)
See the Pen Skateboard Video Platform by Aysenur Turk (@TurkAysenur) on CodePen.
Редизайн Instagram
See the Pen Instagram re-design by Aysenur Turk (@TurkAysenur) on CodePen.
Приложение для видеозвонков
See the Pen VideoCall App UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Сайт спортзала
See the Pen Gym Website — Tailwind Starter Kit by Brad Traversy (@bradtraversy) on CodePen.
Приборная панель для менеджмента задач
See the Pen Task Management Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Внутренняя видеоплатформа
See the Pen Internal Video Platform UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Редизайн Gmail
See the Pen Gmail Redesign by Aybüke Ceylan (@aybukeceylan) on CodePen.
Приложение-чат
See the Pen Chat App UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Адаптивная веб-страница
See the Pen responsive-webpage by Aysenur Turk (@TurkAysenur) on CodePen.
Дизайн приборной панели (применяется Flexbox)
See the Pen Dashboard Design with Flexbox by Aysenur Turk (@TurkAysenur) on CodePen.
Раздел услуг
See the Pen Services Section | Learn CSS Garden by Ahmad Nasr (@ahmadnasr) on CodePen.
Страница артиста на Spotify
See the Pen Spotify Artist Page UI by Adam Lowenthal (@alowenthal) on CodePen.
Клиент для Twitter на CSS + HTML
See the Pen Twitter Client UI in CSS + HTML by Marcelo Aguila (@marceloag) on CodePen.
Адаптивное приложение-кинотеатр
See the Pen Responsive movie app UI by Nicklas Sandell (@nicklassandell) on CodePen.
Редизайн Twitch
See the Pen Twitch Redesign Mockup by Cole Waldrip (@colewaldrip) on CodePen.
Приложение для менеджмента задач
See the Pen Task Management UI by AaronMcGuire (@aaronmcg) on CodePen.
Концепция страницы профиля в Facebook
See the Pen Facebook Profile Page UI Concept by Himalaya Singh (@himalayasingh) on CodePen.
Перевод статьи «29 Projects To Help You Practice HTML CSS Javascript 2021».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]