Финальный проект: защита и первые шаги в профессии

01 Финальный проект: что нужно сдать

В мини-проектах идею вам давали. В финальном проекте идея ваша: вы сами решаете, какую задачу решает приложение, но обязательно согласовываете её с преподавателем до начала работы. Это защита от двух крайностей: слишком простой идеи («кнопка меняет цвет») и слишком огромной («свой Instagram»). Нужен проект, который вы реально можете довести до конца и объяснить.

Что должно быть в проекте

Проект проверяет весь курс сразу: JavaScript, DOM, async, а ещё Git, деплой и README. Обязательный минимум:

Примеры идей подходящего размера

02 Как оценивается проект (0–100) и как считается итог курса

Финальный проект оценивается по шкале 0–100 и даёт 30% итоговой оценки курса. Это самый тяжёлый компонент, поэтому критерии прозрачны заранее.

Что снимает баллы

• Не можете объяснить свой код — теряете баллы в том критерии, к которому он относится.
• Нет публичной ссылки — максимум 5 из 10 за «Git и деплой».
• Код скопирован у другого студента или целиком из чата без понимания — 0 за проект. Помогать друг другу можно, но каждый пишет и понимает своё.
• Просрочка — по договорённости с преподавателем, до −10 баллов.

Итоговая оценка курса

Все четыре условия нужно выполнить одновременно. Посчитаем это кодом: правила — это просто числа и сравнения, а с ними вы уже умеете работать.

function gradeLabel(score) {
  if (score >= 90) return "Отлично";
  if (score >= 75) return "Хорошо";
  if (score >= 60) return "Удовлетворительно";
  return "Не аттестован";
}

function finalScore(att, hw, mini, final) {
  // верните взвешенную сумму, округлённую до 0.1
}

for (const [name, ...marks] of [
  ["Алишер", 90, 8, 86, 78],
  ["Мадина", 100, 9, 94, 92],
  ["Рустам", 60, 6, 56, 50],
]) {
  const score = finalScore(...marks);
  console.log(`${name}: ${score} ${gradeLabel(score)}`);
}

Алишер: 82.4 Хорошо
Мадина: 93.1 Отлично
Рустам: 56 Не аттестован

function blockers(s) {
  const list = [];
  // посещаемость >= 70, ДЗ сдано >= 18, оба мини-проекта сданы (2), финал >= 60
  return list;
}

const students = [
  { name: "Алишер", attendance: 85, homework: 20, miniProjects: 2, finalScore: 78 },
  { name: "Зарина", attendance: 65, homework: 17, miniProjects: 2, finalScore: 90 },
  { name: "Фарход", attendance: 90, homework: 24, miniProjects: 1, finalScore: 55 },
];

for (const s of students) {
  const bad = blockers(s);
  console.log(bad.length === 0 ? `${s.name}: сертификат` : `${s.name}: нет, не хватает — ${bad.join(", ")}`);
}

Алишер: сертификат
Зарина: нет, не хватает — посещаемость, ДЗ
Фарход: нет, не хватает — мини-проекты, финал

const known = 90 * 0.15 + 8 * 10 * 0.3 + 86 * 0.25;
const target = 75;

// сколько баллов нужно на финале?

Нужно на защите: 54

03 Повторение курса: пять модулей на одной странице

Перед защитой полезно пройтись по всему пути одним взглядом. Ниже — по одному компактному блоку на модуль: что вы умеете и что стоит вспомнить. Если какой-то пункт вызывает тревогу — откройте урок по ссылке и перечитайте его. Потом проверьте себя в разделе 04.

Модуль 1 · JS-фундамент (уроки 1–6)

• Урок 1. Старт: как JS живёт в браузере, script, консоль, DevTools.
• Урок 2. Переменные: let / const, типы, typeof, приведение типов ("5" + 3 и "5" - 3).
• Урок 3. Условия: if / else, ===, &&, ||, ??, truthy и falsy.
• Урок 4. Циклы: for, while, for...of, break / continue.
• Урок 5. Функции: параметры и return, стрелочные функции, область видимости, замыкания.
• Урок 6. Массивы: map, filter, reduce, find, sort, spread.

