Удивительный инструмент для тренировки навыков — BigDevSoon!

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

Особенности платформы:

★ Классификация проектов по уровням сложности — junior, regular и senior.
★ Дизайны Figma для каждого проекта.
★ Игровая система для отслеживания прогресса.

🌐 Прочитать статью

Made in HTML/CSS

Плагин HTML to CSS для Visual Studio Code упрощает процесс написания и управления CSS-стилями для HTML-элементов. Среди его основных возможностей выделяется автоматическая генерация CSS (Создает базовые стили для HTML-элементов, что удобно для начальной настройки или быстрого прототипирования) и извлечение классов и ID (Извлекает имена классов и ID из HTML и создает соответствующие CSS-селекторы)

Made in HTML/CSS

Плагин Live Sass Compiler для Visual Studio Code упрощает процесс компиляции Sass/SCSS в CSS в реальном времени. Среди его основных возможностей выделяется автоматическая компиляция (Преобразует Sass/SCSS в CSS при сохранении файла, что удобно для быстрого прототипирования) и живой предпросмотр (Позволяет видеть изменения в браузере в реальном времени).

Made in HTML/CSS

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

Made in HTML/CSS

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

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

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

Made in HTML/CSS

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

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

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

Made in HTML/CSS

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

Made in HTML/CSS

🌟 Анимированный Лоадер 🌟

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

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

Made in HTML/CSS

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

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

Made in HTML/CSS

Оптимизируйте изображения с помощью современных форматов

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

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

Made in HTML/CSS

Напишите модульный JavaScript

Разбейте JavaScript на небольшие многократно используемые модули. Используйте функции ES6+, такие как import/export, чтобы сделать код более организованным и удобным для поддержки.

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

Made in HTML/CSS

Этот проект создает интерактивную карточку, которая переворачивается при наведении курсора, показывая две стороны: лицевую и обратную. Карточка имеет 3D-эффект благодаря использованию CSS-свойств, таких как perspective и transform-style.

Made in HTML/CSS

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

Made in HTML/CSS

Этот проект создает интерактивную кнопку с текстом "Go to channel" и стрелкой, которая анимируется при наведении и нажатии. Когда вы наводите курсор на кнопку, текст подчеркивается, а стрелка плавно сдвигается вправо. Всё это делает кнопку более привлекательной и динамичной для пользователей.

Made in HTML/CSS

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

Made in HTML/CSS

Что такое DOM?

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

Made in HTML/CSS