Лоиҳаи ниҳоӣ: ҳимоя ва қадамҳои аввал дар касб

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, функсияҳои тирчадор, соҳаи эътибор, closure-ҳо.
• Дарси 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. Лоиҳа чӣ тавр сохта шудааст: кадом файлҳо ва барои чӣ масъуланд?

Нақшҳоро ном баред: маълумот ва дархостҳо, ҳолат, тасвир, коркардкунандаҳои ҳодисаҳо. Агар модулҳо бошанд — кадом файл чиро содир (export) мекунад.

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. Лоиҳа чӣ тавр ҷойгир шудааст ва агар барпоӣ (build) афтад чӣ мешавад?

Дар куҷо деплой шудааст (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 гузошта мешавад ва алоҳида ҳисоб карда мешавад.