Этот раздел делал в первую очередь для себя. Это своего рода памятка для различных ситуаций, мои наработки, поэтому они достаточно краткие и не досконально расписанные. Видео не снимаю, так как это отнимает очень много времени. Если и буду снимать видео уроки, то для них будет отведен свой раздел на сайте.
Если этот раздел будет кому то полезен и так же как и мне удобен, то пожалуйста, можете пользоваться.
Шпаргалки по Верстке. Начальные шаблоны и типовые блоки. Начинаем работу с HTML + CSS. Базовые шаблоны.
Шпаргалки по Скриптам. Примеры некоторых скриптов, а также интересные разработки полезные для сайта, как собственные, так и где то подсмотренные.
Шпаргалки по Эффектам. Различные эффекты для сайтов, анимации, скроллинг, видимость, и т.п. Расходящиеся круги от кнопки, постепенное появление блоков и др.
Шпаргалки по Элементам. Код элементов для сайта, примеры, как собственные разработки, так и типовые, стандартные.
Шпаргалки по ModX. Установка, натяжка верстки, а так же прочие полезные советы и скрипты по разработке сайта на этой CMS.
Шпаргалки по WordPress. Установка, натяжка верстки, а так же прочие полезные советы и скрипты по разработке сайта на этой CMS.
Шпаргалки по OpenCart. Установка, натяжка верстки, а так же прочие полезные советы и скрипты по разработке сайта на этой CMS.
Шпаргалки по ProcessWire. Установка, натяжка верстки, а так же прочие полезные советы и скрипты по разработке сайта на этой CMS.
Шпаргалки по Bitrix. Установка, натяжка верстки, а так же прочие полезные советы и скрипты по разработке сайта на этой CMS.
Шпаргалки по Yii2. Установка, натяжка верстки, а так же прочие полезные советы и скрипты по разработке сайта на этом фреймворке.
Шпаргалки по VueJS. Подключение, базовые скрипты, принципы работы. Создание и связь компонентов. Натяжка верстки, разработка сайта или SPA на этом фреймворке.
Шпаргалки отрывки кода. Приводятся примеры непростых проектов, отрывки кода из практики, сложные и интересные решения.
Шпаргалки по Photoshop. Начальные настройки, плагины и шаблоны. Представлены работы и описаны текстом последовательность действий.
В шпаргалке рассмотрены примеры скриптов для работы с корзиной - добавление в корзину с любой кнопки на сайте, высвечивание сообщения о добавлении в корзину, маркировка корзины и другие.
Рассмотрим пример создания сложной фильтрации товара в WooCommerce с использованием плагина Search and Filter. Простой вариант, когда работает один фильтр на странице и сложный, когда нужно сделать два фильтра на одной странице.
Примеры того как можно вывести рекомендуемые товары на любую страницу магазина, который работает на WordPress и WooCommerce.
Пример работает только при использовании хлебных крошек KamaBreadcrumbs, в нем показано, как можно заменить слово "Товары" на "Каталог" в хлебных крошках.
Кликабельный логотип в шапке страницы. Пример того как сделать лого кликабельным, при чем, что бы на главной был подъем на вверх страницы, а на прочих страницах переход на главную.
Примеры трех страниц магазина archive-product.php - content-product-cat.php - single-product.php на примере разработки магазина Miele.
Проверяем, есть ли подкатегории у товаров на данной странице категории и если есть то выводим. Пример на WordPress и WooCommerce.
Пример того как можно перевернуть дату из формата YYYY-MM-DD в DD-MM-YYYY при помощи JQuery. Как вывести дату привычного отображения для пользователя.
Пример разработки SPA приложения на VueJS. Создание главной страницы, пример создание слайдера на главной, пример создания карточек товаров используя Vuetify.js. Пример создания списка на страницах. Создание страницы формы для добавления какой либо новой записи.
Пример защиты паролем определенной страницы. Простой пример авторизации. Защита паролем. Пишем и используем свою авторизацию для страницы или сайта.
Пример создания всплывающей подсказки выбора для Input на основе библиотеки autoComplete.js. Тот случай когда нужны всплывающие подсказки при вводе в поле Input.
Пример проверки на ModX - на главной ли странице мы находимся, и применения различных условий при этом.
Меняем бэкграунд зашитый в код на бэкграунд который мы выбираем в административной части изображения для страницы.
Создаем выезжающие информационные блоки. Представлен пример создания информационной всплывающей плашке на определенное время. Информационный блок.
Пример осуществления возможности правки контактов из административной панели сайта при помощи дополнительных полей используя ACF плагин.
Пример подключения своих title и description в WordPress используя плагин Advanced Custom Field. Как удалить весь Description.
Как сделать анимацию чисел на сайте, и реализовать этот эффект таким образом, чтобы он сработал только в тот момент, когда пользователь видит его.
Как решить проблему с параллакс background-image - fixed когда он отказывается правильно работать на устройствах IOS.
Скрипт, который проверяет день недели при выборе даты и в данном случае не дает выбрать воскресенье. Этот скрипт писался мной для онлайн записи на сайте клиники спины. Пример скрипта.
Пример создания модальной формы обратной связи на WordPress используя плагин Contact Form и Bootstrap 5.
Пользовательские, дополнительные поля. Пример того как создавать дополнительные пользовательские поля при помощи плагина Advanced Custom Fields. Основные настройки и примеры получения полей.
Пример мобильного меню выполненного в виде панели снизу. Красивые эффекты появления, скроллинга, расположение абсолютно любых элементов и любой информации, красивые вращающиеся иконки.
Пишем эффект на CSS и JQuery: во время скроллинга, при достижении блока с квадратом на экране, этот квадрат разъезжается и через некоторое время в нем появляется текст.