Выполняем первое задание

Введение

Рабочее окружение готово — теперь самое время выполнить первое задание.

В этой статье мы вместе пройдем весь путь: создадим репозиторий, прикрепим его к заданию, выполним проверку и завершим работу.

Чтобы сосредоточиться на работе с платформой, в этой статье мы не будем подробно разбирать HTML и CSS. Предположим, что верстка уже готова, а наша задача — пройти весь путь от создания репозитория до завершения задания.

Открываем страницу задания

В качестве примера будем использовать задание «Карточка пользователя».

На странице задания вы найдете:

• описание задания;
• требования к выполнению;
• список навыков, которые будут развиваться;
• количество опыта за выполнение;
• кнопку «Начать задание».

Нажмите кнопку «Начать задание», чтобы подготовить проект к работе.

Подготовка к заданию

После нажатия откроется окно подготовки. Именно здесь происходит привязка вашего GitHub-репозитория к заданию.

Создаем репозиторий

Нажмите кнопку «Создать репозиторий».

Вы будете перенаправлены на GitHub. Для каждого задания на платформе заранее подготовлен собственный шаблон репозитория. После нажатия кнопки GitHub автоматически предложит создать новый репозиторий на основе этого шаблона.

Достаточно нажать Create repository и немного подождать — все необходимые файлы уже будут созданы автоматически. Никаких дополнительных настроек выполнять не нужно.

Прикрепляем репозиторий

После создания репозитория скопируйте ссылку на него и вставьте в поле ввода. Платформа проверит, что репозиторий действительно был создан из правильного шаблона.

Если указать ссылку на другой репозиторий, появится сообщение об ошибке, и начать выполнение задания не получится.

Начинаем работу

Когда ссылка успешно пройдет проверку, нажмите кнопку «Начать задание». В течение нескольких секунд платформа свяжет созданный репозиторий с вашим заданием.

Работа над проектом

После запуска задания можно приступать к выполнению работы. Для начала необходимо склонировать репозиторий на компьютер:

git clone https://github.com/username/project.git

Вместо https://github.com/username/project.git необходимо указать адрес своего репозитория. Его можно скопировать на странице GitHub, нажав зеленую кнопку Code, либо взять из адресной строки браузера.

После этого откройте папку проекта в Visual Studio Code и выполните задание. В рамках этой статьи мы не будем подробно разбирать HTML и CSS. Предположим, что работа уже готова и все необходимые изменения внесены в проект.

Теперь осталось отправить изменения на GitHub.

Добавьте измененные файлы:

git add .

Создайте коммит:

git commit -m "Выполнил задание"

И отправьте изменения в репозиторий:

git push

После выполнения команды git push последняя версия вашего проекта станет доступна на GitHub, а значит платформа сможет проверить именно тот код, который вы только что написали.

Что изменится после начала задания?

После запуска задания интерфейс страницы изменится. Вместо кнопки начала работы появятся новые действия:

• Макет задания
• Репозиторий
• Проверить задание
• Завершить задание

Макет задания

Открывает дизайн, который необходимо сверстать.

Репозиторий

Открывает ваш GitHub-репозиторий, который был прикреплен к заданию.

Именно сюда необходимо отправлять все изменения с помощью Git.

Проверить задание

Эта кнопка запускает автоматическую проверку. Во время проверки Verstaem.online:

• скачивает последнюю версию проекта из GitHub;
• анализирует файлы;
• выполняет проверки;
• показывает найденные ошибки.

Важно понимать, что проверяется именно код, который находится в вашем GitHub-репозитории.

Если после изменений вы не выполнили git push, платформа обнаружит, что в GitHub находится устаревшая версия проекта, и остановит проверку. В этом случае появится сообщение об ошибке с предложением сначала отправить последние изменения в репозиторий.

Также количество обычных проверок ограничено — для каждого задания доступно две проверки.

Поэтому не стоит запускать их после каждого небольшого изменения. Гораздо эффективнее сначала закончить работу, отправить изменения на GitHub и только после этого проверить результат.

Завершаем задание

Когда работа будет готова, нажмите кнопку «Завершить задание». Перед завершением работа снова будет проверена, после чего задание будет отмечено как завершенное. Эта проверка не расходует лимит обычных проверок и выполняется автоматически.

После завершения вы получите:

• общий опыт профиля;
• опыт по навыкам, которые развивает это задание;
• прогресс пути обучения;
• достижения (если выполнены условия их получения).

Кроме того, на странице задания останутся доступны несколько полезных действий.

Отчет о проверке

После проверки или завершения задания появляется кнопка просмотра отчета. В отчете можно увидеть найденные ошибки и рекомендации по их исправлению.

Даже если задание уже завершено, отчет остается доступным.

При этом завершить задание можно даже при наличии ошибок. Это сделано специально — вы всегда сможете вернуться к отчету позже, исправить проект и сравнить результат с предыдущей проверкой.

Мое решение

Эта кнопка открывает ваш GitHub-репозиторий с выполненной работой. Вы всегда сможете вернуться к своему решению, показать его другим или использовать как основу для будущих проектов.

Макет задания

Ссылка на макет также остается доступной. Хотя повторно выполнить это задание на платформе уже нельзя, никто не мешает вам открыть макет снова и попробовать сверстать его еще раз самостоятельно.

Смотреть разбор

После завершения задания становится доступен подробный разбор решения. В отличие от требований задания, здесь уже показывается один из возможных вариантов реализации.

В разборе подробно объясняется структура HTML, CSS и JavaScript, рассматриваются принятые решения и даются рекомендации по реализации.

Если во время выполнения задания возникли сложности, рекомендуем сначала попробовать найти решение самостоятельно, а затем сравнить свою работу с разбором.

Что проверяет платформа?

Во время проверки анализируется структура проекта, HTML, CSS и JavaScript в зависимости от требований конкретного задания.

Кроме этого, выполняются и общие проверки, например проверка валидности HTML-документа и другие базовые проверки качества проекта.

Полный набор проверок зависит от конкретного задания.

Что дальше?

Теперь вы знаете, как выполняются задания на Verstaem.online. Осталось применить эти знания на практике — в следующем шаге вас ждет первое самостоятельное задание.