Модуль 2 · DOM и интерфейс (уроки 7–12)

• Урок 7. Объекты: свойства, деструктуризация, Object.entries, копирование через spread, JSON.
• Урок 8. DOM: querySelector, createElement, textContent, classList.
• Урок 9. События: addEventListener, event.target, делегирование через closest.
• Урок 10. Формы: submit и preventDefault, валидация, сообщения об ошибках.
• Урок 11. Состояние: один объект state, функция render, localStorage + JSON.
• Урок 12. Мини-проект 1: декомпозиция, MVP, ревью и первая защита.

Модуль 3 · Async и API (уроки 13–18)

• Урок 13. Асинхронность: event loop, setTimeout, колбэки, Promise.
• Урок 14. fetch: запрос, response.ok, json(), async / await, try / catch.
• Урок 15. Работа с API: документация, параметры запроса, свои обёртки над fetch.
• Урок 16. Состояния загрузки: загрузка, ошибка, пусто, успех; Promise.all.
• Урок 17. Модули и Vite: import / export, npm, структура проекта.
• Урок 18. Мини-проект 2: приложение на публичном API и контрольная без ИИ.

Модуль 4 · Инструменты и финал (уроки 19–21)

• Урок 19. Git и отладка: ветки, коммиты, pull request, чтение ошибок, DevTools.
• Урок 20. Чистый код: имена, короткие функции, ранний возврат, README, деплой.
• Урок 21 (этот): защита, карьерный блок, шпаргалка промптов.

Модуль 5 · React Lite, бонус (уроки 22–24)

• Урок 22. Введение в React: компоненты, JSX, props.
• Урок 23. Состояние в React: useState, списки и key.
• Урок 24. Эффекты: useEffect + fetch, дорожная карта к Уровню 3 (React Pro + Next.js).

04 Итоговый самотест: 16 задач по всему курсу

Это закрепление, а не экзамен: оценки за него нет, но результат покажет, где у вас слабые места. Правила простые: сначала решайте сами, без ИИ (как на контрольных уроков 6 и 18), подсказки открывайте только после честной попытки. Задачи идут по модулям: сначала фундамент (4.1–4.8), потом DOM, события и формы (4.9–4.11), потом async (4.12–4.14) и в конце — отладка и безопасная работа с данными (4.15–4.16).

const user = { name: "Мадина" };
console.log(user.address.city); // ✖ TypeError: Cannot read properties of undefined (reading 'city')

async function getPrice() {
  return 25;
}

const price = getPrice();
console.log(price + 5); // ✖ напечатает "[object Promise]5", а не 30: забыли await

Починка: user.address?.city (или проверка перед чтением) и const price = await getPrice(); внутри async-функции. Если вы сразу видите, где ошибка, значит модуль 3 вы усвоили.

// const withDiscount = ...

console.log(withDiscount(200) + " сомони");
console.log(withDiscount(350, 20) + " сомони");
console.log(withDiscount(99, 0) + " сомони");

180 сомони
280 сомони
99 сомони

console.log("5" + 3);
console.log("5" - 3);
console.log(typeof null);
console.log(0.1 + 0.2 === 0.3);
console.log(Boolean("0"));
console.log("10" > "9");

// седьмая строка — ваша

53
2
object
false
true
false
NaN

const scores = [95, 82, 67, 45, 75];

// function label(score) { ... }

// цикл for...of: выводим "балл: оценка", считаем не аттестованных

95: Отлично
82: Хорошо
67: Удовлетворительно
45: Не аттестован
75: Хорошо
Не аттестовано: 1

const students = [
  { name: "Алишер", score: 92, group: "A" },
  { name: "Мадина", score: 78, group: "B" },
  { name: "Фарход", score: 64, group: "A" },
  { name: "Зарина", score: 88, group: "B" },
  { name: "Рустам", score: 55, group: "A" },
];

// 1) имена с баллом >= 75
// 2) средний балл группы A, toFixed(1)

Алишер, Мадина, Зарина
Среднее по группе A: 70.3

const students = [
  { name: "Мадина", score: 78 },
  { name: "Алишер", score: 92 },
  { name: "Фарход", score: 64 },
  { name: "Зарина", score: 88 },
];

