Мультиплексированные шрифты (иногда называемые «дуплексными» или «едиными по ширине») сохраняют постоянную заданную ширину по крайней мере по одной оси изменения, например, по весу, что позволяет вносить корректировки, не вызывая перекомпоновки текста.

Подробная информация и реализация проекта — в нашем блоге, переходите по ссылке!

#HTML

Серый. Кто его не любит?
Когда речь идет о создании сайтов, удобно иметь в своем распоряжении несколько оттенков серого, независимо от цветовой палитры. Мы используем их для создания границ и тонких разделителей, теней, а также для обозначения изменений состояния, не перегружая пользователя цветом. Некоторые дизайнеры считают, что для передачи тонкостей на сайте необходимо использовать несколько оттенков серого.

В этом посте мы создадим палитру серых цветов с помощью функции CSS color-mix(). Давайте вместе посмотрим, как реализуется проект!

#CSS #HTML

Недавно я сделал анимированную границу. В начале границы вообще нет, затем вы видите, как она прорисовывается с одного угла. Конечно, нет простого способа анимировать всю границу.

Звучит сложно, код немного сложный, но это не так уж и сложно, если понять, как код работает.
Примеры кода вы найдете в новой статье по ссылке

#HTML #CSS #JavaScript

Демонстрация ваших лучших проектов, чтобы дать потенциальным работодателям или клиентам представление о ваших возможностях, — это шаг, который должен сделать каждый аналитик данных.

В этом проекте мы создадим веб-сайт-портфолио, на котором будут отражены ваши навыки с использованием HTML, CSS и небольшого количества JavaScript, и развернем его на бесплатной странице GitHub для публичного доступа.

#JavaScript #CSS #HTML #GitHub

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

Давайте посмотрим, как мы пришли к современным решениям, таким как React!

#CSS #React #HTML

Как создать макет Masonry

Компоновка Masonry (каменной кладки) — это конструкция на основе сетки, в котором минимизированы вертикальные зазоры между элементами.

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

Продолжите чтение в нашем блоге DevGang!

#CSS #HTML

Как открывать все ссылки в новой вкладке

Вы когда-нибудь пытались загрузить программное обеспечение со стороннего сайта? Когда вы нажимаете на кнопку загрузки, открывается множество вкладок с назойливой рекламой. Мне, как разработчику, интересно, как они программируют свой сайт для этого. Вы не поверите, это очень просто.

В этом уроке я покажу вам, как открыть все ссылки в новых вкладках с помощью JavaScript.

#JavaScript #HTML

Потоковая передача HTML

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

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

Обновление страницы, когда данные становятся доступными, почти всегда требует использования JavaScript. Однако, благодаря развитию декларативного теневого DOM и потоковой передачи тел HTTP разработчики получили новые методы асинхронного обновления страницы без использования JavaScript. Давайте рассмотрим практическое применение этих решений в нашей статье!

#HTML #JavaScript #DOM

5 уникальных элементов HTML, о которых вы могли не знать

HTML предлагает огромное количество элементов, которые могут улучшить способ представления контента в Интернете. Большинство разработчиков знакомы со стандартными тегами <div>, <p> и <a>, но есть и менее известные элементы, которые могут быть весьма полезны. В нашей новой статье мы представляем вам пять уникальных элементов HTML, о которых вы могли не знать.

#Начинающим #HTML

Оптимизация веб-дизайна с помощью переменных CSS.

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

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

#CSS #JavaScript #HTML

Захват событий и бабблинг

При использовании обработчиков событий на элементах мы сталкиваемся с проблемой, когда обработчики событий выполняются и для других элементов, которые не должны были быть вызваны в первую очередь. Почему так происходит?
Читайте об этом в нашей новой статье.

#JavaScript #HTML

Как создать 3D-эффекты в CSS

Существует аналогия, которая сравнивает языки программирования с домом: HTML — это структура дома (стены, перегородки), CSS — декор и оформление (мебель, интерьер), а JavaScript — функциональность (электроснабжение, сантехника).

