[Stepik] Создание сайтов и веб дизайн в Tilda. С нуля до результата! (Дмитрий Фокеев)

Научитесь создавать полноценные адаптивные сайты, с использованием современных анимаций и принципов веб дизайна в Tilda, без знания кода с нуля.
Чему вы научитесь:

• Научитесь создавать сайты из стандартных блоков Tilda
• Научитесь всем тонкостям работы с ZeroBlock (Свой собственный дизайн блока)
• Научитесь основам веб дизайна (Работа с типографикой, цветом, разметкой)
• Научитесь основам SEO (Настройки для поднятия сайта в топ Google/Yandex)
• Узнаете как создать онлайн школу в Tilda
• Узнаете как создавать Блоги в Tilda
• Узнаете как создать онлайн магазины
• Узнаете как принимать оплату на вашем сайте
• Создадите большой и современный проект в портфолио
• Научитесь создавать любые анимации на сайте
• Научитесь использовать собственный код на Tilda (HTML/CSS/JavaScript)
• Узнаете тонкости разработки и создания уникального дизайна и разработки сайтов

Для кого этот курс:
Для начинающих frontend, веб разработчиков, веб дизайнеров.
Никаких предварительных знаний не требуется.
Программа курса:
Подготовка

• О чем курс
• Реферальная ссылка с бонусом для Tilda
• Скачиваем материалы к курсу
• Оставайтесь со мной на связи

Основы тильда. Стандартные блоки. Концепция работы.

• О чем этот блок
• Создаем первую страницу из стандартных блоков
• Как менять контент стандартных блоков
• Как настраивать стили стандартных блоков
• Введение в адаптивный дизайн. Сетки, консоль разработчика.
• Как размещать видео в Tilda
• Как разместить универсальный footer и header
• Как работать с ссылками
• Как добавить свои шрифты на сайт
• ПРАКТИКА. Создайте собственный сайт

Трюки веб дизайна.

• О чем этот блок
• Обзор программ - инструментов веб дизайнера
• Как приобрести лицензионные программы от Adobe
• Лучшие стоковые площадки цифровой графики
• Как подбирать цвета для своего сайта
• ПРАКТИКА. Подберите цвета
• Пример преподавателя. Подбор цвета
• Как работать с текстом на сайте
• ПРАКТИКА. Как работать с текстом
• Пример преподавателя. Работа с текстом
• Как работать с отступами
• ПРАКТИКА. Настройте отступы
• Пример преподавателя. Отступы

Подготовка к проекту «портфолио»

• Что такое бриф с заказчиком
• Что такое «Mood Board»
• Что такое Wireframe сайта

Работа в Zero block. Проект портфолио

• О чем этот и следующие несколько блоков
• Знакомимся с Zero Block
• Как настраивать свойства элементов в Zero
• Настройки цвета в Zero
• Создаем независимые переиспользуемые блоки
• Знакомство с window container
• Как растянуть изображение на весь экран
• Подробнее про window container. Делаем меню сайта
• Доделываем меню
• Подробнее про настройки position
• Как работать с тенями

Анимации в Zero Block

• Как работают базовые анимации
• Как работают модификаторы. Плавный скролл
• Создаем эффект печатной машинки
• Эффекты изображений
• Создаем Parallax эффект «с помощью мыши»
• ПРАКТИКА. Parallax эффект «с помощью мыши»
• Пример преподавателя parallax эффект «с помощью мыши»
• Parallax эффект с помощью скролла страницы
• Как работает step by step анимация
• Step by step анимация по Scroll + trigger offset
• Анимируем меню
• Анимируем прогресс бар
• Тригерная анимация

Использование своего кода

• Создаем стандартные табы
• Тригерная анимация на практике
• Как использовать сторонний код
• Как писать CSS код
• Как писать JavaScript код
• Что такое виджеты
• HTML код в Zero Block
• Доделываем Desktop версию сайта. Часть 1
• Доделываем Desktop версию сайта. Часть 2

Адаптивный дизайн сайта

• Адаптируем первую секцию
• Адаптируем навигационное меню
• Используем гамбургер вместо кнопки меню
• Анимируем закрытие гамбургера
• Включаем и настраиваем анимации на мобильном устройстве
• Что такое диапазоны видимости
• Как работает группировка элементов
• Как работает AutoScale
• Заключение блока

SEO настройки сайта.

• Как настроить свое имя сайта. Покупаем домен для сайта
• Что такое SEO. О чем этот блок
• Настраиваем заголовок H1 и Alt у изображений
• Настраиваем Title & Description сайта.
• Что такое Бейдж для соц сетей
• Что такое страница 404. Создаем страницу 404
• Создаем SSL Сертификат и смотрим доп. настройки.
• Как создать и добавить на сайт fivicon
• Что такое Web Master & Search console

Работа с формами на сайте

• Создание форм в Zero Block
• Как получать данные из форм
• Что такое политика конфиденциальности

Создание Блога

• О чем этот блок
• Создаем Блог из базовых блоков Tilda или блог из Zero
• Знакомимся с «потоками». Как создать «потоки»
• Как менять контент в «потоках»
• Разбираемся с настройками поста
• Как работают даты и разделы в потоках
• Подводим итоги

Онлайн школа

• О чем этот блок
• Как работает личный кабинет Tilda
• Как добавить пользователя в личный кабинет через формы
• Как создавать урок в конструкторе курса Tilda
• Как создавать домашние задания в конструкторе курса Tilda
• Как предоставлять доступ к курсу после оплаты
• Подключение сторонней площадки для онлайн школы к Tilda

Онлайн магазин

• О чем этот блок
• Способы создания карточки товара
• Как создать промо код и настроить параметры товара
• Как создать каталог товаров
• Как добавлять разные варианты одного товара
• Как отображать информацию о товарах в табах popup товара
• Как работают фильтры товаров
• Подводим итоги

До встречи на уроках!