// отсортируйте КОПИЮ по убыванию балла, выведите первых трёх

1. Алишер — 92
2. Зарина — 88
3. Мадина — 78
Первый в исходном списке: Мадина

const order = {
  id: 1,
  customer: { name: "Мадина", city: "Душанбе" },
  items: ["плов"],
  paid: false,
};

// const paidOrder = ...
// const movedOrder = ...

console.log(order.paid);
console.log(paidOrder.paid);
console.log(order.customer.city);
console.log(movedOrder.customer.city);
console.log(movedOrder.customer.name);
console.log(order.items === paidOrder.items);

false
true
Душанбе
Бохтар
Мадина
true

const menu = [
  { name: "Плов", cat: "горячее" },
  { name: "Салат", cat: "закуски" },
  { name: "Лагман", cat: "горячее" },
  { name: "Самбуса", cat: "выпечка" },
  { name: "Шурпа", cat: "горячее" },
  { name: "Нон", cat: "выпечка" },
];

// 1) counts = { ... }
// 2) выведите пары через Object.entries

горячее: 3
закуски: 1
выпечка: 2

// function makeCounter(step) { ... }

const a = makeCounter(2);
a.inc();
a.inc();
console.log(a.value());

const b = makeCounter(5);
b.inc();
console.log(b.value(), a.value());

a.reset();
console.log(a.value());

4
5 4
0

<ul id="menu"></ul>

const menu = document.querySelector("#menu");
const dishes = [
  { name: "Плов", price: 25 },
  { name: "Салат", price: 12 },
  { name: "Лагман", price: 22 },
  { name: "Самбуса", price: 8 },
];

// для каждого блюда создайте li и добавьте в menu

console.log(menu.children.length);
console.log(menu.querySelectorAll(".hot").length);
console.log(menu.lastElementChild.textContent);

4
2
Самбуса — 8 сомони

<ul id="cart">
  <li data-id="1">Чай <button>✕</button></li>
  <li data-id="2">Нон <button>✕</button></li>
  <li data-id="3">Самбуса <button>✕</button></li>
</ul>

const cart = document.querySelector("#cart");

// cart.addEventListener("click", ...)

const ids = () => [...cart.children].map((li) => li.dataset.id).join(",");

cart.querySelector('[data-id="2"] button').click();
console.log(ids());

const extra = document.createElement("li");
extra.dataset.id = "4";
const extraBtn = document.createElement("button");
extraBtn.textContent = "✕";
extra.append("Шурпа ", extraBtn);
cart.append(extra);

extraBtn.click();
console.log(ids());

1,3
1,3

<form id="form">
  <input id="title" placeholder="Название">
  <button>Добавить</button>
</form>
<p id="err"></p>
<ul id="list"></ul>

const form = document.querySelector("#form");
const input = document.querySelector("#title");
const err = document.querySelector("#err");
const list = document.querySelector("#list");

// form.addEventListener("submit", ...)

function send(value) {
  input.value = value;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
}

send("   ");
console.log(err.textContent + "|" + list.children.length);

send(" Плов ");
console.log("[" + err.textContent + "] " + list.children.length + " " + list.firstElementChild.textContent);

Введите название|0
[] 1 Плов

const fakeFetch = (url) =>
  new Promise((resolve) =>
    setTimeout(() => {
      if (url === "/students") {
        resolve({ ok: true, status: 200, json: async () => ["Алишер", "Мадина", "Зарина"] });
      } else {
        resolve({ ok: false, status: 404 });
      }
    }, 30)
  );

// async function loadList(url) { ... }

async function main() {
  for (const url of ["/students", "/teachers"]) {
    // try / catch / finally: "Загружено: N" или "Ошибка: HTTP 404", в finally — "Готово: адрес"
  }
}

main();

Загружено: 3
Готово: /students
Ошибка: HTTP 404
Готово: /teachers

const delay = (ms) => new Promise((r) => setTimeout(r, ms));

const requests = [
  { name: "студенты", run: async () => { await delay(40); return 12; } },
  { name: "преподаватели", run: async () => { await delay(10); return 3; } },
  { name: "оплаты", run: async () => { await delay(20); throw new Error("Нет сети"); } },
];

