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

https://www.youtube.com/playlist?list=PLvWwA9iDlhHAT7VS4rQH65YGupmJH18a9?

#video #html #css #web #frontend

​Screenshoter-WEB – python-скрипт с графическим интерфейсом на qt5 для создания скриншотов веб сайтов в необходимом разрешении и с необходимым масштабом

⤷ Ссылка на проект

@htmlcssjavas | #Interesting #Web #Browser

COLORION — сайт с огромным числом цветовых подборок

Коллекцию представленных на платформе палет можно использовать как в создании сайтов, так и приложений. При этом подходящие варианты смогут найти как приверженцы material-, так flat-дизайнов.

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

#web #дизайн

Gray Grids — онлайн-площадка с шаблонами Bootstrap и отзывчивыми веб-шаблонами HTML

Здесь можно найти варианты оформления практически на любой вкус. Есть как варианты стоимостью в несколько десятков долларов, так и совершенно бесплатные варианты.

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

#bootstrap #web #html

CSS Transform — визуализатор двух- и трёхмерных трансформаций CSS3

С его помощью можно максимально наглядно работать с изменением объектов при помощи CSS: начиная с поворотов и масштабирования, заканчивая игрой с перспективой.

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

#css #web #визуализатор

Windframe — инструмент для быстрого создания/прототипирования сайтов с помощью Tailwind CSS

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

При этом создавать или настраивать дизайн можно при помощи многочисленных опций

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

#web #css

Vercel — веб-платформа для frontend-разработчиков

С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN

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

#web #frontend

@htmlcssjavas

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

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

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

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

#web #видео

ColorZilla — удобный инструмент для работы с цветами и графикой веб-страниц

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

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

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

#цвет #web

SnipCSS — инструмент для извлечения CSS из веб-компонентов

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

При этом вы также можете заменить любой авторский текст, изображение и SVG на данные, сгенерированные AI, или иконки под лицензией MIT

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

#CSS #web #code

CSS Selectors/Combinators Classifier — классификатор селекторов и комбинаторов CSS

Он предназначен для организации и выделения селекторов и комбинаторов CSS по типам

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

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

#CSS #web #code

Best CSS Button Generator — генератор олдовых стилей кнопок на CSS

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

Вы можете выбрать из 30+ предопределённых стилей или цветовых тем, которые затем можно легко настроить, чтобы они соответствовали интерфейсу вашего сайта

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

#CSS #web

Инструмент для добавления интерактивности HTML-страницам

Благодаря такому инструменту вы получаете доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events прямо из HTML, без необходимости обрабатывать это всё на стороне JS. Так вы сможете сконцентрироваться на вёрстке и даже делать интерактивные страницы без знания JavaScript или CSS.

Ссылка на инструмент: htmx

#инструмент #web #frontend