Shape Divider — бесплатный инструмент для облегчения экспорта красивых фигурных разделителей

Итоговый результат выдаётся сразу в трёх вариантах: HTML, CSS и SVG

При этом можно настраивать такие «особенности», как высота и «частота» фигурной волны, а также её цвет

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

#web #css #html

SVG Generator — простенький инструмент для генерации волнистых html-элементов

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

Делается всё максимально просто — необходимо лишь «взять» красные маркеры и создать с их помощью кривую, которая вам понравится

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

#web #html #svg

Stripo — бесплатный конструктор шаблонов электронной почты

С его помощью можно достаточно легко создать профессиональные и отзывчивые электронные письма. Что самое приятное — нет необходимости знать что-либо про то, как устроен HTML

Стоимость: #бесплатно (но есть платные тарифы)

#email #html #конструктор

Static forms — пожалуй, один из простейших способов интегрировать форму в ваши веб-сайты

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

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

#html #web #бесплатно

Surge — площадка для бесплатной публикации статических сайтов

Самое приятное, что опубликовать свой проект можно прямо из командной строки буквально в одну команду. Поддерживаются HTML, CSS, JavaScript

На данный момент с помощью Surge уже опубликовано более 1,5 млн проектов

Стоимость: #бесплатно (но есть и платный тариф)

#web #html #css

You might not need JavaScript — страница, которая показывает, что бывают случаи, когда можно обойтись и без JS

Вчера мы уже рекомендовали похожий веб-сайт, но для jQuery. Теперь очередь дошла и до JavaScript

Например, здесь можно увидеть реализацию слайдера, форм валидация, поля для загрузки файлов, которые реализованы лишь силами HTML и CSS

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

#html #js #css

HTML Minifier — сервис для лёгкой минимизации HTML, CSS и JS

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

Минималистичный дизайн проекта помогает пользоваться им, так как не запугивает огромным числом непонятных настроек и пунктов

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

#html #css #js

HTML Cleaner — бесплатный улучшайзер HTML, CSS и JavaScript

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

Из прочих «плюшек» можно отметить конвертацию Word-документов в аккуратный HTML и любые другие визуальные документы. В том числе Excel, PDF, Google Docs и т.д

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

#web #html #css

CodePen — онлайн-среда для тестирования и обмена фрагментами кода HTML, CSS и JavaScript

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

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

#web #js #html

htmlq — инструмент для работы с HTML прямо из Терминала

С его помощью можно запрашивать HTML-страницы с помощью CSS-селекторов: идентификаторов, атрибутов, текстовые фильтров и узлов

При этом возвращает утилита ссылки, а также умеет извлекать текст, удалять узлы и т.д

htmlq доступен на Linux, FreeBSD и macOS

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

#terminal #html

ZenPen — максимально минималистичный онлайн‑редактор текстов

Из интересных особенностей: поддержка форматирования, возможность прикреплять ссылки к словам и тёмная тема

Сохранить получившийся текст можно в форматах markdown и html

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

#редактор #markdown #html

htmx — инструмент для создания интерактивных веб-приложений с HTML и минимальным JavaScript

Он предназначен для девелоперов, которые хотят упростить свои проекты и ускорить разработку

htmx отличается от конкурентов тем, что он не требует знания сложных JavaScript-фреймворков и позволяет использовать HTML как основной язык

Это позволяет сосредоточиться на структуре приложения, а не на сложных технических деталях.

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

#HTML #web #code

Wweb.dev — генератор анимированных фонов CSS

С его помощью вы можете буквально в пару кликов создавать и настраивать анимированные фоны для своих веб-проектов

При этом платформа выдаёт вам как готовый HTML-код, так и CSS

Незаменимый помощник, если нужно быстро собрать симпатичный нестатичный бэкграунд, а времени на ручное написание «велосипеда» нет

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

#web #css #html

HTML DOM — мощный инструмент для управления HTML-документами с помощью ванильного JavaScript

Утилита позволяет легко обращаться к элементам страницы, изменять её содержимое, стили, атрибуты, а также добавлять и удалять элементы динамически

В целом, при помощи HTML DOM можно создавать современное интерактивное и отзывчивое веб-приложение

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

#HTML #JavaScript #web

LiveCSSPlay — пошаговое применение CSS к вашему HTML

LiveCSSPlay представляет из себя интерактивный инструмент, позволяющий вам писать CSS-код по частям, а не сразу целиком

Далее вы можете наблюдать, как ваш HTML-документ стилизуется шаг за шагом

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

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

#CSS #HTML #web

ColourPicker — утилита для выбора HTML-цветов на рабочем столе Windows

Среди её основных функций:

- поддержка нескольких мониторов (включая 4K);
- запись истории выбранных цветов;
- возможность копировать выбранные цвета в буфер обмена.

Приложение доступно для скачивания в Windows Store, не содержит рекламы, вредоносных программ и дополнительного программного обеспечения

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

#цвет #HTML #web

HTMLrev — галерея бесплатных HTML-шаблонов

Причём здесь можно найти совершенно разные варианты: и Bootstrap, и Tailwind и т.д

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

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

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

#HTML #Bootstrap #web

Mirror Button — кнопка для вашего сайта с отражением пользователя

Реализована подобная «магия» достаточно интересным способом: в кнопку интегрировано видео, которое отображает изображение с камеры пользователя в реальном времени

Проект демонстрирует использование HTML, CSS и JavaScript для создания не самого сложного, но очень оригинального веб-элемента

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

#web #HTML #JS

Uploadcare — управление загрузкой, обработкой и доставкой файлов

По словам самих разработчиков, инструмент является полным решением «из коробки», созданным инженерами для инженеров

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

Инструмент предлагает HTML5-виджет для загрузки файлов и поддерживает API, которые легко интегрируются в любой стек

Стоимость: #бесплатно (но есть платные тарифы)

#web #html

Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Подробности.

#javascript #html