Создание сайтов
Научись создавать и запускать живые и интерактивные сайты за 4 недели без изучения программирования. Закрой полный цикл разработки сайта в одиночку и увеличь свой ценник в два раза.
Узнать программу курсаЗачем
нужен
Это курс?
Главная цель курса — помочь дизайнерам, маркетологам и другим специалистам научиться создавать потрясные сайты без освоения программирования.
Для дизайнеров
Для разработчиков
Для бизнеса
Только взгляните,
какие возможности открывает данный курс:
Проектирование
Исследование, UX и прототипы
Дизайн
Отрисовка макетов и подготовка
Вёрстка
Перенос макетов в формат HTML&CSS
Интеграция
Установка CMS, настройка форм
Запуск
Перенос сайта на домен и хостинг
До прохождения курса
Традиционный вариант разработки сайта силами трёх специалистов
После прохождения курса
Полный цикл создания сайта выполняет один специалист
Что такое Webflow?
Webflow — это современный, быстрый и удобный в использовании конструктор вёрстки. Он позволяет сверстать макет любой сложности и запустить проект без помощи разработчиков. Например, сайт этого курса свёрстан на Webflow силами одного человека.
Таким образом, если раньше для вёрстки макетов требовался отдельный специалист, то сегодня с этой задачей может легко справляться дизайнер или маркетолог. Тренд на слияние дизайна и HTML/CSS вёрстки отлично заметен в описании вакансий.
-
Вёрстка в HTML & CSS
Webflow покрывает 90% всех свойств и тегов, доступных в HTML/CSS вёрстке. Практически всё, что вы видите на современных сайтах можно легко воссоздать на Webflow. -
Анимации и интеракции
Статичными сайтами сегодня никого не удивить. Webflow позволяет оживить любой проект, добавив многошаговые анимации и сложные интерактивные компоненты. -
Система управления контентом
При желании вы можете использовать Webflow как CMS. Создайте внутреннюю базу данных, добавьте новости и товары и выводите содержимое на любой странице сайта.
Конструкторы сайтов
- Функционал ограничен конструктором
- Код получается медленным и кривым
- Сайт хранится на серверах платформы
- Заказчик обновляет сайт через платформу
- Сайт собирается в удобном интерфейсе
- Освоение занимает несколько дней
Вёрстка руками
- Можно создать на сайте что угодно
- Код получается чистым и понятным
- Сайт может жить на своём хостинге
- Для работы с сайтом нужна CMS
- Весь сайт пишется руками в редакторе
- Для освоения требуется несколько лет
Каждую неделю вам будут доступны от 10 до 15 уроков различной тематики. Чтобы процесс обучения был интересней, разные темы перемешаны друг с другом.
Ниже обозначены темы лекций. Наведите на одну из них, чтобы выделить уроки.
-
ТеорияПоговорим об основных принципах вёрстки сайтов. Много текста и полезной информации.
-
HTML & CSSИзучим самые важные и необходимые в работе теги и популярные свойства.
-
WebflowНаучимся применять полученные знания в работе с одним из самых перспективных инструментов.
-
ПрактикаПроведём с десяток мастер-классов, помогающих решать реальные проблемы и создавать компоненты.
-
ДомашкаПодготовим домашнее задание: разработаем несколько полноценных сайтов за всё время обучения.
НЕДЕЛЯ 1
-
Введение: об авторе и курсе
-
Подготовка к курсу. Обзор инструментов.
-
Как создаются сайты: от идеи до запуска
-
HTML: основы вёрстки, теги
-
CSS: синтаксис, селекторы, стили
-
Подготовка макетов для вёрстки
-
HTML: структура файлов и папок
-
CSS: самые популярные свойства
-
Что такое БЭМ-конвенция в классах
-
Chrome: инспектор и плагины
-
Практика: установка софта и подготовка
-
Практика: вёрстка Pixel Perfect
-
Домашка: вёрстка простого макета
НЕДЕЛЯ 2
-
CSS: cостояния hover, active, focus, disabled
-
CSS: свойства display, position и z-index
-
Webflow: знакомство и создание аккаунта
-
Webflow: возможности и интерфейс
-
Webflow: настройка проекта, шрифты, сетка
-
Webflow: классы и комбо-классы
-
Webflow: совместная работа и шаринг
-
Webflow: варианты публикации проекта
-
Webflow: градиенты, фоны и тени
-
Webflow: SEO для сайта и страниц
-
Практика: как сделать видео-фон
-
Практика: как добавить слайдер
-
Домашка: вёрстка простого Landing page
НЕДЕЛЯ 3
-
Теория: базовые принципы анимации
-
CSS: свойства transform, filter, transition
-
Webflow: cоздание transition-анимации
-
Webflow: работа с формами
-
Webflow: обзор сложных компонентов
-
CSS: свойство и логика работы animation
-
Webflow: триггеры и сложная анимация
-
Webflow: работа с адаптивной версией
-
CSS: сложные лэйауты — grid и flexbox
-
Webflow: символы и связанные поля
-
Практика: интерактивныe с подсказки
-
Практика: навигация с «гамбургером»
-
Домашка: лендинг с анимацией и формами
НЕДЕЛЯ 4
-
Всё о серверах, хостингах и FTP
-
Webflow: коллекции и базы данных
-
Webflow: функционал интернет-магазина
-
Работа с доменами, записями и DNS
-
Webflow: сохранение и экспорт проекта
-
Webflow: сторонние интеграции и Zapier
-
Webflow: встраивание скриптов и счётчиков
-
Webflow: добавление Google-карт
-
Валидация разметки и проверка кода
-
Практика: создание аккордеонов
-
Практика: создание всплывающего окна
-
Практика: интернет-магазин с CMS
-
Домашка: запуск многостраничного сайта
Пару слов о Школе #VA
Выпускаем молодых специалистов в сфере веб-дизайна с 2017 года
КАК ПРОХОДИТ
Обучение?
- Собственная платформа для изучения курса
- Можно изучать лекции в любое время
- Пожизненный доступ к курсу и обновлениям
- Общение с наставником и другими студентами
Смотришь лекции
Все лекции записаны в хорошем качестве в личном кабинете. Одна неделя — один модуль. Наставник всегда на связи и готов помочь.
Выполняешь домашки
Выполняешь домашнее задание по инструкции до конца недели. Не уложился в дедлайн — вылетаешь с курса. Всё как в реальном мире.
Получаешь разбор
В течение нескольких дней получаешь детальный разбор домашней работы с рекомендациями и советами о том, как можно сделать лучше.
Твои навыки после курса
Ты сможешь в одиночку создавать сайты без знаний программирования
HTML
Базовые навыки вёрстки и разметки страниц
Webflow
Твой главный инструмент на курсе и далее в работе
VS Code
Продвинутый редактор для работы с кодом
CSS
Набор навыков для работы со стилями элементов
Хостинги и домены
Базовые знания о серверах и размещении сайта в Сети
Pixel Perfect
Умение 100% точно верстать первоначальный макет
Ответы на Вопросы о курсе
Мы собрали ответы на самые популярные вопросы о курсе
Ещё несколько лет назад это было затруднительно. Но сегодня с каждым днём появляется всё больше новых инструментов, автоматизируется множество процессов.
На курсе мы изучаем основы HTML/CSS вёрстки которых будет достаточно для работы с современными инструментами и создания сайтов в визуальном редакторе.
Курс длится 4 недели.
В начале курса ты получаешь доступ в личный кабинет, где хранятся видеоматериалы, структурированные по модулям. Каждый понедельник будет открываться доступ к новой неделе при условии сдачи домашнего задания на предыдущей неделе. Домашнее задание даётся на одну неделю. Сдать его нужно до 21:00 воскресенья. Это строгое правило, которое необходимо соблюдать.
Вопросы можно задавать в любое время в специальном чате.
Работа с кодом и вёрстка не требуют серьёзной вычислительной мощности. Главный инструмент курса — редактор сайтов Webflow — работает прямо в браузере. Самое главное — чтобы тебе было комфортно пользоваться устройством и сёрфить странички в Сети. Если с этим проблем нет — добро пожаловать на курс!
Наш курс проходит в достаточно интенсивном режиме, но в то же время он не отнимает всё свободное время. Оптимально будет тратить на обучение 2-3 часа в день по будням и активно работать над домашкой на выходных. Такой подход позволяет нам держать студентов в тонусе.
Без выполнения домашнего задания ты не сможешь перейти в следующую неделю курса. Все мы люди и с пониманием относимся к разным ситуациям. Но заказчики не будут ждать, как и мы. Поэтому, да — у нас отчисляют.
Мы не обещаем за 1 месяц обеспечить всеми знаниями мира о вёрстке и разработке. Оно и не нужно. Мы дадим тольку ту информацию, которая полезна на практике и через что прошли сами. Мы гарантируем, что этого будет достаточно для успешного заработка на рынке.
Сохранять лекции себе нет необходимости. Ты получаешь пожизненный доступ ко всем материалам курса, а также ко всем обновлениям этих материалов. Уведомления об обновлениях можно будет отключить в любой момент, если будут надоедать, но доступ сохранится и в любой момент можно будет вернуться в личный кабинет.
Стоимость участия в курсе
Изучайте курс вместе с наставником или самостоятельно по видео-лекциям. А если хотите прокачаться ещё и в дизайне — есть пакет из двух курсов со скидкой.