Больше, чем лендинг: 28 примеров современного интерфейса для веб-разработчика (с кодом!)
Команда проекта NiemVuiLapTrinh, которая занимается поиском ресурсов по программированию для веб-разработки и дизайна, опубликовала подборку примеров интерфейса веб-страниц и приложений с примерами кода. Их главная цель — помочь веб-разработчику прокачать навыки работы с HTML, CSS и JavaScript на реальных кейсах.
1. Адаптивная страница соцсети
Код
See the Pen
Responsive Social Platform UI by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
2. Новостной сайт Fox News
Код
See the Pen
🦊 Fox News | Dribbble shot recreation by Håvard Brynjulfsen (@havardob)
on CodePen.
Результат
3. Клон Netflix
Код
See the Pen
Netflix Landing Page Clone by Brad Traversy (@bradtraversy)
on CodePen.
Результат
4. Книжный интернет-магазин
See the Pen
Book Store UI by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
5. Панель управления проектом
Код
See the Pen
Project Management Dashboard UI by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
6. Домашняя страница Microsoft
Код
See the Pen
Microsoft Homepage Clone by Brad Traversy (@bradtraversy)
on CodePen.
Результат
7. Диспетчер задач (с помощью CSS Grid)
Код
See the Pen
Task Manager UI with CSS Grid by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
8. Веб-приложение для обмена файлами
Код
See the Pen
File Sharing Web App by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
9. Приложение для обмена сообщениями (с темным режимом)
Код
See the Pen
Messaging App UI with Dark Mode by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
10. Приложение для бронирования отелей
Код
See the Pen
Booking App UI by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
11. Платформа для поиска работы
Код
See the Pen
Job Search Platform UI by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
12. Видеоплатформа для скейтеров
Код
See the Pen
Skateboard Video Platform by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
13. Редизайн Instagram
Код
See the Pen
Instagram re-design by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
14. Приложение для видеозвонков
Код
See the Pen
VideoCall App UI by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
15. Веб-сайт тренажерного зала
Код
See the Pen
Gym Website – Tailwind Starter Kit by Brad Traversy (@bradtraversy)
on CodePen.
Результат
16. Панель управления задачами
Код
See the Pen
Task Management Dashboard UI by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
17. Видеоплатформа
Результат
18. Редизайн Gmail
Код
See the Pen
Gmail Redesign by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
19. Приложение для чата
Код
See the Pen
Chat App UI by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Результат
20. Адаптивная веб-страница
Код
See the Pen
responsive-webpage by Aysenur Turk (@TurkAysenur)
on CodePen.
21. Приборная панель (с помощью Flexbox)
Код
See the Pen
Dashboard Design with Flexbox by Aysenur Turk (@TurkAysenur)
on CodePen.
Результат
22. Раздел «Услуги»
Код
See the Pen
Services Section | Learn CSS Garden by Ahmad Nasr (@ahmadnasr)
on CodePen.
Результат
23. Страница исполнителя в Spotify
Код
See the Pen
Spotify Artist Page UI by Adam Lowenthal (@alowenthal)
on CodePen.
Результат
24. Twitter-клиент
Код
See the Pen
Twitter Client UI in CSS + HTML by Marcelo Aguila (@marceloag)
on CodePen.
Результат
25. Адаптивное приложение для просмотра фильмов
Код
See the Pen
Responsive movie app UI by Nicklas Sandell (@nicklassandell)
on CodePen.
Результат
26. Редизайн Twitch (мокап)
Код
See the Pen
Twitch Redesign Mockup by Cole Waldrip (@colewaldrip)
on CodePen.
Результат
27. Таск-менеджер
Код
See the Pen
Task Management UI by AaronMcGuire (@aaronmcg)
on CodePen.
Результат
28. Страница пользователя Facebook
Код
See the Pen
Facebook Profile Page UI Concept by Himalaya Singh (@himalayasingh)
on CodePen.
Результат
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: