Made in HTML/CSS – Telegram
Made in HTML/CSS
1.38K subscribers
754 photos
41 videos
2 files
677 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://news.1rj.ru/str/ZilantTG
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Плагин HTML to CSS для Visual Studio Code упрощает процесс написания и управления CSS-стилями для HTML-элементов. Среди его основных возможностей выделяется автоматическая генерация CSS (Создает базовые стили для HTML-элементов, что удобно для начальной настройки или быстрого прототипирования) и извлечение классов и ID (Извлекает имена классов и ID из HTML и создает соответствующие CSS-селекторы)

Made in HTML/CSS
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем прикольные часы с переключением темы с помощью JS

Made in HTML/CSS
🔥8👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Плагин Live Sass Compiler для Visual Studio Code упрощает процесс компиляции Sass/SCSS в CSS в реальном времени. Среди его основных возможностей выделяется автоматическая компиляция (Преобразует Sass/SCSS в CSS при сохранении файла, что удобно для быстрого прототипирования) и живой предпросмотр (Позволяет видеть изменения в браузере в реальном времени).

Made in HTML/CSS
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Этот проект создает визуально привлекательный эффект радужного свечения, который можно использовать для выделения элементов на веб-странице.

Made in HTML/CSS
🔥9
UnoCSS — атомарный CSS-движок, который динамически генерирует утилитарные классы на основе HTML и конфигурации.

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


🌐 Читать статью

Made in HTML/CSS
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Калькулятор позволяет пользователю вводить числа и выполнять базовые арифметические операции: сложение, вычитание, умножение и деление.

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


Made in HTML/CSS
🔥6
Сайты усложняются, и требования к скорости их загрузки растут. Вручную сжимать файлы и очищать проекты — долго.

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


🌐 Читать статью

Made in HTML/CSS
👍8🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Этот код представляет собой простой веб-переводчик, созданный с использованием HTML, CSS и JavaScript.

Можно использовать готовое API какого-нибудь переводчика. Или же, если уж хотите прям свой маленький переводчик, можно подготовить заранее свой список "вопросов - ответов".


Made in HTML/CSS
🔥6
Responsive Viewer — это расширение для браузера, специально разработанное для веб-разработчиков, чтобы помочь им тщательно проверять и тестировать адаптивность своих веб-сайтов на различных устройствах и экранах. Оно позволяет быстро и легко переключаться между различными разрешениями экранов, имитируя поведение сайта на мобильных устройствах, планшетах и десктопах.

Made in HTML/CSS
🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Анимированный Лоадер 🌟

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

1. Скольжение: Оранжевый квадрат плавно перемещается вверх-вниз, создавая эффект движения.
2. Вращение: Красный круг поворачивается, добавляя дополнительную динамику


Made in HTML/CSS
👍4🔥2
В этой статье Игорь Безлепкин, CEO сервиса SalesWidget и опытный fullstack-разработчик, делится своими наблюдениями и советами по выбору JS-фреймворка среди популярной троицы: React, Vue и Angular. Статья будет полезна как начинающим frontend-разработчикам, так и опытным backend-специалистам, желающим освоить фронтенд или кроссплатформенную мобильную разработку.

🌐 Читать статью

Made in HTML/CSS
🔥5
Переменные CSS (--primary-color, --font-size и т. д.) упрощают создание тем и управление ими. Измените одно значение, и оно распространится на всё приложение.

Чтобы объявить переменную в CSS, достаточно придумать для неё имя, поставить перед ним два дефиса, а после имени — двоеточие и значение переменной.



Made in HTML/CSS
👍5🔥2
Оптимизируйте изображения с помощью современных форматов

Переключитесь на WEBP или AVIF, чтобы уменьшить размер файлов и ускорить загрузку. Используйте такие инструменты, как ImageOptim или Squoosh, чтобы сжимать изображения без потери качества.

🌐 Читать статью

Made in HTML/CSS
🔥6
Напишите модульный JavaScript

Разбейте 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
🔥7
Wappalyzer — это расширение для браузера, которое помогает разработчикам и специалистам по кибербезопасности анализировать веб-сайты и выявлять используемые технологии. Оно предоставляет информацию о различных компонентах, таких как фреймворки, библиотеки, серверы, системы управления контентом (CMS) и другие инструменты, которые используются на сайте.

Made in HTML/CSS
🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Этот проект создает интерактивную кнопку с текстом "Go to channel" и стрелкой, которая анимируется при наведении и нажатии. Когда вы наводите курсор на кнопку, текст подчеркивается, а стрелка плавно сдвигается вправо. Всё это делает кнопку более привлекательной и динамичной для пользователей.

Made in HTML/CSS
👍10
Ssshape — это инструмент, предназначенный для создания и настройки SVG-фигур для веб-проектов. С помощью этого инструмента можно настраивать параметры фигур, такие как размеры, цвета, градиенты и другие свойства, чтобы они идеально соответствовали стилю вашего проекта.

Made in HTML/CSS
👍4🔥1
Что такое DOM?

DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.

Made in HTML/CSS
👍6🔥2
Icon Archive — это онлайн-платформа, предоставляющая доступ к огромной коллекции иконок для использования в веб-дизайне, приложениях и других проектах. Платформа предлагает широкий выбор иконок в различных стилях и форматах, что делает её полезной для дизайнеров и разработчиков.

Made in HTML/CSS
👍3🔥2
Что такое мета-теги?

Мета-теги — это теги, находящиеся в теге страницы <head> и описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.

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


Made in HTML/CSS
👍6🔥1