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

https://frontips.ru/zoom-effekt-masshtab-i-pozicionirovanie-izobrazheniya/

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

https://frontips.ru/adaptivnaya-setka-dlya-kataloga/

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

https://frontips.ru/zalivka-teksta-gradientom-ili-izobrazheniem/

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

https://frontips.ru/animaciya-pri-prokrutke-stranicy/

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

https://frontips.ru/effekt-parallaksa-pri-prokrutke-stranicy/

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

https://frontips.ru/css-peremennye-kak-sdelat-temnuyu-temu/

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

https://frontips.ru/bem-polnyj-kontrol-nad-verstkoj/

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

https://frontips.ru/vyravnivanie-po-nizu-kartochki/

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

https://frontips.ru/3d-effekt-kartochek-na-css/

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

https://frontips.ru/ustanovka-github-desktop-i-ego-bazovoe-ispolzovanie/

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

https://frontips.ru/node-js-zachem-verstalshchiku-i-kak-ustanovit/

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

https://frontips.ru/ispolzuem-gulp-dlya-uskoreniya-processa-verstki/

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

https://frontips.ru/pug-shablonizator-i-preprocessor-html/

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

https://frontips.ru/stylus-preprocessor-css/

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

https://frontips.ru/podklyuchaem-veb-shrifty/

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

https://frontips.ru/akkordeon-menyu-na-jquery/

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

https://frontips.ru/skryvaem-pokazyvaem-header-pri-prokrutke/

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

https://frontips.ru/indikator-prokrutki-na-javanoscript/

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

https://frontips.ru/plagin-dlya-otobrazheniya-razmerov-okna-brauzera/

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

https://frontips.ru/osnovy-adaptivnoj-vyorstki/

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

https://frontips.ru/adaptivnaya-navigaciya/