Больше, чем лендинг: 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.

Результат