🛠 Storybook — frontend-мастерская для создания компонентов UI и страниц в изоляции

Инструмент отлично подходит для разработки труднодоступных состояний и граничных случаев без необходимости запуска всего приложения

На сайте проекта сообщается, что Storybook особенно будет полезен для тех, кто использует в работе React, Vue, Angular и HTML.

🌍 Сайт

WebDEV #инструменты

WebDEV #test #JavaScript

Выберите правильный вариант 👇🏼

💡 Внедряйте принципы эмоционального дизайна

Эмоциональный дизайн. Эмоции играют важную роль в восприятии сайта. Используйте цвета, шрифты и изображения, чтобы вызывать нужные эмоции у пользователей. Эмоционально привлекательный сайт не только лучше запоминается, но и способствует лояльности пользователей.

WebDEV #советы

WebDEV #test #CSS

Выберите правильный вариант 👇🏼

🛠 NPM – это стандартный менеджер пакетов, который предназначен для JavaScript-разработки.

С его помощью вы можете найти и установить пакеты (программы), которые в дальнейшем сможете использовать в своих программах. 

Для того, чтобы добавить npm в свой проект, просто введите команду «npm init». Когда вы запустите эту команду, в текущем каталоге будет создан файл package.json. В этом файле хранится список ваших зависимостей. Для npm этот файл выглядит как идентификационная карточка проекта. 
Вы можете добавлять зависимости в этот файл. Для этого вам нужна команда «npm install (имя_пакета)».

🌍 Сайт

WebDEV #инструменты

💡 Внедряйте темную тему для удобства пользователя. Это база

Тёмная тема. Множество пользователей предпочитают тёмные темы из-за их удобства для глаз в условиях низкой освещённости. Реализуйте переключатель темной и светлой темы в вашем дизайне, чтобы повысить комфорт и адаптируемость интерфейса для разных условий.

WebDEV #советы

Верстка сайта по макету из Figma без Dev Mode в бесплатной версии

Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовую веб-страницу, которая будет выглядеть точно так же, как в макете из Figma.

📺 YouTube

WebDEV #видео

WebDEV #test #HTML

Выберите правильный вариант 👇🏼

Делаем анимацию при прокрутке на JavaScript

Анимация при прокрутке страницы это, пожалуй, самое удобное, что можно сделать с сайтом, используя JavaScript.

В этом видео автор покажет, как сделать такую анимацию на CSS и JavaScript, без использования тяжёлых сторонних библиотек.

📺 YouTube

WebDEV #видео

WebDEV #test #JavaScript

Выберите правильный вариант 👇🏼

WebDEV #test #CSS

Выберите правильный вариант 👇🏼

Figma: wow-дизайн с фишками / масками / плагинами

Курс "Figma: wow-дизайн с фишками, масками и плагинами" покажет, как использовать продвинутые инструменты Figma, включая маски и плагины, для создания впечатляющих дизайнов. Вы научитесь применять полезные фишки для улучшения вашего рабочего процесса и создания эффектных интерфейсов.

📺 YouTube

WebDEV #видео

💡 Добавляйте анимацию только по делу

Функциональная анимация. Анимация может сделать интерфейс более динамичным, но важно использовать её с умом. Внедряйте анимацию только там, где она улучшает UX: для индикации загрузки, изменения состояний кнопок или визуализации сложных действий.

WebDEV #советы

WebDEV #test #HTML

Выберите правильный вариант 👇🏼