Responsive Viewer — это расширение для браузера, специально разработанное для веб-разработчиков, чтобы помочь им тщательно проверять и тестировать адаптивность своих веб-сайтов на различных устройствах и экранах. Оно позволяет быстро и легко переключаться между различными разрешениями экранов, имитируя поведение сайта на мобильных устройствах, планшетах и десктопах.
Made in HTML/CSS
Made in HTML/CSS
🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Анимированный Лоадер 🌟
Представляем вашему вниманию стильный и динамичный лоадер, созданный с помощью HTML и SCSS. Этот элемент отображается в виде квадрата с закругленными углами, внутри которого происходят две захватывающие анимации:
1. Скольжение: Оранжевый квадрат плавно перемещается вверх-вниз, создавая эффект движения.
2. Вращение: Красный круг поворачивается, добавляя дополнительную динамику
Made in HTML/CSS
Представляем вашему вниманию стильный и динамичный лоадер, созданный с помощью HTML и SCSS. Этот элемент отображается в виде квадрата с закругленными углами, внутри которого происходят две захватывающие анимации:
1. Скольжение: Оранжевый квадрат плавно перемещается вверх-вниз, создавая эффект движения.
2. Вращение: Красный круг поворачивается, добавляя дополнительную динамику
Made in HTML/CSS
👍4🔥2
В этой статье Игорь Безлепкин, CEO сервиса SalesWidget и опытный fullstack-разработчик, делится своими наблюдениями и советами по выбору JS-фреймворка среди популярной троицы: React, Vue и Angular. Статья будет полезна как начинающим frontend-разработчикам, так и опытным backend-специалистам, желающим освоить фронтенд или кроссплатформенную мобильную разработку.
🌐 Читать статью
Made in HTML/CSS
🌐 Читать статью
Made in HTML/CSS
🔥5
Переменные CSS (--primary-color, --font-size и т. д.) упрощают создание тем и управление ими. Измените одно значение, и оно распространится на всё приложение.
Чтобы объявить переменную в CSS, достаточно придумать для неё имя, поставить перед ним два дефиса, а после имени — двоеточие и значение переменной.
Made in HTML/CSS
Чтобы объявить переменную в CSS, достаточно придумать для неё имя, поставить перед ним два дефиса, а после имени — двоеточие и значение переменной.
Made in HTML/CSS
👍5🔥2
Оптимизируйте изображения с помощью современных форматов
Переключитесь на WEBP или AVIF, чтобы уменьшить размер файлов и ускорить загрузку. Используйте такие инструменты, как ImageOptim или Squoosh, чтобы сжимать изображения без потери качества.
🌐 Читать статью
Made in HTML/CSS
Переключитесь на WEBP или AVIF, чтобы уменьшить размер файлов и ускорить загрузку. Используйте такие инструменты, как ImageOptim или Squoosh, чтобы сжимать изображения без потери качества.
🌐 Читать статью
Made in HTML/CSS
🔥6
Напишите модульный JavaScript
Разбейте JavaScript на небольшие многократно используемые модули. Используйте функции ES6+, такие как import/export, чтобы сделать код более организованным и удобным для поддержки.
🌐 Читать статью
Made in HTML/CSS
Разбейте JavaScript на небольшие многократно используемые модули. Используйте функции ES6+, такие как import/export, чтобы сделать код более организованным и удобным для поддержки.
🌐 Читать статью
Made in HTML/CSS
👍4🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Этот проект создает интерактивную карточку, которая переворачивается при наведении курсора, показывая две стороны: лицевую и обратную. Карточка имеет 3D-эффект благодаря использованию CSS-свойств, таких как perspective и transform-style.
Made in HTML/CSS
Made in HTML/CSS
🔥7
Wappalyzer — это расширение для браузера, которое помогает разработчикам и специалистам по кибербезопасности анализировать веб-сайты и выявлять используемые технологии. Оно предоставляет информацию о различных компонентах, таких как фреймворки, библиотеки, серверы, системы управления контентом (CMS) и другие инструменты, которые используются на сайте.
Made in HTML/CSS
Made in HTML/CSS
🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Этот проект создает интерактивную кнопку с текстом "Go to channel" и стрелкой, которая анимируется при наведении и нажатии. Когда вы наводите курсор на кнопку, текст подчеркивается, а стрелка плавно сдвигается вправо. Всё это делает кнопку более привлекательной и динамичной для пользователей.
Made in HTML/CSS
Made in HTML/CSS
👍10
Ssshape — это инструмент, предназначенный для создания и настройки SVG-фигур для веб-проектов. С помощью этого инструмента можно настраивать параметры фигур, такие как размеры, цвета, градиенты и другие свойства, чтобы они идеально соответствовали стилю вашего проекта.
Made in HTML/CSS
Made in HTML/CSS
👍4🔥1
Что такое DOM?
DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.
Made in HTML/CSS
DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.
Made in HTML/CSS
👍6🔥2
Icon Archive — это онлайн-платформа, предоставляющая доступ к огромной коллекции иконок для использования в веб-дизайне, приложениях и других проектах. Платформа предлагает широкий выбор иконок в различных стилях и форматах, что делает её полезной для дизайнеров и разработчиков.
Made in HTML/CSS
Made in HTML/CSS
👍3🔥2
Что такое мета-теги?
Мета-теги — это теги, находящиеся в теге страницы <head> и описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.
Made in HTML/CSS
Мета-теги — это теги, находящиеся в теге страницы <head> и описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.
Их основная задача заключается в том, чтобы кратко описывать содержимое страниц поисковым системам
Made in HTML/CSS
👍6🔥1
PostCSS – это модульный препроцессор с простым ядром, состоящим из двух компонентов:
Парсер, который преобразует CSS-строку в абстрактное синтаксическое дерево (AST) из JavaScript-объектов.
Стригифайер, который выполняет обратное преобразование, создавая новый CSS из AST.
Ядро PostCSS удобно и полезно, но само по себе не изменяет CSS – оно лишь парсит и восстанавливает его, сохраняя каждый байт, включая пробелы.
🌐 Читать статью
Made in HTML/CSS
Парсер, который преобразует CSS-строку в абстрактное синтаксическое дерево (AST) из JavaScript-объектов.
Стригифайер, который выполняет обратное преобразование, создавая новый CSS из AST.
Ядро PostCSS удобно и полезно, но само по себе не изменяет CSS – оно лишь парсит и восстанавливает его, сохраняя каждый байт, включая пробелы.
🌐 Читать статью
Made in HTML/CSS
👍4🔥2
Pull-to-refresh (потяни для обновления) - это распространённый паттерн в мобильной разработке. Если он вам не подходит, просто отключите этот эффект с помощью CSS-свойства overscroll-behavior-y со значением contain.
Это свойство также полезно для управления прокруткой внутри модальных окон – оно предотвращает перехват скролла основной страницей при достижении границы.
Made in HTML/CSS
Это свойство также полезно для управления прокруткой внутри модальных окон – оно предотвращает перехват скролла основной страницей при достижении границы.
Made in HTML/CSS
👍6🔥2
WordPress – это популярная платформа для создания и управления веб-сайтами. Она идеально подходит для блогеров, малого бизнеса и любых пользователей, желающих создать профессиональный сайт без необходимости глубоких технических знаний.
С WordPress легко публиковать контент, управлять дизайном и расширять функциональность с помощью плагинов и тем.
🌐 Читать статью
Made in HTML/CSS
С WordPress легко публиковать контент, управлять дизайном и расширять функциональность с помощью плагинов и тем.
🌐 Читать статью
Made in HTML/CSS
👍7
Включение вибрации на смартфоне
Да, это возможно. Метод vibrate() объекта window.navigator позволяет включить вибрацию на мобильном устройстве.
Методу можно передать параметр – время вибрации в миллисекундах. Также можно задать паттерн, чередующий интервалы вибрации и пауз, передав методу массив чисел.
Made in HTML/CSS
Да, это возможно. Метод vibrate() объекта window.navigator позволяет включить вибрацию на мобильном устройстве.
Методу можно передать параметр – время вибрации в миллисекундах. Также можно задать паттерн, чередующий интервалы вибрации и пауз, передав методу массив чисел.
Made in HTML/CSS
👍4👨💻2
Инструмент Readme.so позволяет удобно составлять README файл.
Каждый разработчик хотя бы раз в жизни сталкивался с написанием этого документа для своего проекта, и порой этот процесс довольно утомительный. Данный сайт позволяет наглядно видеть результат по мере заполнения документа и разделять содержимое на разные секции.
Made in HTML/CSS
Каждый разработчик хотя бы раз в жизни сталкивался с написанием этого документа для своего проекта, и порой этот процесс довольно утомительный. Данный сайт позволяет наглядно видеть результат по мере заполнения документа и разделять содержимое на разные секции.
Made in HTML/CSS
🔥3👍2
Какая разница между элементами <span> и <div>?
Элемент <div> является блочным и предназначен для структурирования крупных разделов веб-страницы. Элемент <span>, напротив, строчный и используется для оформления небольших фрагментов контента, таких как текст или изображения.
Важно помнить: блочные элементы нельзя размещать внутри строчных. Например, помещение <div> внутрь <span> нарушает правила вложенности HTML-тегов.
Made in HTML/CSS
Элемент <div> является блочным и предназначен для структурирования крупных разделов веб-страницы. Элемент <span>, напротив, строчный и используется для оформления небольших фрагментов контента, таких как текст или изображения.
Важно помнить: блочные элементы нельзя размещать внутри строчных. Например, помещение <div> внутрь <span> нарушает правила вложенности HTML-тегов.
Made in HTML/CSS
👍6🔥1
Bracket Pair Color DLW - это популярное расширение для Visual Studio Code , которое улучшает читаемость кода, раскрашивая парные скобки в разные цвета.
Made in HTML/CSS
Made in HTML/CSS
👍5🔥1