В этой статье мы сосредоточимся на CSS, который, несмотря на то, что не является классическим языком разметки, по праву считается одним из самых популярных инструментов в веб-разработке. Многие задачи можно решить без привлечения JS.

На этом уроке вы научитесь создавать 3D-эффекты с помощью CSS, используя свойства и операции, которые позволяют управлять элементами в виртуальном 3D-пространстве. Мы также рассмотрим визуальные иллюзии с использованием теней и света. Переходите по ссылке!

#CSS #HTML #JavaScript

Топ 15 тегов на 2024 год

HTML знаком многим разработчикам, но часто воспринимается как инструмент для базовой структуры сайта. Несмотря на наличие HTML5, старые теги все еще популярны, что затрудняет поиск современных решений. К тому же, многие не знают о SEO-дружественных тегах HTML5.

В этой статье мы рассмотрим 15 малоизвестных HTML5-тегов с примерами, которые помогут вам расширить знания об этом языке.
Следите за нашими обновлениями, чтобы узнать о новых возможностях и повысить свой уровень программирования!

#HTML

Таймер обратного отсчета

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

В этом уроке мы рассмотрим оба подхода, начав с простого таймера обратного отсчета JavaScript, а затем перейдя к таймеру обратного отсчета только на CSS. В конце мы сравним производительность обоих подходов с помощью Chrome DevTools и обсудим каждый из их плюсов и минусов.

#JavaScript #CSS #HTML

Как создать базовый инструмент рисования

Инструмент рисования — это цифровое приложение или функция, которая позволяет пользователям создавать, редактировать и манипулировать визуальным контентом на компьютере или мобильном устройстве.

В этой статье мы создадим базовый инструмент рисования с использованием Tailwind CSS и JavaScript. Мы будем использовать элемент 'Canvas' для рисования на странице и метод toDataURL для сохранения рисунка в формате PNG.

#JavaScript #CSS #HTML

CSS Position — управление размещением элементов

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

#CSS #HTML

Кэширование статических тегов в WebForms Core

На веб-сайтах и в веб-приложениях часто встречаются статические элементы, которые постоянно запрашиваются с сервера. Кэширование таких элементов - непростая задача. В этой статье мы рассмотрим подход к кэшированию статических тегов с использованием технологии WebForms Core.

Кэширование в WebForms Core имеет множество применений. В данном руководстве мы сосредоточимся на полном кэшировании статических тегов веб-страницы в браузере пользователя, чтобы получить их с сервера лишь один раз. Кэширование статических тегов значительно снижает нагрузку на сеть.

#HTML #JavaScript #Кэш #Производительность #WebFormsCore

Как создать приложение для обмена сообщениями: пошаговое руководство

Обмен сообщениями стал неотъемлемой частью жизни, и Telegram — один из лидеров этой области. Если вы хотите создать свое собственное приложение для обмена сообщениями, это руководство поможет вам.

Мы рассмотрим ключевые функции, технические требования и рекомендации, чтобы ваше приложение выделялось. Переходите в блог DevGang и с новыми знаниями совершенствуйте свои проекты!

#JavaScript #HTML #CSS #Начинающим

Освоение JavaScript HTML DOM: создание динамических и интерактивных веб-страниц

Document Object Model (DOM) — это программный интерфейс для работы с веб-документами. Он представляет HTML-структуру страницы как иерархию объектов, давая возможность разработчикам управлять HTML и CSS с помощью JavaScript. Изучение DOM позволит создавать динамические и интерактивные веб-страницы.

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

#JavaScript #HTML #DOM #Начинающим

CSS scroll-state()

Chrome 133 основывается на запросах контейнеров, вводя запросы контейнеров с состоянием прокрутки. Управляемое браузером состояние для закрепленного позиционирования, точек привязки прокрутки и прокручиваемых элементов теперь можно запрашивать и адаптировать из CSS.

CSS предоставляет множество возможностей для создания плавных и интерактивных интерфейсов. Одной из таких возможностей является псевдокласс scroll-state(), который позволяет стилизовать элементы в зависимости от их состояния прокрутки.

В этой статье мы рассмотрим, как работает scroll-state(), разберём его возможные значения и примеры использования.

#CSS #HTML