Создание сайтов и веб дизайн в Tilda. С нуля до результата! — stepik (2024)

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

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

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

Для кого этот курс

Для начинающих frontend, веб разработчиков, веб дизайнеров.

Начальные требования

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

Tilda предоставляет бесплатные 14 дней пробного периода.

Программа курса:

Подготовка

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

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

1. О чем этот блок
2. Создаем первую страницу из стандартных блоков
3. Как менять контент стандартных блоков
4. Как настраивать стили стандартных блоков
5. Введение в адаптивный дизайн. Сетки, консоль разработчика.
6. Как размещать видео в Tilda
7. Как разместить универсальный footer и header
8. Как работать с ссылками
9. Как добавить свои шрифты на сайт
10. ПРАКТИКА. Создайте собственный сайт

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

1. О чем этот блок
2. Обзор программ — инструментов веб дизайнера
3. Как приобрести лицензионные программы от Adobe
4. Лучшие стоковые площадки цифровой графики
5. Как подбирать цвета для своего сайта
6. ПРАКТИКА. Подберите цвета
7. Пример преподавателя. Подбор цвета
8. Как работать с текстом на сайте
9. ПРАКТИКА. Как работать с текстом
10. Пример преподавателя. Работа с текстом
11. Как работать с отступами
12. ПРАКТИКА. Настройте отступы
13. Пример преподавателя. Отступы

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

1. Что такое бриф с заказчиком
2. Что такое "Mood Board"
3. Что такое Wireframe сайта

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

1. О чем этот и следующие несколько блоков
2. Знакомимся с Zero Block
3. Как настраивать свойства элементов в Zero
4. Настройки цвета в Zero
5. Создаем независимые переиспользуемые блоки
6. Знакомство с window container
7. Как растянуть изображение на весь экран
8. Подробнее про window container. Делаем меню сайта
9. Доделываем меню
10. Подробнее про настройки position
11. Как работать с тенями

Анимации в Zero Block

1. Как работают базовые анимации
2. Как работают модификаторы. Плавный скролл
3. Создаем эффект печатной машинки
4. Эффекты изображений
5. Создаем Parallax эффект "с помощью мыши"
6. ПРАКТИКА. Parallax эффект "с помощью мыши"
7. Пример преподавателя parallax эффект "с помощью мыши"
8. Parallax эффект с помощью скролла страницы
9. Как работает step by step анимация
10. Step by step анимация по Scroll + trigger offset
11. Анимируем меню
12. Анимируем прогресс бар
13. Тригерная анимация

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

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

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

1. Адаптируем первую секцию
2. Адаптируем навигационное меню
3. Используем гамбургер вместо кнопки меню
4. Анимируем закрытие гамбургера
5. Включаем и настраиваем анимации на мобильном устройстве
6. Что такое диапазоны видимости
7. Как работает группировка элементов
8. Как работает AutoScale
9. Заключение блока

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

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

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

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

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

1. О чем этот блок
2. Создаем Блог из базовых блоков Tilda или блог из Zero
3. Знакомимся с "потоками". Как создать "потоки"
4. Как менять контент в "потоках"
5. Разбираемся с настройками поста
6. Как работают даты и разделы в потоках
7. Подводим итоги

Онлайн школа

1. О чем этот блок
2. Как работает личный кабинет Tilda
3. Как добавить пользователя в личный кабинет через формы
4. Как создавать урок в конструкторе курса Tilda
5. Как создавать домашние задания в конструкторе курса Tilda
6. Как предоставлять доступ к курсу после оплаты
7. Подключение сторонней площадки для онлайн школы к Tilda

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

1. О чем этот блок
2. Способы создания карточки товара
3. Как создать промо код и настроить параметры товара
4. Как создать каталог товаров
5. Как добавлять разные варианты одного товара
6. Как отображать информацию о товарах в табах popup товара
7. Как работают фильтры товаров
8. Подводим итоги

Заключение

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

https://stepik.org/course/183709/promo

​