29 идей проектов UI (на HTML, CSS и JavaScript)

0
1687
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Создание пользовательских интерфейсов помогает закрепить знания, полученные при изучении 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».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here