Как устроены практические задания

Free Preview
Продолжительность: 10 мин

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


Где хранятся задания

Все практические задания курса живут в открытом репозитории на SourceCraft:

sourcecraft.dev/maks88sgt/frontend-basics-tasks

Внутри репозитория структура простая:

tasks/
  frontend-basics/
    lesson-1.8-html-landing/
      README.md      ← описание задания и критерии
      index.html     ← стартовый файл, с которого начинаете работу
    lesson-2.11-flexbox/
      README.md
      index.html
    ...
solutions/
  landing/
    task-1-html.html    ← эталонное решение (смотрите только если застряли!)
    task-2-flexbox.html
    ...

Папка solutions/ — для ориентира, а не для копирования. Смысл заданий — самостоятельная работа.


Как начать работать с заданием

Шаг 1 — Привяжите аккаунт SourceCraft

Зайдите в настройки платформы: Аватар → Настройки, введите свой username на SourceCraft и сохраните. Это нужно, чтобы платформа знала, чьи PR-ы отслеживать и куда отправлять обратную связь.

Шаг 2 — Сделайте форк репозитория

На странице репозитория нажмите кнопку Fork (в правом верхнем углу). Это создаст копию репозитория в вашем аккаунте.

Шаг 3 — Клонируйте форк на компьютер

git clone https://sourcecraft.dev/ВАШ_USERNAME/frontend-basics-tasks.git cd frontend-basics-tasks
bash

Клонировать нужно только один раз — для всех заданий используется один и тот же репозиторий.

Шаг 4 — Создайте ветку для задания

Для каждого задания создавайте отдельную ветку от main:

git checkout -b lesson-1.8-html
bash

Шаг 5 — Откройте стартовый файл в VS Code

Найдите папку нужного задания, например tasks/frontend-basics/lesson-1.8-html-landing/. Там будет файл README.md с подробным описанием задания и index.html — стартовая точка.

Откройте папку в VS Code:

code tasks/frontend-basics/lesson-1.8-html-landing
bash

Как сдать задание

После выполнения задания нужно создать Pull Request в основной репозиторий.

1. Зафиксируйте изменения

git add . git commit -m "Выполнено задание 1.8 — HTML-структура лендинга"
bash

2. Отправьте ветку в ваш форк

git push origin lesson-1.8-html
bash

3. Создайте Pull Request

На SourceCraft перейдите в ваш форк и нажмите кнопку New Pull Request (или Создать запрос на слияние). Укажите:

  • откуда: ваш форк, ветка с заданием
  • куда: maks88sgt/frontend-basics-tasks, ветка main

Дайте PR понятное название, например: Задание 1.8 — HTML-структура лендинга.


Автоматическая проверка

После создания PR запускается автоматический чекер. Он анализирует ваш код и оставляет комментарий прямо в PR — без ожидания ручной проверки.

Результат также отображается на платформе: откройте урок, перейдите на вкладку Задание — там будет статус последней проверки и подробная обратная связь.

Возможные статусы:

СтатусЧто означает
⏳ ПроверяетсяPR создан, чекер работает
✅ ПринятоВсе обязательные критерии выполнены
❌ Есть ошибкиЕсть замечания — читайте детали и правьте код
🔄 Требует доработкиКод принят частично, но нужно улучшить

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


Как устроена вкладка «Задание» в уроке

Практические уроки отмечены вкладкой Задание рядом с теорией. Там вы найдёте:

  • ссылку на папку с заданием в репозитории;
  • ссылку для создания нового PR;
  • текущий статус последней проверки;
  • детали — какие критерии пройдены, а какие нет.

Чтобы вкладка работала, не забудьте привязать аккаунт SourceCraft в Настройках (Шаг 1).


Итог

  • Задания хранятся в репозитории maks88sgt/frontend-basics-tasks на SourceCraft.
  • Форкните репозиторий → клонируйте → создайте ветку → выполните задание → откройте PR.
  • Автоматический чекер проверит код и оставит комментарий в PR и на платформе.
  • Привяжите аккаунт SourceCraft в Настройках — иначе платформа не сможет связать PR с вашим профилем.

В следующем уроке переходим к HTML — начнём писать настоящий код.

Комментарии

Войдите, чтобы оставить комментарий