За время своей работы я достаточно изучил Figma, чтобы не только хорошо ей пользоваться и получать результат, но и начать делиться своими знаниями.
продукты
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="styles.css"><title>Магазин Продуктов</title></head><body><header><h1>Д…
одностатичный сайт на тему машинки
body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #333;color: white;text-align: center;padding: 10px0;}section {margin: 20px;}form {display: grid;gap: 10px;}button {padding: 5px10px;background-color: #333;color: white;border: none;cursor: pointer;}/* Стили для шапки сайта */header {background-color: #333;color: wh…
одностичный сайтик на тему авибилеты
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="styles.css"><title>Продажа авиабилетов</title></head><body><header><h1>Путешествуй по всему миру с нами!</h1><nav>&…
одностатичный сайтик на тему аренда домов
/* Reset default margin and padding for typography */body, h1, h2, h3, p, ul {margin: 0;padding: 0;font-family: Arial, sans-serif;line-height: 1.6;}/* Global container styles */.container {max-width: 1200px;margin: 0auto;padding: 20px;}/* Header styles */header {background-color: #333;color: white;padding: 15px0;text-align: center;}headerh1 {margin…
Как дизайнеру сделать сайт-портфолио и не утонуть в перфекционизме
Я не мог доделать свой сайт-портфолио в течение полугода — перерисовывал дизайн десять раз и хватал фишки, которые видел у других ребят. В один момент я осознал, что не закончу проект никогда, если не изменю подход.
Как создать фавиконку адаптирующуюся под цвет системы
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="..." />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Vue.js. Создаем динамический интерфейс
Цель публикации — разобраться, какова структура компонентов Vue. js, что такое реактивные свойства и как они работают.
Валидация формы с помощью AJV, Vue.js и TypeScript
Валидация форм является важной частью фронтенд-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.
Vue.js. Создание динамических пользовательских интерфейсов с помощью компонентов и реактивных свойств
Проведение опросов, викторин и других игровых обучающих активностей среди сотрудников является частью корпоративной культуры многих компаний.
Opium.Fill — стандартизация цветовой схемы глазами программиста
Привет. Сегодня покажу вам цветовую схему, которой пользуюсь последние два года. Она была придумана, чтобы на проблемном проекте избавиться от огромного количества переменных в CSS. А потом оказалось, что эти принципы можно применить почти к любому проекту.
Почему 90% дизайнеров юзают Color Styles неправильно
Многие дизайнеры (и далеко не новички) используют Color Styles просто как палитру для хранения цветов, а потом тратят кучу времени на правки, если какой-то отдельный цвет не нравится заказчику. Особенно остро встаёт проблема, когда появляется задача перекрасить интерфейс в новомодную тёмную тему.
Как сделать темную тему на Tilda
Привет! Меня зовут Богдан. Я продуктовый дизайнер, который очень любит Tilda. Я часто использую Zero Block в Tilda при создании сайтов. На примере базы знаний комьюнити-бюро Compot я покажу, как сделать тёмную тему на Tilda в Zero Block.
Как правильно верстать письма: рекомендации и требования для верстальщика
В предыдущей статье мы писали о визуальном стиле рассылок и давали рекомендации для дизайнеров. Если дизайн письма готов, то теперь нужно подготовить его к вёрстке.
Избавиться от градиента, бледных цветов, ненужных разделителей: концепт редизайна страницы репозитория на GitHub
Перевод материала создателя Fira Code, DataScript, Rum Никиты Прокопова.