Made in HTML/CSS
1.5K subscribers
732 photos
39 videos
2 files
657 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://t.me/ZilantTG
Download Telegram
Напишите модульный 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
PostCSS – это модульный препроцессор с простым ядром, состоящим из двух компонентов:

Парсер, который преобразует 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
👍6🔥2
WordPress – это популярная платформа для создания и управления веб-сайтами. Она идеально подходит для блогеров, малого бизнеса и любых пользователей, желающих создать профессиональный сайт без необходимости глубоких технических знаний.

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

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

Made in HTML/CSS
👍7
Включение вибрации на смартфоне

Да, это возможно. Метод vibrate() объекта window.navigator позволяет включить вибрацию на мобильном устройстве.

Методу можно передать параметр – время вибрации в миллисекундах. Также можно задать паттерн, чередующий интервалы вибрации и пауз, передав методу массив чисел.


Made in HTML/CSS
👍4👨‍💻2
Инструмент Readme.so позволяет удобно составлять README файл.
Каждый разработчик хотя бы раз в жизни сталкивался с написанием этого документа для своего проекта, и порой этот процесс довольно утомительный. Данный сайт позволяет наглядно видеть результат по мере заполнения документа и разделять содержимое на разные секции.

Made in HTML/CSS
🔥3👍2
Какая разница между элементами <span> и <div>?

Элемент <div> является блочным и предназначен для структурирования крупных разделов веб-страницы. Элемент <span>, напротив, строчный и используется для оформления небольших фрагментов контента, таких как текст или изображения.

Важно помнить: блочные элементы нельзя размещать внутри строчных. Например, помещение <div> внутрь <span> нарушает правила вложенности HTML-тегов.

Made in HTML/CSS
👍6🔥1
Bracket Pair Color DLW - это популярное расширение для Visual Studio Code , которое улучшает читаемость кода, раскрашивая парные скобки в разные цвета.

Made in HTML/CSS
👍5🔥1
Свойство -webkit-line-clamp позволяет ограничить текст определенным количеством строк и добавляет многоточие (...) при превышении этого лимита.

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



Made in HTML/CSS
👍6🔥1
Язык TypeScript — это доработанная версия JavaScript. Он помогает писать более чистый и безопасный код, так как предупреждает об ошибках ещё до запуска программы.

TypeScript компилируется в JavaScript. Это значит, что код не выполняется напрямую в браузере. Сначала компилятор TypeScript преобразует его в обычный JavaScript. Только после этого он может быть выполнен в браузере или на Node.js — специальном движке, который запускает JavaScript на сервере
.

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

Made in HTML/CSS
👍5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Position: sticky; — это значение свойства position в CSS, которое позволяет элементу оставаться на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.


Made in HTML/CSS
👍5
ColorZilla — расширение для браузера Chrome, которое позволяет определить цвет любого элемента на странице.

Для этого нужно запустить расширение, навести указатель мыши на интересующие элементы страницы, и на верхней панели появится HEX-код цвета («пипетка» для точного выбора цвета). В меню расширения есть инструмент, который даст доступ ко всем ранее найденным цветам.


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

Made in HTML/CSS
👍5
Чем отличаются куки-файлы, сессионное хранилище и локальное хранилище?

Локальное хранилище
, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных.

Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.

Куки-файлы
используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.

Made in HTML/CSS
👍3🔥2