`git init` - создание нового репозитория в текущей папке;
`git add .` - фиксирование изменений файлов, которые будут добавлены в коммит;
`git commit -m "Закончил header"` - создание нового коммита;
`git push -u origin master` - публикация указанной ветки в удаленном репозитории вместе со всеми необходимыми коммитами и внутренними объектами;
`git status` - текущее состояние файлов репозитория. Список измененных и не добавленных файлов.

Как работает `position: sticky` в CSS

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

Это свойство часто используется при создании "липкого" меню или "плавающего" сайтбара.

«Липкий» элемент — это элемент, которому мы задали position: sticky. Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например top: 0px.
Пример:
.component {
position: sticky;
top: 0px;
}
«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.
Когда вы задаёте элементу position: sticky, его родитель автоматически становится «липким» контейнером!
Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

Пример по ссылке ниже 👇👇👇

Details modal - модальное окно на CSS.

Показать модалку после успешной отправки сообщения. Contact form 7.
Простым решением можно воспользоваться по ссылке ниже 👇👇👇

Модальное окно, которое можно закрыть не только на крестик, но и при нажатии на область вне формы.

Очень просто и понятно как стилизовать скролл. Подходит для Mozilla Firefox, Google Chrome, Яндекс.Браузер, Safari и Opera.

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

Что такое Git и для чего он нужен?

Git - для отслеживания и ведения истории изменения файлов в вашем проекте. Чаще всего его используют для кода.

С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.

Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально, а все ваши репозитории хранятся в определенных папках на жестком диске.

Основные команды для работы с git 👉 тут

Как упростить разработку темы для Wordpress с возможностью применять команды git`a 👉 тут

Вот и живой проект, где у раздела есть слегка наклонный фон. Это идеальный вариант использования `clip-path`.
Для реализации углового эффекта, нужно использовать расширение `polygon()`.
.section {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Подробнее по ссылке ниже 👇👇👇

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

Хороший пример - структурирование файлов и кода. Во всех проектах присутствуют кнопки, формы, модальные окна. Так почему бы не сделать для каждого элемента отдельный файл и перенести его из проекта в проект?

Я так и сделал. Время на разработку уменьшилось, подборка файлов для проекта увеличилось.

Перейди к структурированному коду, если до сих пор пишешь все стили в одном файле.

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

Посмотри и убедись в этом сам 👇👇👇

Основные методы для модального окна:
fadeIn()
fadeOut()
Для вкладок:
addClass()
siblings()
removeClass()
closest()
find()

Посмотреть, что они означают и изучить другие необходимые методы можно по ссылке 👇👇👇

Ползунок цен. Можно стилизовать. Без кучи подключенных библиотек. Работает ровно, без замечаний. Ссылка на codepen 👇👇👇

Оптимизация изображений на сайте Wordpress.

Даже если у вас хороший контент, из-за медленной загрузки сайта / не-оптимизированных изображений будет страдать ваш SEO, поэтому сайт получит более низкую позицию в поисковой выдаче.

Варианты оптимизации изображений для сайта описано в статье 👇👇👇

Плагины, для создания доступа к сайту, только после регистрации:
- Membership & Content Restriction;
- WP-Members;
- Ultimate Member;
- Simple Membership;
- Members.

Можно использовать если:
- продаете свой товар;
- есть платная подписка на контент;
- если у вас сеть магазинов по продаже табачных изделий в России.

learngitbranching.js - ресурс, который поможет понять git. Основные команды для работы с git 👉 тут

Дока - документация для разработчиков на человеческом языке. Этот ресурс помог разобраться с работой localStorage. С помощью localStorage реализовал "Добавить в избранное".
На этом сайте можете посмотреть как работает 👉 link

backdrop-filter - CSS свойство, которое позволяет вам использовать визуальные эффекты такие, как размытие или смещение цвета фона за элементом.

Фильтр на реальном сайте 👉 link

Узнать больше про свойство 👇👇👇

responsinator.com - сервис, на котором можно проверить работу своего сайта на различных мобильных устройствах.

Для переключения WordPress на HTTPS:

✓ проверьте наличие установленного SSL-сертификата
✓ перейдите в раздел `Инструменты → Здоровье сайта`
✓ разверните строку `Ваш сайт не использует HTTPS`
✓ нажмите `Переключить ваш сайт на использование HTTPS`
✓ проверьте работу сайта

#wordpress #https