async function main() {
  // запустите все run() параллельно, дождитесь allSettled
  // выведите строки по порядку из массива requests и итог
}

main();

студенты: ok (12)
преподаватели: ok (3)
оплаты: ошибка (Нет сети)
Успешно: 2 из 3

const out = [];
const log = (s) => out.push(s);

async function f() {
  log("A");
  await null;
  log("B");
}

log("start");
setTimeout(() => log("timeout"), 0);
f();
Promise.resolve().then(() => log("promise"));
log("end");

// ваш прогноз — метки в порядке выполнения
const prediction = [];

setTimeout(() => {
  console.log(out.join(" → "));
  console.log("Прогноз верный: " + (prediction.join(" → ") === out.join(" → ") ? "да" : "нет"));
}, 20);

start → A → end → B → promise → timeout
Прогноз верный: да

function average(numbers) {
  let sum;
  for (let i = 0; i <= numbers.length; i++) {
    sum += numbers[i];
  }
  return sum / numbers.length;
}

console.log(average([4, 8, 6]));
console.log(average([]));

6
0

// function safeParse(text, fallback) { ... }

console.log(safeParse('{"theme":"dark"}', {}).theme);
console.log(safeParse("{oops", { theme: "light" }).theme);
console.log(safeParse("", []).length);

dark
light
0

05 Защита: 5 минут, которые решают 20 баллов

Защита — это короткий рассказ о том, что вы сделали и как это работает. Не презентация и не допрос: вам нужно показать, что проект ваш и вы его понимаете. Поэтому на защиту отведено 20 баллов из 100. Вы уже защищали мини-проект на уроке 12, сегодня то же самое, только проект крупнее и работает по публичной ссылке.

Структура защиты на 5 минут

Сценарий демо: готовим заранее

Демо ломается чаще всего не из-за кода, а из-за неподготовленности. Запишите сценарий на бумаге и прогоните его вслух хотя бы один раз с секундомером.

1. Откройте нужные вкладки заранее: задеплоенный сайт, репозиторий на GitHub, редактор с файлами. Увеличьте шрифт в редакторе и масштаб страницы (Ctrl +).
2. Основной сценарий — три-четыре действия, которые показывают главную ценность: например «ввёл город → увидел погоду → добавил в избранное».
3. Покажите, что приложение не падает: пустой ввод, отключённый интернет (во вкладке Network в DevTools можно выбрать Offline) или неверный запрос.
4. Обновите страницу (F5) и покажите, что данные восстановились.
5. Запасной план: заранее сделайте скриншот или короткую запись экрана. Если интернет в аудитории подведёт, вы не растеряетесь.
6. Закончите фразой-мостиком: «Теперь покажу, как это устроено в коде».

12 типичных вопросов и о чём на них нужно сказать

1. Почему ты выбрал эту идею и для кого она?

Один реальный пользователь (вы сами, семья, одногруппники) и одна проблема. Не «всем нужно», а «мне нужно, потому что…».

2. Как устроен проект: какие файлы и за что они отвечают?

Назовите роли: данные и запросы, состояние, отрисовка, обработчики событий. Если модули — какой файл что экспортирует.

3. Что такое state и где он у тебя?

Один объект со всеми данными приложения, страница рисуется из него. Покажите его в коде и скажите, что в нём лежит.

4. Что происходит от клика по кнопке до изменения на экране?

Событие → обработчик → изменение состояния → render → сохранение. Прочертите цепочку на своём коде.

5. Откуда берутся данные и как ты обрабатываешь ошибку?

Покажите fetch, проверку response.ok, try / catch и четыре состояния экрана: загрузка, ошибка, пусто, успех.

6. Объясни async / await на своём примере.

await ждёт Promise и не блокирует страницу; функция с await обязана быть async; ошибки ловим try / catch. Если есть параллельные запросы — Promise.all.

7. Что в localStorage и что если там мусор?

JSON-строка по ключу проекта. Хранилище понимает только строки: JSON.stringify при записи, JSON.parse в try / catch при чтении, при ошибке стартуем с пустого состояния.

8. Как ты работал с Git: ветки, коммиты, как откатишь ошибку?

