Stepik Курс по созданию сайтов в Tilda. С нуля до результата!
О курсе
Подробнее
Привет!
Конструкторы сайтов сильно изменились с тех пор, как они появились.
Теперь это не просто шаблоны и не скучный однообразный дизайн.
Современные конструкторы сайтов - это полноценные профессиональные инструменты для создания сайтов любой сложности и дизайна.
Сегодня Tilda - отличный выбор для начала. Она не требует знания кода, но также отлично подходит для опытных разработчиков, знающих верстку и JavaScript, так как позволяет реализовать любые нативные решения с помощью кода.
И я рад представить вам ультимейт-курс по Tilda.
В этом курсе собраны все темы, которые погрузят вас в разработку сайтов с самого начала до создания профессиональных многостраничных магазинов, блогов и онлайн-школ.
Курс для абсолютных новичков. Знание веб дизайна и программирования не требуется
Основы веб дизайна
В этом курсе мы изучим необходимые основы веб-дизайна: типографику, работу с цветом и системы разметки и позиционирования элементов.
Поиск идей для работ и подготовка общения с заказчиком
Мы также изучим инструменты и методы, используемые разработчиками и дизайнерами при работе на фрилансе. От заполнения брифа с заказчиком до поиска идей и вдохновения.
Большой проект для вашего портфолио
На платформе Tilda мы создадим большой проект портфолио программиста, используя только собственный дизайн, собственный код и идеи.
Любые современные анимации
Мы научимся создавать современные анимации, такие как параллакс-эффект и анимацию элементов в Tilda.
Разберем все правила адаптивной верстки сайтов.
Основы SEO продвижения
Изучим основы SEO-продвижения, чтобы наш сайт попал на верхние строки поиска Google и Yandex.
Свой код на Tilda
Узнаем, как писать и реализовывать собственный код HTML / CSS / JavaScript прямо в Tilda.
Онлайн школы, блоги, магазины
Вы научитесь создавать онлайн-школы на своих сайтах или для будущих заказчиков.
Вы научитесь создавать блоги.
Вы научитесь создавать интернет-магазины на платформе Tilda.
Технические тонкости
Разберем все технические настройки сайта, от подключения собственного имени сайта до настройки современной защиты веб-страницы и подключения онлайн-касс для приема платежей прямо с сайта.
Кстати о цифрах. На фрилансе небольшой сайт, созданный на Tilda, стоит в среднем 50 000 рублей, а доработка или внедрение собственного кода стоит в среднем 5 000 рублей.
Что такое Tilda
Любой дизайн, внедрение любого стороннего кода, сотни плагинов и виджетов, подключение и интеграция сотен сторонних сервисов, автоматизация рутинных процессов и ускорение создания дизайна и разработки.
Все это Tilda спустя 10 лет после ее появления на рынке.
И эта платформа покрывает большинство задач, для которых создается современный сайт. И я предлагаю вам вместе изучить, как ее использовать максимально эффективно.
Присоединяйтесь ко мне, и мы вместе начнем создавать удивительные сайты прямо на Tilda.
Поддержка
Автор курса отвечает на все вопросы в комментариях к урокам — ежедневно.
До встречи на уроках!
Требования
Что нужно для старта
- Никаких предварительных знаний не требуется.
- Tilda предоставляет бесплатные 14 дней пробного периода.
Результат
Что вы получите
- Научитесь создавать сайты из стандартных блоков Tilda
- Научитесь всем тонкостям работы с ZeroBlock (Свой собственный дизайн блока)
- Научитесь основам веб дизайна (Работа с типографикой, цветом, разметкой)
- Научитесь основам SEO (Настройки для поднятия сайта в топ Google/Yandex)
- Узнаете как создать онлайн школу в Tilda
- Узнаете как создавать Блоги в Tilda
- Узнаете как создать онлайн магазины
- Узнаете как принимать оплату на вашем сайте
- Создадите большой и современный проект в портфолио
- Научитесь создавать любые анимации на сайте
- Научитесь использовать собственный код на Tilda (HTML/CSS/JavaScript)
- Узнаете тонкости разработки и создания уникального дизайна и разработки сайтов
Аудитория
Для кого этот курс
- Для начинающих frontend, веб разработчиков, веб дизайнеров.
Содержание
14 занятийПрограмма курса
№ТемаЧто внутри
01Подготовка
- О чем курс
- Реферальная ссылка с бонусом для Tilda
- Скачиваем материалы к курсу
- Оставайтесь со мной на связи
02Основы тильда. Стандартные блоки. Концепция работы.
- О чем этот блок
- Создаем первую страницу из стандартных блоков
- Как менять контент стандартных блоков
- Как настраивать стили стандартных блоков
- Введение в адаптивный дизайн. Сетки, консоль разработчика.
- Как размещать видео в Tilda
- Как разместить универсальный footer и header
- Как работать с ссылками
- Как добавить свои шрифты на сайт
- ПРАКТИКА. Создайте собственный сайт
03Трюки веб дизайна.
- О чем этот блок
- Обзор программ - инструментов веб дизайнера
- Как приобрести лицензионные программы от Adobe
- Лучшие стоковые площадки цифровой графики
- Как подбирать цвета для своего сайта
- ПРАКТИКА. Подберите цвета
- Пример преподавателя. Подбор цвета
- Как работать с текстом на сайте
- ПРАКТИКА. Как работать с текстом
- Пример преподавателя. Работа с текстом
- Как работать с отступами
- ПРАКТИКА. Настройте отступы
- Пример преподавателя. Отступы
04Подготовка к проекту "портфолио"
- Что такое бриф с заказчиком
- Что такое "Mood Board"
- Что такое Wireframe сайта
05Работа в Zero block. Проект портфолио
- О чем этот и следующие несколько блоков
- Знакомимся с Zero Block
- Как настраивать свойства элементов в Zero
- Настройки цвета в Zero
- Создаем независимые переиспользуемые блоки
- Знакомство с window container
- Как растянуть изображение на весь экран
- Подробнее про window container. Делаем меню сайта
- Доделываем меню
- Подробнее про настройки position
- Как работать с тенями
06Анимации в Zero Block
- Как работают базовые анимации
- Как работают модификаторы. Плавный скролл
- Создаем эффект печатной машинки
- Эффекты изображений
- Создаем Parallax эффект "с помощью мыши"
- ПРАКТИКА. Parallax эффект "с помощью мыши"
- Пример преподавателя parallax эффект "с помощью мыши"
- Parallax эффект с помощью скролла страницы
- Как работает step by step анимация
- Step by step анимация по Scroll + trigger offset
- Анимируем меню
- Анимируем прогресс бар
- Тригерная анимация
07Использование своего кода
- Создаем стандартные табы
- Тригерная анимация на практике
- Как использовать сторонний код
- Как писать CSS код
- Как писать JavaScript код
- Что такое виджеты
- HTML код в Zero Block
- Доделываем Desktop версию сайта. Часть 1
- Доделываем Desktop версию сайта. Часть 2
08Адаптивный дизайн сайта
- Адаптируем первую секцию
- Адаптируем навигационное меню
- Используем гамбургер вместо кнопки меню
- Анимируем закрытие гамбургера
- Включаем и настраиваем анимации на мобильном устройстве
- Что такое диапазоны видимости
- Как работает группировка элементов
- Как работает AutoScale
- Заключение блока
09SEO настройки сайта.
- Как настроить свое имя сайта. Покупаем домен для сайта
- Что такое SEO. О чем этот блок
- Настраиваем заголовок H1 и Alt у изображений
- Настраиваем Title & Description сайта.
- Что такое Бейдж для соц сетей
- Что такое страница 404. Создаем страницу 404
- Создаем SSL Сертификат и смотрим доп. настройки.
- Как создать и добавить на сайт fivicon
- Что такое Web Master & Search console
10Работа с формами на сайте
- Создание форм в Zero Block
- Как получать данные из форм
- Что такое политика конфиденциальности
11Создание Блога
- О чем этот блок
- Создаем Блог из базовых блоков Tilda или блог из Zero
- Знакомимся с "потоками". Как создать "потоки"
- Как менять контент в "потоках"
- Разбираемся с настройками поста
- Как работают даты и разделы в потоках
- Подводим итоги
12Онлайн школа
- О чем этот блок
- Как работает личный кабинет Tilda
- Как добавить пользователя в личный кабинет через формы
- Как создавать урок в конструкторе курса Tilda
- Как создавать домашние задания в конструкторе курса Tilda
- Как предоставлять доступ к курсу после оплаты
- Подключение сторонней площадки для онлайн школы к Tilda
13Онлайн магазин
- О чем этот блок
- Способы создания карточки товара
- Как создать промо код и настроить параметры товара
- Как создать каталог товаров
- Как добавлять разные варианты одного товара
- Как отображать информацию о товарах в табах popup товара
- Как работают фильтры товаров
- Подводим итоги
14Заключение
- До встречи на уроках!
- Получите ваш сертификат
01Подготовка
- О чем курс
- Реферальная ссылка с бонусом для Tilda
- Скачиваем материалы к курсу
- Оставайтесь со мной на связи
02Основы тильда. Стандартные блоки. Концепция работы.
- О чем этот блок
- Создаем первую страницу из стандартных блоков
- Как менять контент стандартных блоков
- Как настраивать стили стандартных блоков
- Введение в адаптивный дизайн. Сетки, консоль разработчика.
- Как размещать видео в Tilda
- Как разместить универсальный footer и header
- Как работать с ссылками
- Как добавить свои шрифты на сайт
- ПРАКТИКА. Создайте собственный сайт
03Трюки веб дизайна.
- О чем этот блок
- Обзор программ - инструментов веб дизайнера
- Как приобрести лицензионные программы от Adobe
- Лучшие стоковые площадки цифровой графики
- Как подбирать цвета для своего сайта
- ПРАКТИКА. Подберите цвета
- Пример преподавателя. Подбор цвета
- Как работать с текстом на сайте
- ПРАКТИКА. Как работать с текстом
- Пример преподавателя. Работа с текстом
- Как работать с отступами
- ПРАКТИКА. Настройте отступы
- Пример преподавателя. Отступы
04Подготовка к проекту "портфолио"
- Что такое бриф с заказчиком
- Что такое "Mood Board"
- Что такое Wireframe сайта
05Работа в Zero block. Проект портфолио
- О чем этот и следующие несколько блоков
- Знакомимся с Zero Block
- Как настраивать свойства элементов в Zero
- Настройки цвета в Zero
- Создаем независимые переиспользуемые блоки
- Знакомство с window container
- Как растянуть изображение на весь экран
- Подробнее про window container. Делаем меню сайта
- Доделываем меню
- Подробнее про настройки position
- Как работать с тенями
06Анимации в Zero Block
- Как работают базовые анимации
- Как работают модификаторы. Плавный скролл
- Создаем эффект печатной машинки
- Эффекты изображений
- Создаем Parallax эффект "с помощью мыши"
- ПРАКТИКА. Parallax эффект "с помощью мыши"
- Пример преподавателя parallax эффект "с помощью мыши"
- Parallax эффект с помощью скролла страницы
- Как работает step by step анимация
- Step by step анимация по Scroll + trigger offset
- Анимируем меню
- Анимируем прогресс бар
- Тригерная анимация
07Использование своего кода
- Создаем стандартные табы
- Тригерная анимация на практике
- Как использовать сторонний код
- Как писать CSS код
- Как писать JavaScript код
- Что такое виджеты
- HTML код в Zero Block
- Доделываем Desktop версию сайта. Часть 1
- Доделываем Desktop версию сайта. Часть 2
08Адаптивный дизайн сайта
- Адаптируем первую секцию
- Адаптируем навигационное меню
- Используем гамбургер вместо кнопки меню
- Анимируем закрытие гамбургера
- Включаем и настраиваем анимации на мобильном устройстве
- Что такое диапазоны видимости
- Как работает группировка элементов
- Как работает AutoScale
- Заключение блока
09SEO настройки сайта.
- Как настроить свое имя сайта. Покупаем домен для сайта
- Что такое SEO. О чем этот блок
- Настраиваем заголовок H1 и Alt у изображений
- Настраиваем Title & Description сайта.
- Что такое Бейдж для соц сетей
- Что такое страница 404. Создаем страницу 404
- Создаем SSL Сертификат и смотрим доп. настройки.
- Как создать и добавить на сайт fivicon
- Что такое Web Master & Search console
10Работа с формами на сайте
- Создание форм в Zero Block
- Как получать данные из форм
- Что такое политика конфиденциальности
11Создание Блога
- О чем этот блок
- Создаем Блог из базовых блоков Tilda или блог из Zero
- Знакомимся с "потоками". Как создать "потоки"
- Как менять контент в "потоках"
- Разбираемся с настройками поста
- Как работают даты и разделы в потоках
- Подводим итоги
12Онлайн школа
- О чем этот блок
- Как работает личный кабинет Tilda
- Как добавить пользователя в личный кабинет через формы
- Как создавать урок в конструкторе курса Tilda
- Как создавать домашние задания в конструкторе курса Tilda
- Как предоставлять доступ к курсу после оплаты
- Подключение сторонней площадки для онлайн школы к Tilda
13Онлайн магазин
- О чем этот блок
- Способы создания карточки товара
- Как создать промо код и настроить параметры товара
- Как создать каталог товаров
- Как добавлять разные варианты одного товара
- Как отображать информацию о товарах в табах popup товара
- Как работают фильтры товаров
- Подводим итоги
14Заключение
- До встречи на уроках!
- Получите ваш сертификат
Документ после выпуска
Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Курс по созданию сайтов в Tilda. С нуля до результата!» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
