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

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

Чему вы научитесь

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

Начальные требования
Никаких предварительных знаний не требуется.
Tilda предоставляет бесплатные 14 дней пробного периода.

Программа кура
Подготовка

О чем курс
Реферальная ссылка с бонусом для 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 товара
Как работают фильтры товаров
Подводим итоги
Заключение

До встречи на уроках!
Получите ваш сертификат