Покажите историю: осмысленные сообщения, ветку под новую функцию. Откат: git revert (безопасно) или возврат к коммиту; чего нельзя делать с общей веткой — переписывать историю.

9. Как развёрнут проект и что будет, если сборка упадёт?

Где задеплоено (Vercel или GitHub Pages), как обновляется (push в ветку), где смотреть лог сборки. Честно: «ошибку в логе читаю сверху, ищу первую красную строку».

10. Какой баг был самым сложным и как ты его нашёл?

Конкретика: что ожидали, что получили, какие гипотезы проверили, чем помогли DevTools и console.log. История поиска ценится выше, чем «у меня не было багов».

11. Где ты использовал ИИ? Объясни вот эту строку.

Скажите правду: что просили (план, объяснение ошибки, проверка), что изменили сами. Любую строку из показанных нужно объяснить своими словами. Не можете — честно скажите и разберите вслух.

12. Что бы ты улучшил, будь у тебя ещё неделя?

Один-два конкретных пункта: тесты, редактирование, адаптив, перенос на React. Это показывает, что вы видите границы своего проекта.

Как обсуждать чужие решения

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

1. Что получилось: два-три конкретных плюса.
2. Где вижу риск: место, где приложение может сломаться, и как вы это проверили.
3. Вопрос: «почему так?» вместо «это неправильно».
4. Предложение: одно конкретное улучшение. Автор решает, принимать ли его.

Принимать отзыв тоже нужно уметь: не спорьте сразу, запишите замечание, поблагодарите и подумайте после защиты. Автор вправе не согласиться, но должен объяснить почему.

const fmt = (sec) => `${Math.floor(sec / 60)}:${String(sec % 60).padStart(2, "0")}`;

const parts = [
  { name: "Представление", sec: 30 },
  { name: "Демо", sec: 90 },
  { name: "Код и архитектура", sec: 90 },
  { name: "Вопросы", sec: 90 },
];

// выведите "0:00–0:30 Представление" и т. д., затем "Итого: 5:00"

0:00–0:30 Представление
0:30–2:00 Демо
2:00–3:30 Код и архитектура
3:30–5:00 Вопросы
Итого: 5:00

const notes = [
  { to: "Мадина", kind: "plus", text: "Понятное демо" },
  { to: "Фарход", kind: "minus", text: "Нет обработки ошибки сети" },
  { to: "Мадина", kind: "plus", text: "Аккуратный код" },
  { to: "Зарина", kind: "plus", text: "Хороший README" },
  { to: "Фарход", kind: "plus", text: "Интересная идея" },
  { to: "Мадина", kind: "minus", text: "Длинная функция render" },
  { to: "Фарход", kind: "minus", text: "Много console.log" },
  { to: "Зарина", kind: "plus", text: "Есть состояния загрузки" },
  { to: "Фарход", kind: "minus", text: "Нет деплоя" },
  { to: "Зарина", kind: "plus", text: "Чистая история коммитов" },
];

// 1) stats = { имя: { plus, minus } }
// 2) выведите строки, затем проект с максимумом minus

Мадина: плюсов 2, улучшений 1
Фарход: плюсов 1, улучшений 3
Зарина: плюсов 3, улучшений 0
Больше всего улучшений: Фарход (3)

06 Карьерный блок: GitHub, резюме, портфолио, стажировка

Хороший проект, который никто не видел, не помогает найти работу. Этот раздел про то, как показать себя честно и ясно. Помните главный принцип: всё написанное в профиле и резюме вы должны уметь объяснить вслух. Работодатель проверит, а на собеседовании спросит.

Чек-лист GitHub-профиля

