CSS:

Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.

Ниже несколько, для демонстрации вариантов отобрадения.

Для тех, кому надоел awesome font или, по какой-то причине, этот набор иконок не устраивает, в статье представлены несколько похожих иконочных шрифтов.

Это краткая заметка про имена классов при использовании методологии БЭМ для верстки Html.

Иногда нужно скрыть скрол / scroll (полосу прокрутки браузера). Часто какое нужно, если открывается модальное окно. Это делается крайне просто на чистом CSS:

 
body.compensate-for-scrollbar {
    overflow: hidden;
}

Сервис позволяет генерировать css код для тени. Есть несколько настроек, включающих: прозрачность, размытие и т.д.

В данной заметке опишу самые часто используемые возможности SCSS.

Думаю все мы уже привыкли видит на сайтах значок рубля, вместо приписки "руб.", но что делать если кодировка сайта не utf-8, а windows-1251?

Уже давно использовал, в разных редакторах, возможность генерации целых блоков html по шаблонам вида: div.class>ul+.
И вот решил выяснить про данный функционал подробнее.

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

Кнопка появляется, только если посетитель промотал сайт на 300 пикселей вниз.

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

Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.