Задания для создания сайтов бывают двух видов, и это разные люди с разными вопросами. Первые — заказчики: им нужно поставить задачу вебмастеру так, чтобы получить то, что задумано, а не то, что поняли. Вторые — студенты и преподаватели: им нужны учебные задания по созданию web-сайтов, контрольные работы и подготовка к экзамену. Поиск отвечает обоим одинаково — статьями о техническом задании. Здесь — отдельно для каждого: как сформулировать задачу (с тренажёром) и как выстроить учебные задания по уровням (с генератором вариантов).
Есть задача по сайту — новый проект или доработка существующего? Я делаю сайты лично, по договору, с фиксированной ценой и гарантией 12 месяцев: лендинг от 15 000 ₽, корпоративный сайт от 40 000 ₽. Подробности — на странице создания сайтов.
Тридцать страниц поиска: двадцать девять — о техническом задании
Я прошёл первые 30 результатов по запросу «задания создания сайтов». Двадцать девять из них — о техническом задании: 23 инструкции «как составить ТЗ», три библиотеки и каталога типовых ТЗ, один онлайн-конструктор ТЗ и два ТЗ под конкретную задачу — для Тильды и для SEO. Одна страница — о том, как ставить задачи на доработку сайта. Учебных заданий нет ни одного, хотя запросы «контрольные работы создание сайтов» и «экзамен создание сайта» в кластере есть.
О ТЗ на весь проект у меня есть отдельные статьи — ссылки в конце. Здесь о том, чего в выдаче нет: о задаче как единице работы и об учебных заданиях.
Задача, ТЗ и пожелание: в чём разница
Задачи при создании сайтов и задачи после запуска формулируются по-разному, но путают их одинаково часто.
❌ Пожелание
«Сделайте главную поживее», «надо доработать каталог», «хочу как у конкурентов». Исполнитель не знает, что именно менять и когда работа закончена. Итог — пять кругов правок и испорченные отношения.
✅ Задача
«На странице /uslugi/ под заголовком добавить блок из трёх преимуществ, тексты во вложении, на телефоне — в столбик. Готово, когда блок виден на сайте». Одна задача — одно изменение с понятным результатом.
ТЗ — это набор таких задач на весь проект плюс общие требования: структура, функции, контент, приёмка. Задачи на создание сайтов складываются в ТЗ, а задачи на доработку живут сами по себе — в письме, мессенджере или трекере. И вот их формулировать умеют гораздо реже.
Как поставить задачу вебмастеру: пять частей
- Где. Полный адрес страницы, а не «на сайте» или «в услугах». Если элемент один из многих — уточните, какой.
- Что сейчас. Скриншот с выделением — он отвечает на половину вопросов исполнителя. Для ошибок — телефон или компьютер, какой браузер.
- Что нужно. Как должно быть, а не «исправить». Тексты, фото, файлы — во вложении, а не «возьмите с сайта конкурента».
- Как проверить. Критерий готовности: «заявка приходит на почту», «блок виден на телефоне». Без него задача никогда не заканчивается.
- Срок и важность. «Срочно» без причины не работает — напишите, что случится, если не сделать к сроку.
Совет вебмастера: одна задача — одно сообщение. Список из десяти правок в одном абзаце гарантирует, что одну из них пропустят. Если правок много — пронумеруйте их, и тогда в ответе будет понятно, какая сделана, а какая нет.
Тренажёр: понятно ли исполнителю
Ниже восемь реальных по духу формулировок задач, которые получает любой вебмастер. Для каждой решите: можно брать в работу или нужно уточнить? После ответа появится разбор и исправленная формулировка. Тренажёр пригодится и заказчику, и студенту — постановка задачи входит в задачи по созданию веб-сайтов не меньше, чем вёрстка.
1. «Сделайте сайт современнее, сейчас он выглядит устаревшим.»
«Современнее» каждый понимает по-своему. Нет ни страницы, ни критерия готовности.
Как написать: «Покажите 2–3 сайта, которые нравятся, и назовите, что именно в них нравится: шрифт, отступы, фото. Начнём с главной страницы.»
2. «На странице /ceny/ в таблице заменить цену «Ремонт ванной» с 85 000 на 90 000 ₽. Сегодня до 18:00 — завтра выходит рассылка.»
Есть где, что сейчас, что нужно, срок и причина срочности. Проверка очевидна: на странице новая цена.
3. «Не работает форма.»
Какая форма, на какой странице, что значит «не работает» — не отправляется, не приходит письмо, ошибка?
Как написать: «Форма на /kontakty/: после нажатия «Отправить» ничего не происходит (Chrome на Android, скриншот). Готово, когда тестовая заявка придёт на почту.»
4. «Добавьте на главную блок отзывов как у конкурента, ссылка: …»
Копировать чужой блок нельзя, а отзывы откуда брать — не сказано. Непонятно и место на странице.
Как написать: «После блока «Наши работы» на главной добавить три отзыва: тексты и фото клиентов во вложении, разрешения на публикацию есть. На телефоне — листаются по одному.»
5. «В подвале сайта телефон +7 495 123-45-67 заменить на +7 495 765-43-21 на всех страницах. Старый номер отключат 1 ноября.»
Одно изменение, понятно где и на что, есть срок и причина. Проверить — открыть пару страниц.
6. «Нужно поднять сайт в поиске.»
Это не задача, а цель. Её разбивают на задачи после аудита: что мешает, какие страницы, какие запросы.
Как написать: «Проведите аудит и предложите список задач по продвижению услуги «ремонт ванной» в Москве, с оценкой сроков и стоимости.»
7. «На странице /uslugi/remont-kuhni/ фото в галерее грузятся медленно на телефоне. Нужно, чтобы страница открывалась быстрее — по PageSpeed для мобильных хотя бы 70.»
Есть страница, проблема и измеримый критерий готовности. Исполнитель сам выберет способ — это правильно.
8. «Поправьте тексты на сайте, там ошибки.»
Где именно, какие ошибки? Исполнитель будет вычитывать весь сайт — это другая работа и другая цена.
Как написать: «На страницах /o-kompanii/ и /dostavka/ исправить опечатки, отмечены в приложенном файле. Или: вычитать весь сайт — оцените стоимость.»
Ответов: 0 из 8.
Обратите внимание: в хороших формулировках исполнитель не получает указаний, как делать, — только что и как проверить. Способ — работа вебмастера. Задача «сделать страницу быстрее, PageSpeed не ниже 70» полезнее, чем «сожмите картинки»: может оказаться, что тормозят не картинки.
Задачи по созданию веб-сайтов: из чего складывается проект
Если вы заказчик и хотите понимать, за что платите, — вот основные задачи при создании сайтов, сгруппированные по тому, кто за что отвечает.
- Решает владелец: цель сайта и целевое действие, список услуг и цен, тексты или тезисы, фото, кто будет обрабатывать заявки.
- Решаем вместе: структура и список страниц, блоки на каждом типе страницы, стиль, интеграции с CRM, 1С, оплатой.
- Делает вебмастер: прототип и дизайн, вёрстка с адаптацией под телефон, установка CMS, формы и отправка заявок, базовая SEO-настройка, аналитика, перенос на хостинг и запуск.
- После запуска: обновление CMS и модулей, резервные копии, мелкие правки — поддержка от 10 000 ₽ в месяц, если сайт меняется часто.
Мои ориентиры по цене и срокам: лендинг от 15 000 ₽ за 3–7 дней, визитка — 25 000 ₽ за 7–14 дней, корпоративный сайт — 40 000 ₽ за 2–4 недели, интернет-магазин на OpenCart — 60 000 ₽ за 3–6 недель. Точную цену даёт список задач — поэтому их и стоит сформулировать заранее.
Учебные задания по созданию web-сайтов: пять уровней
Теперь вторая аудитория. Задания по теме «Создание сайтов» в школе, колледже или на курсах часто страдают одним из двух перекосов: либо «сделайте сайт о себе» без критериев, либо десять задач на отдельные теги без связи с реальным сайтом. Работают задания, которые идут по уровням и на каждом дают законченный результат.
Каждое задание по созданию web-сайтов должно отвечать на три вопроса: что сделать, по какому образцу или условию и как будет оцениваться. Без третьего пункта контрольная превращается в конкурс красоты, где спорят о цвете кнопки, а не о том, работает ли страница на телефоне.
Критерии вместо «нравится». Для практических работ я бы советовал оценивать то, что можно проверить: страница проходит валидатор, не ломается на ширине телефона, все ссылки работают, у картинок есть alt, форма не отправляется пустой. Дизайн — отдельным пунктом и с низким весом.
Генератор варианта контрольной работы
Для преподавателя — генератор вариантов: выберите платформу и уровень, и он соберёт из банка задач вариант из трёх заданий с критериями оценки. Номер варианта задаёт набор, поэтому вариант № 7 всегда одинаковый — удобно раздать группе разные варианты и потом проверять по номеру. Студенту — способ потренироваться перед контрольной.
- Сверстайте страницу-резюме: заголовок с именем, фото, разделы «Образование» и «Навыки» списками, ссылка на почту. Только HTML, без CSS.
- Сделайте страницу рецепта: название, фото готового блюда, нумерованный список шагов, маркированный список ингредиентов, таблица пищевой ценности.
- Создайте сайт из трёх страниц (главная, «О нас», «Контакты») с одинаковым меню и рабочими ссылками между страницами.
- Сверстайте страницу расписания занятий в виде таблицы с объединёнными ячейками для сдвоенных пар.
- Сделайте страницу «Часто задаваемые вопросы» с оглавлением: ссылки вверху ведут к ответам ниже на той же странице.
- По выданному макету сверстайте карточку товара: фото слева, описание и цена справа, кнопка «В корзину». Отклонение от макета — не более 5 px.
- Сверстайте шапку сайта с логотипом, меню из пяти пунктов и телефоном, выровненными по одной линии с помощью flexbox.
- Сделайте адаптивную сетку из шести карточек услуг: три в ряд на компьютере, две на планшете, одна на телефоне.
- Сверстайте лендинг из четырёх блоков (первый экран, преимущества, отзывы, форма) так, чтобы на ширине 375 px не было горизонтальной прокрутки.
- Сделайте меню, которое на телефоне сворачивается в кнопку-«бургер» и разворачивается по нажатию без JavaScript.
- Сделайте форму заявки с проверкой: имя не короче двух букв, телефон в формате +7, согласие обязательно. Ошибка показывается под полем, а не во всплывающем окне.
- Сделайте галерею из восьми фото: по нажатию фото открывается крупно, закрывается по клавише Esc и кнопке. Картинки загружаются лениво.
- Сделайте калькулятор стоимости: площадь и тип работ — на выходе цена, пересчёт при каждом изменении поля.
- Разместите готовый сайт на бесплатном хостинге или GitHub Pages, подключите счётчик посещаемости и пришлите ссылку.
- Доведите страницу до 90+ баллов в PageSpeed для мобильных: оптимизируйте изображения, шрифты и порядок загрузки скриптов. Приложите отчёт до и после.
- Соберите на стандартных блоках одностраничный сайт кофейни: обложка, меню с ценами, фото, адрес с картой, контакты.
- Настройте у страницы заголовок и описание для поиска и адрес страницы латиницей. Проверьте, как ссылка выглядит при отправке в мессенджере.
- Соберите сайт из трёх страниц с общим меню-шапкой и подвалом, вынесенными в отдельные страницы-блоки.
- Добавьте форму заявки с полями «Имя» и «Телефон» и настройте получение заявок на почту.
- Сделайте страницу-портфолио: галерея работ, у каждой — подпись и ссылка на подробную страницу.
- В Zero Block сверстайте первый экран по макету и настройте отображение для ширин компьютера, планшета и телефона.
- Соберите каталог из восьми товаров с карточками, ценами и корзиной; оформите тестовый заказ.
- Сделайте квиз из четырёх вопросов, который в конце предлагает оставить телефон и передаёт ответы вместе с заявкой.
- Настройте всплывающее окно с формой, которое открывается по кнопке «Записаться» в трёх местах страницы.
- Подключите Яндекс Метрику и настройте цель на отправку формы. Отправьте тестовую заявку и найдите её в отчёте.
- Соберите сайт услуги из пяти страниц: структура, тексты-заглушки заменены своими, единый стиль, политика конфиденциальности и согласие у каждой формы.
- Подключите собственный домен, настройте HTTPS и переадресацию с адреса с www на адрес без www.
- Сделайте страницу с анимацией по прокрутке в Zero Block так, чтобы на телефоне она отключалась и не мешала чтению.
- Настройте отправку заявок одновременно на почту и в мессенджер и проверьте, что обе приходят.
- Проведите самопроверку готового сайта: скорость, отображение на телефоне, все формы, ссылки, заголовки страниц. Оформите отчёт с исправлениями.
Задания в банке составлены так, чтобы результат можно было открыть в браузере и проверить по критериям за несколько минут. Если генератор выдал задание, которое не подходит программе курса, просто листайте варианты — в каждом уровне пять заданий, и любые три из них дают сопоставимую нагрузку.
Контрольные работы и экзамен по созданию сайта
Контрольные работы по созданию сайтов обычно состоят из двух частей, и готовиться к ним нужно по-разному.
- Теория. Назначение основных тегов, разница между блочными и строчными элементами, селекторы и каскад в CSS, что такое домен, хостинг, DNS, протокол HTTPS, чем CMS отличается от конструктора. Здесь помогает не зубрёжка, а умение объяснить своими словами на примере.
- Практика. Сверстать страницу или блок по макету за ограниченное время. Готовьтесь, делая задания на время: первый раз задание среднего уровня может занять три часа, на пятый — час.
Экзамен по созданию сайта в колледже или на курсах чаще всего практический: выдаётся макет или описание и набор требований, работу проверяют по списку критериев. Перед экзаменом стоит уточнить у преподавателя три вещи: можно ли пользоваться документацией и интернетом, какие инструменты будут на компьютере и как распределяются баллы. От ответа на первый вопрос зависит, учить ли свойства CSS наизусть.
Совет вебмастера: на экзамене и в контрольной первым делом сделайте работающий минимум — всю структуру страницы без украшений. Потом добавляйте стили и детали. Незаконченная, но целая страница почти всегда оценивается выше, чем идеальная шапка и пустота под ней.
Задания для создания сайтов на Тильде
Тильда часто входит в программы курсов для дизайнеров и маркетологов: результат виден быстро, а программировать не нужно. Задания для создания сайтов на Тильде есть в генераторе выше, а при составлении своих стоит помнить о трёх вещах.
- Проверять результат, а не красоту. Пришла ли заявка, открывается ли сайт на телефоне, заполнены ли заголовок и описание страницы для поиска.
- Требовать своих текстов. Шаблон с демонстрационным текстом — не выполненное задание.
- Давать Zero Block отдельно. Сборка из стандартных блоков и вёрстка в Zero Block — разные навыки, и второй требует адаптации под каждую ширину экрана вручную.
Подробнее о том, как оценивать учебный проект на конструкторе, я писал в статье о создании сайта на конструкторе — там есть шкала самопроверки из шести пунктов.
Как ищут: короткие ответы
- «задания на создания сайтов» и «задания создания сайтов» — если вы заказчик, начните с пяти частей задачи; если студент — с генератора вариантов.
- «задачи для создания сайтов» — набор задач проекта: от цели и структуры до запуска и аналитики; распределение по ответственным — в разделе выше.
- «задачи на создание сайтов» — их собирают в техническое задание; для доработок достаточно отдельных задач в письме или трекере.
- «задачи создание веб сайтов» — у вебмастера это прототип, дизайн, вёрстка, CMS, формы, SEO-база и запуск; у владельца — цель, контент и обработка заявок.
- «экзамен создание сайта» — обычно практическая работа по макету с критериями; уточните, разрешена ли документация.
Самые дорогие задачи в моей практике — не сложные, а неясные. Сложную задачу можно оценить и сделать. Неясную приходится переделывать, пока заказчик не поймёт, чего хотел. Поэтому я никогда не обижаюсь на длинные письма с задачами — обижаться стоит на короткие.
— Александр Рожков
Есть задачи по новому сайту или по доработке старого? Пришлите их в любом виде — помогу сформулировать и оценю. Условия — на странице создания сайтов, ориентир по цене — в калькуляторе.
Итог
Задания для создания сайтов — это две разные темы. Заказчику нужна понятная задача из пяти частей: где, что сейчас, что нужно, как проверить и к какому сроку; набор таких задач на весь проект — это ТЗ. Студенту и преподавателю нужны задания по уровням — от одной страницы до опубликованного сайта, — у каждого законченный результат и критерии, которые можно проверить, а не обсуждать. И в том и в другом случае работает одно правило: хорошее задание заканчивается словами «готово, когда…».
Если нужен сайт под ваши задачи — условия на странице создания сайтов.
Опрос
Зачем вам задания по созданию сайтов?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Чем задача отличается от технического задания?
Задача — одно изменение с понятным результатом. ТЗ — набор задач на весь проект плюс общие требования к структуре, функциям, контенту и приёмке.
Как правильно поставить задачу вебмастеру?
Укажите, где (адрес страницы), что сейчас (скриншот), что нужно (с материалами), как проверить готовность и к какому сроку — с причиной, если срочно.
Почему нельзя писать «сделайте красиво»?
Потому что у исполнителя нет критерия готовности. Покажите примеры и назовите, что в них нравится, — это превращает вкус в задачу.
Какие задания давать студентам по созданию сайтов?
По уровням: страница на HTML, вёрстка по макету, адаптация под телефон, форма и интерактив, публикация. У каждого задания — законченный результат и проверяемые критерии.
Как оценивать практическую работу по созданию сайта?
По тому, что можно проверить: валидность кода, отсутствие прокрутки на телефоне, рабочие ссылки и формы, alt у картинок. Дизайн — отдельным пунктом с небольшим весом.
Как подготовиться к экзамену по созданию сайта?
Делать задания на время, повторить основы HTML, CSS и устройства интернета, уточнить, разрешена ли документация. На экзамене сначала собрать рабочую структуру, потом стили.
Подходит ли Тильда для учебных заданий?
Да, для курсов дизайна и маркетинга. Задания стоит строить на проверяемом результате: заявки приходят, сайт открывается на телефоне, тексты свои.