• ☐ Фото и имя: настоящее имя латиницей, нормальная фотография или аккуратный аватар.
• ☐ Bio в одну строку: «Junior frontend · JavaScript · учусь в MakeFirstStep», без громких слов.
• ☐ Локация (Dushanbe, Tajikistan) и контакт: Telegram или рабочая почта. Телефон публиковать не нужно.
• ☐ Профильный README (репозиторий с именем, совпадающим с вашим логином): 5–8 строк о себе, стек, ссылки на проекты.
• ☐ 3–6 закреплённых репозиториев (pin): лучшие проекты, а не заготовки «test» и «untitled».
• ☐ В каждом закреплённом проекте: описание, topics, ссылка на демо в поле Website, README со скриншотом.
• ☐ Чистая история: коммиты с понятными сообщениями на английском, а не «fix», «asdf», «1».
• ☐ Нет секретов: в репозитории нет файлов .env, ключей, паролей и токенов. Если случайно закоммитили ключ, считайте его скомпрометированным и сразу замените.
• ☐ Нет мусора: node_modules в .gitignore, старые пустые репозитории удалены или в архиве.
• ☐ Честная активность: не накручивайте «зелёные квадраты» пустыми коммитами. Опытный глаз это сразу видит.

Резюме junior frontend: что должно быть на одной странице

На позицию без опыта работодатель смотрит на три вещи: что вы умеете показать (проекты), как вы учитесь и можно ли с вами работать (ясность, честность). Резюме — одна страница, PDF, имя файла вроде Name-Surname-Frontend.pdf.

Мадина Рахимова
Junior Frontend Developer · Душанбе, Таджикистан
Telegram: @username · email@example.com
GitHub: github.com/username · Портфолио: username.github.io

О себе
Закончила курс «Frontend + ИИ» (MakeFirstStep, 2 месяца, JavaScript, DOM, fetch, Git).
Ищу стажировку или junior-позицию, готова работать в команде и быстро учиться.

Навыки
JavaScript (ES6+), HTML5, CSS3 (flexbox, grid), DOM и события, fetch и async/await,
Git и GitHub, Vite и npm, основы React (компоненты, useState, useEffect).

Проекты
Трекер привычек — чистый JavaScript, localStorage, фильтры, серии дней.
  Демо: ссылка · Код: ссылка
Погода по городам — fetch к публичному API, состояния загрузки и ошибки.
  Демо: ссылка · Код: ссылка

Образование и курсы
MakeFirstStep · Frontend + ИИ, Уровень 2 (2026)
Школа / вуз (если есть, одной строкой)

Языки
Таджикский — родной · Русский — свободно · Английский — чтение документации

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

const STOP = ["уникальн", "лучш", "эксперт", "гуру", "опытн"];

function flags(text) {
  // верните массив основ из STOP, которые есть в тексте (toLowerCase + includes)
}

const bullets = [
  "Трекер задач на чистом JavaScript: добавление, фильтры, сохранение в localStorage",
  "Уникальный проект, который меняет мир",
  "Опытный эксперт по JavaScript",
  "Приложение погоды на fetch и Open-Meteo API: состояния загрузки и ошибки",
];

bullets.forEach((b, i) => {
  const found = flags(b);
  console.log(`${i + 1}: ${found.length ? "пафос (" + found.join(", ") + ")" : "ок"}`);
});

1: ок
2: пафос (уникальн)
3: пафос (эксперт, опытн)
4: ок

const readme = `# Трекер привычек

## Что это
Приложение для отметки привычек и подсчёта серии дней.

## Стек
JavaScript, HTML, CSS, localStorage.

## Запуск
Откройте index.html в браузере.

## Что дальше
Редактирование привычек и тёмная тема.`;

const required = ["Что это", "Стек", "Запуск", "Скриншот", "Что дальше"];

// проверьте каждый раздел через includes("## " + name)

✓ Что это
✓ Стек
✓ Запуск
✗ Скриншот
✓ Что дальше
Готово: 4 из 5

README как портфолио

Для junior без опыта README и есть витрина проекта. Рекрутер открывает репозиторий на 30 секунд: ему должно быть сразу понятно, что это, как выглядит и как запустить. Минимальный шаблон:

# Название проекта

Одно предложение: что это и для кого.

[Демо](ссылка) · [Код](ссылка)

![Скриншот](screenshot.png)

## Что умеет
- добавление и удаление записей
- фильтры и поиск
- данные сохраняются после перезагрузки

## Стек
JavaScript (ES6+), HTML, CSS, Vite, Open-Meteo API

## Запуск
npm install
npm run dev

## Чему научился
Коротко, своими словами: что было сложно и как решил.

## Что дальше
- тёмная тема
- тесты на основные функции

