Свойство z-index и контекст наложения

Свойство z-index c первого взгляда кажется простым, и это не далеко от истины, но чтобы полноценно разобраться в его работе, необходимо узнать о такой концепции, как контекст наложения (stacking context)...

Как отследить клик вне элемента

Хорошая практика для удобства пользователя реализовать закрытие динамического элемента не только при клике на кнопку, а также при клике вне этого элемента

Повышаем производительность при resize, scroll, ...

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

Адаптивная навигация

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

Основы адаптивной вёрстки

Рассмотрим основы адаптивной вёрстки, что такое область просмотра (viewport), как использовать @media запросы и некоторые не самые очевидные нюансы

Плагин для отображения размеров окна браузера

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

Индикатор прокрутки на JavaScript

С нуля напишем индикатор прокрутки страницы на чистом JavaScript.

Скрываем/показываем Header при прокрутке

Как скрывать Header при прокрутке страницы вниз и отображать при прокрутке вверх

Аккордеон меню на jQuery

Напишем простое и универсальное аккордеон меню на jQuery

Подключаем веб-шрифты

Как просто и корректно подключить веб-шрифты

Stylus - препроцессор CSS

Знакомимся со Stylus - синтаксис и базовые возможности

Pug - шаблонизатор и препроцессор HTML

Знакомимся с Pug - синтаксис и базовые возможности

Используем Gulp для ускорения процесса верстки

Что такое Gulp? Как его установить? Как им пользоваться?

Spotify - Ambulo

Приятная музыка для верстки или просто по настроению

Node.js - зачем верстальщику и как установить

Зачем HTML-верстальщику Node.js и рассмотрим установку по шагам

Установка GitHub Desktop и его базовое использование

Что такое Git, регистрируемся на GitHub, для чего нужен GitHub Desktop, установим и рассмотрим его базовое использование

3D эффект карточек на CSS

Практикуем БЭМ, CSS Transforms, CSS Grid, CSS переменные

Выравнивание по низу карточки

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

БЭМ - полный контроль над версткой

Методология БЭМ позволяет более структурировано и гибко верстать независимыми Блоками и в дальнейшем наиболее комфортно поддерживать такую верстку

CSS-переменные: как сделать темную тему

Реализуем темную (и не только) тему с помощью css-переменных и немного JavaScript

Эффект параллакса при прокрутке страницы

Интересный параллакс-эффект c помощью jQuery

Анимация при прокрутке страницы

Анимируем элементы при прокрутке страницы

Spotify - Limes

Приятная музыка для верстки или просто по настроению

Заливка текста градиентом или изображением

Эффектный текст с фоновым градиентом или изображением