КодВеб | Дизайн База

👩‍💻 Morphing Button Кнопка с анимацией. 🟠 Сложность: Легко 🟠 Стек: #HTML #CSS 🎨 Дизайн База | #CodePen

👩‍💻 Анимированный Mesh Gradient в Figma В этом видео мы сначала рассмотрим, как создавать mesh gradient или фоны, похожие на северное сияние, в Figma, а затем посмотрим, как мы можем анимировать их на одном кадре, используя новую функцию интерактивных компонентов. ⏱️Таймкоды:

0:00 - Введение 0:14 - Сайты для бесплатных сетчатых градиентов 1:13 - Создание сетчатых градиентов 2:54 - Создание различных фигур с помощью плагинов Blobs 4:00 - Анимация сетчатых градиентов с помощью интерактивных компонентов 5:00 - Итоговый результат

🎨 Дизайн База | #Плагины #Figma

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

🎨 IconPark — универсальная библиотека иконок для разработчиков IconPark — это набор из 3000+ иконок в SVG, React и Vue форматах. Иконки настраиваются по цвету, размеру, заливке и толщине прямо на сайте. Удобный интерактивный редактор позволяет мгновенно кастомизировать и копировать код. Сервис поддерживает четыре стиля (outline, filled, two-tone, multi-color). Есть плагин для Figma и NPM-библиотека для интеграции. P.S.: Отличный выбор для единого визуального стиля в проектах без лишней возни 👍 🎨 Дизайн База | #Сервис #Иконки

👩‍💻 TOUCHÉ Сайт магазина косметики. 🟠 Сложность: Легкий 🟠 Адаптивность: Есть 🟠 Язык: Английский 🎨 Дизайн База | #Макеты #Figma

👨‍💻 Sticky Navigation (Active state follow through scroll) Меню навигации 🟠 Сложность: Легко 🟠 Стек: #HTML #CSS #JS 🎨 Дизайн База | #CodePen

✍️ Шпаргалка по видам шрифтов 🎨 Дизайн База | #Шпаргалка #Шрифты

⚡️ Бесплатное обучение фронтенду (HTML/CSS + JS + React) с нуля с поддержкой от наставника Можно неделями гуглить инфу по JS и смотреть туториалы, читать книги, делать задачки в тренажёрах,но всё равно не понимать, как из этого собрать нормальынй сайт. С 20 июня действующий тимлид и опытный разработчик запускает бесплатное обучение в своём телеграм-канале. Участники разработают фронтенд для копии «Авито» 💡Вот план обучения: — день 1: Начинаем верстку. Верстаем шапку, элемент Поиск. — день 2: Про верстку. Верстаем контент главной страницы и карточку товара. Верстаем страницу одного товара — день 3: Подключаем JS. Изучаем базовые понятия. Обработка событий. — день 4: Базовое приложение React. Компонентный подход. — день 5: Переносим верстку в приложение React. Подключаем роутинг. Создаем страничку одного товара Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как джуну стартовать на фрилансе или устроиться на работу Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, — приходите на интенсив. Увидите путь от вёрстки до React и сможете продолжать изучать фронтенд без хаоса в голове. 👉Участвовать бесплатно Первый урок уже доступен

👩‍💻 Setting Switches Три переключателя настроек 🟠 Сложность: Легко 🟠 Стек: #HTML #CSS 🎨 Дизайн База | #CodePen

👩‍💻 Finsweet Корпоративный сайт компании 🟠 Сложность: Легкий 🟠 Адаптивность: Нет 🟠 Язык: Английский 🎨 Дизайн База | #Макеты #Figma

✍️ Хороший урок по Auto Layout Auto Layout — это мощный инструмент для создания динамических и адаптивных элементов интерфейса. Он позволяет элементам автоматически подстраиваться под их содержимое или размер контейнера Это делает его идеальным для кнопок, карт и других компонентов, которые должны адаптироваться к различным размерам экрана или длине контента. Советую ознакомиться с видео всем, кто начинает работать в Figma, будет полезно 😊 🎨 Дизайн База | #Гайды #Figma

👩‍💻 LUXTRIPS Сайт туристического агентства 🟠 Сложность: Средний 🟠 Адаптивность: Есть 🟠 Язык: Английский 🎨 Дизайн База | #Макеты #Figma

👩‍💻 ACSIMUM Сайт магазина медицинского оборудования. 🟠 Сложность: Средний 🟠 Адаптивность: Нет 🟠 Язык: Русский 🎨 Дизайн База | #Макеты #Figma

👨‍💻 Animated Login Form Анимированная форма для регистрации на сайте 🟠 Сложность: Лёгкий 🟠 Стек: #HTML #CSS 🎨 Дизайн База | #CodePen

💯Это должен знать каждый, кто хочет создавать стильные, функциональные и производительные веб-сайты по последним трендам! 🤫Есть секрет, который знают самые успешные разработчики и он позволяет им снимать сливки с рынка. 🚀А прямо сейчас мы раскроем его вам: нельзя просто так взять, сверстать сайт, а затем выпустить без тестирования в релиз. Да и тестировать нужно особенным образом. Хотите знать как? ❗️Подготовили исчерпывающий пошаговый гайд по тестированию вёрстки для фронтендеров и владельцев веб-студий на основе нашего QA-опыта 16+ лет и 530+ успешных кейсов.  Напишите нам в ЛС: @Quality_lab_chat, чтобы получить гайд бесплатно. Он позволит повысить качество вёрстки, а в результате и чек на услуги.  💻Хотите ещё больше прокачаться или срочно нужно тестирование на аутсорсинге? Заходите в наш телеграм-бот! Получите больше экспертных гайдов и чек-листов по фронтенду, бэкенду и разработке, запишитесь на бесплатную консультацию, подробнее узнайте о наших услугах.   #реклама О рекламодателе erid: 2W5zFHReeLx

🟡 Button Draw on Hover Mixin Анимация появления рамки вокруг ссылки с заливкой всей кнопки в конце 🖼️ Код на CodePen 🎨 Дизайн База | #CodePen

🟡 Gallery Hover Effect Карточки с интересным эффектом при наведении 🖼️ Код на CodePen 🎨 Дизайн База | #CodePen

ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ Айтишники поймут ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ

👨‍💻 Music Player with slider Музыкальный плеер со слайдером и выбором песен. 🟠 Сложность: Сложный 🟠 Стек: #HTML #CSS #JS 🎨 Дизайн База | #CodePen

👩‍💻 COMPANY Сайт транспортной компании. 🟠 Сложность: Легкий 🟠 Адаптивность: Нет 🟠 Язык: Русский 🎨 Дизайн База | #Макеты #Figma