​Интерактивная карта из любого изображения на чистом JavaScript

В этом видео автор покажет вам, как сделать интерактивную карту для сайта на чистом JS, на основе любой картинки. Работать карта будет с помощью JS и SVG. По примеру из видео вы научитесь создавать интерактивные элементы и добавлять к ним любой функционал.

Смотрите видео тут:

https://youtu.be/uN35_FX9LXo

#видео #туториал #фронтенд

Как создать веб-сайт с помощью ChatGPT: Использование искусственного интеллекта для создания сайта.

Разработка веб-сайта с помощью ChatGPT:

В сегодняшней быстро меняющейся среде способность быстро и эффективно разрабатывать веб-сайты имеет решающее значение для бизнеса и организаций. Поэтому многие инструменты искусственного интеллекта, такие как ChatGPT, приобрели значительную популярность в последние годы

Теперь пользователи могут использовать эту передовую технологию искусственного интеллекта для оптимизации и автоматизации различных задач веб-разработки. В этом руководстве мы углубимся в то, как создать веб-сайт с помощью ChatGPT.

📌  Читать

@htmlcssjavas

💾 Справочник в формате PDF

Полный курс разработки Node.js с примерами и разбором кода

Отличная методичка перед изучением Vue

#doc #js #node #vue

Jitter — интуитивный онлайн‑редактор анимаций

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

В целом, утилита может быть полезна для тех, кто хочет создать видео о своём продукте и использовать при этом технику motion design

Стоимость: #бесплатно (но есть платная подписка)

#web #видео

27 февраля стартовал финал совместного профиля «Искусственный интеллект» Национальной технологической олимпиады и Академии искусственного интеллекта для школьников Благотворительного фонда Сбербанка «Вклад в будущее». В него прошли более 100 школьников из 27 регионов России и Казахстана. Всего участников было более 6000. Финальное испытание было подготовлено Sber AI, по итогам профильного тура победители получат возможность пройти оплачиваемую стажировку в Сбере и компаниях-партнерах. В текущем году призовой фонд профиля превышает 4 млн руб.

Stable Diffusion — онлайн инструмент для генерации изображений на основе текста

Для большинства утилита вряд ли станет открытием — многие уже успели «завести» Stable Diffusion на своём железе

Но немногие знают, что им можно воспользоваться онлайн и даже без регистрации. Единственное, придётся подождать небольшую очередь

Далее всё как и везде: пишете текстовое описание изображения, а нейросеть генерирует на его основе несколько вариантов

Стоимость: #бесплатно

#нейросеть #изображения

Скоро на всех лендингах мира: дизайнер сделал идеально блестящую кнопку, на которой можно увидеть своё отражение.

Заценить можно тут.

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Ещё не успели попробовать Flexbox или хотите освежить в памяти все его возможности? В этой статье мы собрали для вас все свойства и продемонстрировали их работу в гифках:

https://tproger.ru/articles/how-css-flexbox-works/

#css #фронтенд

​Шпаргалка по CSS

CSSReference.io — это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций:

https://cssreference.io/

#css #веб

Jam — простой инструмент для работы с багами

Jam автоматически создаёт отчёты об ошибках со всей необходимой информацией для разработчиков. Способ работы приложения похож на метод создания скриншота, только Jam упрощает процесс создания сообщений об ошибках и делает работу за вас:

https://jam.dev/

#tools

Полезная шпаргалка для веб-тестировщиков за авторством Святослава Куликова.

Советы, которые помогут увеличить скорость загрузки страницы

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

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

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#html #css

​Браузерные игры, которые помогут легко изучить CSS

1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.

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

3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.

#css

​Десять советов по улучшению CSS-переходов и анимации

Одни анимации и переходы только украшают приложение — другие делают его хуже. Пользователи могут не понимать, что такого особенного в переходах или анимации, но они могут чётко определить разницу между хорошим и плохим.

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций :

https://joshcollinsworth.com/blog/great-transitions

#css

Бесконечная прокрутка на сайте

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

https://evgeniiray.medium.com/infinite-scrolling-in-web-ultimate-guide-b698124b3172

@htmlcssjavas

Добавление видео на фон с максимальной оптимизацией

Видео в качестве бэкграунда используется не так часто и это понятно — сайт с таким фоном получается куда более «тяжёлым», чем с картинками или просто CSS-оформлением. Да и не всегда видео на фоне работает достаточно плавно.

Если вы всё-таки хотите добавить такую особенность своему сайту, то вам пригодится эта статья. Здесь вы узнаете, как правильно оптимизировать видео, сделать отзывчивым и интерактивным без снижения производительности:

https://blog.logrocket.com/optimizing-video-backgrounds-css-javascript/

#фронтенд