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

165₽

Категория: Метки: , , , , , , ,
Научитесь создавать полноценные адаптивные сайты, с использованием современных анимаций и принципов веб дизайна в 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 товара
  • Как работают фильтры товаров
  • Подводим итоги

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