Раздел «Чему научился» пишите сами, без ИИ: именно он показывает, что вы понимаете проект. Закрепите на профиле два-три лучших проекта с таким README и со скриншотами; остальное можно оставить, но не закреплять.

Где искать стажировку

Никто не гарантирует вам место, и это нормально. Ниже — направления, где обычно ищут первый опыт. Конкретных компаний мы не обещаем: рынок меняется, проверяйте актуальность сами.

Здравствуйте, [Имя]!

Меня зовут Мадина, я junior frontend: закончила курс «Frontend + ИИ»
(JavaScript, DOM, fetch, Git). Ищу стажировку, готова выполнить тестовое задание.

Мои проекты: [ссылка на портфолио], GitHub: [ссылка].
Если у вас есть возможность взять стажёра или подсказать, куда обратиться,
буду благодарна за ответ.

С уважением,
Мадина, Telegram: @username

07 Личная шпаргалка промптов: соберите свои 10

С первого урока мы учились работать с ИИ как с помощником: он ускоряет, но не думает за вас. Сегодня собираем всё в личную шпаргалку: десять промптов, которые реально помогли вам за курс, переписанные по формуле и готовые к повторному использованию. Это документ, который пригодится и на работе: через год вы откроете его и сэкономите час.

Формула промпта (правило курса №4)

Правила работы с ИИ: без них шпаргалка не работает

1. Сначала пробуешь сам 15 минут, только потом промпт.
2. Не вставляешь код, который не можешь объяснить строчку за строчкой.
3. Всегда просишь объяснение, а не только код.
4. Имена переменных, крайние случаи и логику проверяешь руками.
5. На контрольных (уроки 6 и 18) ИИ выключен полностью.

Библиотека промптов курса: 26 шаблонов по модулям

Это общая библиотека, которая собиралась по ходу курса. Для каждой ситуации указано, что проверить в ответе: без проверки промпт не закончен. Квадратные скобки […] — места, куда вы подставляете своё.

Чего не делать

Как собрать свои 10 промптов

1. Вспомните десять ситуаций, где ИИ реально помог (или, наоборот, подвёл, и вы поняли, как надо писать). Откройте историю чатов, библиотеку выше и домашние задания.
2. Для каждой напишите шаблон по формуле: все пять элементов, с метками «Контекст:», «Задача:», «Ограничения:», «Формат ответа:», «Проверка:».
3. Запишите пометку «чему верить после проверки»: что вы проверяете в ответе руками.
4. Оцените 1–5, насколько промпт помог. Тройки и двойки не прячьте: именно их стоит переписать.
5. Сохраните в удобный документ (Google Docs, Notion, файл prompts.md в репозитории) и сдайте преподавателю.

Ниже — таблица-шаблон для вашей шпаргалки. Скопируйте её в свой документ и заполните:

function buildPrompt({ context, task, limits, format, check }) {
  // верните пять строк с метками, склеенных через "\n"
}

console.log(buildPrompt({
  context: "Я пишу на чистом JavaScript без библиотек, уровень — новичок",
  task: "Напиши обёртку над fetch с базовым URL и таймаутом",
  limits: "Без внешних библиотек, только ES6",
  format: "Сначала код, потом 3 строки объяснения",
  check: "Назови 2 случая, где код сломается",
}));

Контекст: Я пишу на чистом JavaScript без библиотек, уровень — новичок
Задача: Напиши обёртку над fetch с базовым URL и таймаутом
Ограничения: Без внешних библиотек, только ES6
Формат ответа: Сначала код, потом 3 строки объяснения
Проверка: Назови 2 случая, где код сломается

const LABELS = ["Контекст", "Задача", "Ограничения", "Формат ответа", "Проверка"];

function missing(text) {
  // верните названия из LABELS, для которых в тексте нет "название:"
}

const prompts = [
  "сделай калькулятор",
  "Контекст: новичок. Задача: калькулятор. Ограничения: без библиотек.",
  "Контекст: новичок. Задача: калькулятор. Ограничения: ES6. Формат ответа: код. Проверка: 2 бага.",
];

