frontips.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расскажу принцип адаптивных пропорциональных блоков

https://frontips.ru/adaptivnye-kruglye-bloki/

Рассмотрим как добиться такого эффекта размытия

https://frontips.ru/effekt-razmytiya-fona/

При указании блоку свойств border или padding, блок становится больше заданных размеров. Используем свойство box-sizing: border-box для исправления такого поведения.

https://frontips.ru/pochemu-razmery-bloka-bolshe-zadannyh/