29 идей проектов UI (на HTML, CSS и JavaScript)
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал 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 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.
Платформа для просмотра видео (для скейтбордистов)
Редизайн 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
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».
HTML/Атрибут compact (Элемент ul)
Синтаксис
(X)HTML
<ul compact="compact"> ... </ul>
Описание
Атрибут / параметр compact (от англ. «compact» ‒ «компактный») указывает браузеру, что список необходимо отображать в более компактном виде.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | List Elements | Перевод |
| 3.2 | Unordered Lists | |
| 4.01 | 10.2 Unordered lists (UL), ordered lists (OL), and list items (LI) compact [CI]…[1] DTD: Transitional
|
|
| 5.0 | ||
| 5.1 | ||
| XHTML | ||
1. 0 |
Extensible HyperText Markup Language[1] DTD: Transitional
|
|
| 1.1 | ||
- [1] ‒ помечен как «устаревший».
Значения
Данный атрибут является логическим атрибутом.
Может указываться либо без значения, либо с пустым значением, либо со значением «compact».
В XHTML данный атрибут может указываться только в «развёрнутом виде», то есть со значением «compact».
<ul compact> ... <ul> <ul compact=""> ... <ul> <ul compact="compact"> ... <ul>
Пример использования
Листинг кода
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.
0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Параметр compact (Элемент ul)</title>
</head>
<body>
<h2>Пример использования атрибута «compact»</h2>
<p>Азиатские столицы:</p>
<ul compact=»compact»>
<li>Нью-Дели</li>
<li>Пекин</li>
<li>Сеул</li>
<li>Токио</li>
</ul>
</body>
</html>
Параметр compact (Элемент ul)
Семантический пользовательский интерфейс
2.5.0
Начать Новое в версии 2.4
Semantic — это среда разработки, которая помогает создавать красивые, отзывчивые макеты с использованием удобного для человека HTML.
Семантический пользовательский интерфейс рассматривает слова и классы как взаимозаменяемые понятия.
Классы используют синтаксис естественных языков, например отношения существительное/модификатор, порядок слов и множественное число, чтобы интуитивно связывать понятия.
Получите те же преимущества, что и BEM или SMACSS, но без скуки.
Один
Два
Три
Semantic использует простые фразы, называемые поведениями, которые запускают функциональные возможности.
Любое произвольное решение в компоненте включено в качестве параметра, который разработчики могут изменить.
$(‘выбрать.выпадающий’) .dropdown(‘установить выбранный’, [‘метеор’, ‘эмбер’]) ;
SkillsAngularCSSEmberHTMLJavascriptMeteorNodeJS
SkillsAngularCSSEmberHTMLJavascriptMeteorNodeJS
Ведение журнала производительности позволяет отслеживать узкие места, не копаясь в трассировках стека.
У вас сейчас нет доступа к средствам разработки? Посмотрите этот короткий клип.
$(‘.sequenced.images .image’) .переход({ отладка: правда, анимация: «покачивание», продолжительность: 500, интервал : 200 }) ;
Semantic поставляется с интуитивно понятной системой наследования и переменными темы высокого уровня, которые дают вам полную свободу проектирования.
Разработайте свой пользовательский интерфейс один раз, а затем используйте один и тот же код везде.
Выберите тему
Посмотреть
Добавить в корзину
Сохранить на потом
Rate
Единственная догма из этого фреймворка: все произвольное изменчиво .
Руководство по темам
Создайте весь свой сайт с помощью одного стека пользовательского интерфейса. Поделитесь своим пользовательским интерфейсом между несколькими проектами.
Интерфейс просмотра
Semantic UI — это бесплатный проект с открытым исходным кодом , который уже используется в нескольких крупномасштабных производственных средах.
Посетите GitHub
Определения не ограничиваются только кнопками на странице. Компоненты Semantic допускают несколько различных типов определений: элементы, коллекции, представления, модули и поведения, которые охватывают всю гамму дизайна интерфейса.
См. примеры компоновки
Этот сайт использует файлы cookie
- . Воспользуйтесь нашим справочным центром .
- Проверьте наш FAQ
Добавить в друзья
Пандит
Присоединился в 1998 г. 22 друга
Отметка добавила вас в друзья
Вы добавили Лену в группу Близкие друзья
Ева только что написала на вашу страницу
Молли@thebears.
com
23 Новый Платья
Доставка
Выберите вариант доставки
Биллинг
Введите платежную информацию
Подтвердить заказ
Проверить детали заказа
Выберите страну
Фильтр сообщений
Поиск
http://
Добавить теги
Мне нравится развлекаться
Получать еженедельный информационный бюллетень о пуделях
Сделать профиль моей собаки общедоступным
Инструменты сборки, регистрация производительности, поддержка пользовательских определений, многоуровневое наследование тем — мечта разработчика.
Начать сейчас
Семантический пользовательский интерфейс
1.
12.2
Скачать сейчас
Semantic — это среда разработки, которая помогает создавать красивые, отзывчивые макеты с использованием удобного для человека HTML.
Семантический пользовательский интерфейс рассматривает слова и классы как взаимозаменяемые понятия.
Классы используют синтаксис естественных языков, например отношения существительное/модификатор, порядок слов и множественное число, чтобы интуитивно связывать понятия.
Получите те же преимущества, что и BEM или SMACSS, но без скуки.
Один
Два
Три
Semantic использует простые фразы, называемые поведениями, которые запускают функциональность.
Любое произвольное решение в компоненте включено в качестве параметра, который разработчики могут изменить.
$(‘.gender.dropdown’)
.dropdown(‘настройка’, ‘переход’, ‘вертикальный флип’)
.dropdown(‘установить выбранный’, ‘женский’)
.
popup(‘настройка’, ‘контент’, ‘Выберите свой пол’)
;
MaleFemale
MaleFemale
Ведение журнала производительности позволяет отслеживать узкие места, не копаясь в трассировках стека.
У вас сейчас нет доступа к средствам разработки? Посмотрите этот короткий клип.
$(‘.sequenced.images .image’) .переход({ отладка: правда, анимация: «покачивание», продолжительность: 500, интервал : 200 }) ;
Semantic поставляется с интуитивно понятной системой наследования и переменными темы высокого уровня, которые дают вам полную свободу дизайна.
Разработайте свой пользовательский интерфейс один раз, а затем используйте один и тот же код везде.
Выберите тему
Посмотреть
Добавить в корзину
Сохранить на потом
Rate
Единственная догма из этого фреймворка: все произвольное изменчиво .
Руководство по интеграции
Создайте весь свой сайт с помощью одного стека пользовательского интерфейса. Поделитесь своим пользовательским интерфейсом между несколькими проектами.
Интерфейс просмотра
Semantic UI — это бесплатный проект с открытым исходным кодом , который уже используется в нескольких крупномасштабных производственных средах.
Посетите GitHub
Определения не ограничиваются только кнопками на странице. Компоненты Semantic допускают несколько различных типов определений: элементы, коллекции, представления, модули и поведения, которые охватывают всю гамму дизайна интерфейса.
Посмотреть больше примеров
Этот сайт использует файлы cookie
- . Воспользуйтесь нашим справочным центром .
- Проверьте наш FAQ
Добавить в друзья
Знакомые
Стив Джобс — вымышленный персонаж, созданный, чтобы быть похожим на знакомого читателям человека.
Присоединился в 1998 г. 22 друга
Эллиот Фу добавила вас в друзья
Вы добавили Дженни Хесс в группу Близкие друзья
Зоя только что написала на вашей странице
23 Новый Платья
Доставка
Выберите вариант доставки
Биллинг
Введите платежную информацию
Подтвердить заказ
Проверить детали заказа
Выберите страну
Фильтр сообщений
Добавление 5 из 20 фото
Поиск
http://
Добавить теги
Мне нравится развлекаться
Получать еженедельный информационный бюллетень о пуделях
Сделать профиль моей собаки общедоступным
Инструменты сборки, регистрация производительности, поддержка пользовательских определений, многоуровневое наследование тем — мечта разработчика.