prompts.forEach((p, i) => {
  const lost = missing(p);
  console.log(`${i + 1}: ${lost.length ? "не хватает: " + lost.join(", ") : "полный"}`);
});

1: не хватает: Контекст, Задача, Ограничения, Формат ответа, Проверка
2: не хватает: Формат ответа, Проверка
3: полный

const LABELS = ["Контекст:", "Задача:", "Ограничения:", "Формат ответа:", "Проверка:"];

const myPrompts = [
  {
    task: "Объяснить, почему код ведёт себя странно",
    prompt: `Контекст: я новичок, пишу на чистом JavaScript, учебный проект.
Задача: объясни построчно, что делает этот код: [код].
Ограничения: не переписывай код, только объясни.
Формат ответа: нумерованный список по строкам кода.
Проверка: назови одну строку, где новичок чаще всего ошибается.`,
    helped: 4,
  },
  // 2–10: скопируйте блок выше и заполните своими данными
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
  { task: "", prompt: "", helped: 0 },
];

function problems(item) {
  const list = [];
  if (item.task.trim().length < 5) list.push("не указана задача");
  const lost = LABELS.filter((label) => !item.prompt.includes(label));
  if (lost.length) list.push("нет: " + lost.join(" "));
  if (!(item.helped >= 1 && item.helped <= 5)) list.push("оценка должна быть от 1 до 5");
  return list;
}

let ok = 0;
myPrompts.forEach((item, i) => {
  const list = problems(item);
  if (list.length === 0) ok++;
  console.log(`${i + 1}: ${list.length ? list.join("; ") : "ок"}`);
});
console.log(`Готово: ${ok} из ${myPrompts.length}`);

1: ок
2: ок
3: ок
4: ок
5: ок
6: ок
7: ок
8: ок
9: ок
10: ок
Готово: 10 из 10

08 Практика на уроке: защиты и обратная связь

Основное время занятия — защиты финальных проектов. Если группа большая, они займут весь урок: тогда карьерный блок и шпаргалка промптов делаются дома (и входят в ДЗ).

1. 0–5 мин · Организация. Преподаватель называет порядок защит. Откройте свой проект по публичной ссылке и убедитесь, что он загружается.
2. 5–70 мин · Защиты. По 5 минут на проект и минуту на смену выступающего. Остальные слушают и заполняют листок: два плюса, один риск, один вопрос по каждому проекту.
3. 70–85 мин · Разбор. Преподаватель называет общие находки и частые ошибки: что получилось у многих, что чаще всего ломается. Каждый получает обратную связь по своему проекту.
4. 85–90 мин · Итоги. Что дальше: дорожная карта к Уровню 3 (React Pro + Next.js), сроки сдачи шпаргалки и ссылок.

09 Домашнее задание

Домашнее задание урока 21: прислать ссылку на задеплоенный проект и подготовить защиту на 5 минут, а затем довести до конца портфолио и личную шпаргалку.

Что нужно сделать

• ☐ Прислать ссылку на задеплоенный проект и ссылку на репозиторий (до защиты).
• ☐ Подготовить защиту на 5 минут по разделу 05: сценарий демо, запасной скриншот, ответы на 12 вопросов хотя бы вслух перед зеркалом.
• ☐ Пройти итоговый самотест (раздел 04): решены все 16 задач; те, что не получились, перечитаны по ссылкам на уроки.
• ☐ Заполнить личную шпаргалку из 10 промптов (раздел 07) и сдать документ.
• ☐ Обновить GitHub-профиль по чек-листу из раздела 06: закреплённые репозитории, README профиля.
• ☐ Написать резюме на одну страницу в PDF и портфолио-README лучшего проекта. Все формулировки честные.
• ☐ Составить список из 10 мест для отклика (каналы, компании, люди) и отправить минимум три письма.

Что сдать

В чат группы (Telegram): ссылка на проект, ссылка на репозиторий, ссылка или файл с личной шпаргалкой, ссылка на ваш GitHub-профиль и резюме в PDF. Одним сообщением, с подписью вашего имени.

Как оценивается ДЗ (0–10)

Это оценка за домашнее задание урока (0–10). Оценка за финальный проект (0–100, 30% итога) выставляется по таблице из раздела 02 и учитывается отдельно.