КО КОД ОПОРУ IT/AI School for Veterans of Ukraine
УКР ENG
Lesson 01
КОД ОПОРУ · Hybrid IT/AI School for Veterans of Ukraine

AI in Practice: your first website, app and content

A practical classroom course and textbook for Ukrainian veterans who are new to IT and have no prior coding experience. Together with a teacher in class and at home, you will explore how the internet and modern AI tools work and build three finished digital projects.

Explore All 33 Lessons Interactive Student Works Sponsor Proposal ($37,377)
10 Participants
Pilot cohort: 10 equipped classroom workstations, 1 teacher and 1 manager.
10 Parts · 33 Lessons
12 weeks of classes (24 sessions × 3 hrs = 72 hours of practice) + prep & showcase.
3 Portfolio Projects
Personal website on GitHub Pages, “My Day” offline PWA app, and media content pack.
3 AI Tool Families
ChatGPT / Codex, Claude / Claude Code, and Gemini / Antigravity on real tasks.
Обкладинка книги КОД ОПОРУ: ШІ на практиці

КОД ОПОРУ: AI in Practice (UA)

Complete student textbook in Ukrainian: 33 lessons, visual diagrams, annotated screenshots, self-tests with answer key, and glossary.

  • Length & format208 pages, A5
  • Diagrams & screens38 diagrams · 34 screens
  • Verified sources128 links (30 Oct 2026)
Cover of КОД ОПОРУ: AI in Practice (English Edition)

КОД ОПОРУ: AI in Practice

Complete English edition for international partners, sponsors, and learners studying IT and technical terminology in English.

  • Length & format201 pages, A5
  • Code examplesExamples_EN.zip
  • Edition date30.10.2026
Посібник викладача: Сценарії 33 занять

33 Lesson Scenarios (Teacher Guide)

Minute-by-minute lesson plans with teacher prompts, live classroom demonstrations, common troubleshooting steps, and grading rubrics.

  • Guide length148 pages, A4
  • CoverageL01 – L33
  • Class formatClassroom + online
33 навчальні презентації PowerPoint

33 Classroom Slide Decks (560 slides)

Ready-to-teach 16:9 PowerPoint decks for the 55″ classroom screen: 15–18 slides per lesson in the textbook’s warm visual system.

  • Files included33 PPTX (L01–L33)
  • Total slides560 slides 16:9
  • Student examplesExamples_UA.zip
PILOT GOAL: 10 PORTFOLIOS (3 FINISHED WORKS PER PARTICIPANT)

What students actually build: try the live learning examples

In the book, all three projects follow our fictional learner Olena. First, students reproduce the verified example in class, then build their own version and perform an independent live edit during the final review.

Open Full Works Studio

A personal website introducing your skills and projects

In Lessons 11–14, the student plans three sections (“About me”, “Projects”, “Contact”), prompts AI to generate clean index.html and styles.css without heavy frameworks, verifies contrast and mobile wrapping, and publishes the page on GitHub Pages.

  • Lesson 11: short introduction and 3 project cards without exposing private personal data.
  • Lesson 12: proper index.html filename and linked styles.css stylesheet.
  • Lesson 13: responsive verification at 960 px and 360 px, plus visible keyboard focus outline.
  • Lesson 14: free deployment via GitHub → Settings → Pages without buying a domain.
https://olena-demo.github.io/personal-site/
About me Projects Contact

Olena

I enjoy books, walking and organising the home. I am learning to turn small ideas into finished projects.

About me

This page collects my first digital projects. I am starting with a clear web page, three daily tasks and a short video.

Projects

  • Personal website

    A place to introduce my interests and learning projects.

  • My Day

    A list of three tasks with a completed-task counter.

  • A tidy desk

    A planned 30–45 second video about preparing a workspace.

Contact: [email protected] (practice address)
360 px · Narrow mobile check (Lesson 13)
Mobile 360px preview
personal-site/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Olena: my small projects">
  <title>Olena: my small projects</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page">
  <header><nav aria-label="Page sections">
    <a href="#about">About me</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav></header>
  <main>
    <h1>Olena</h1>
    <p class="intro">I enjoy books, walking and organising the home. I am learning to turn small ideas into finished projects.</p>
    <section id="about">
      <h2>About me</h2>
      <p>This page collects my first digital projects. I am starting with a clear web page, three daily tasks and a short video.</p>
    </section>
    <section id="projects">
      <h2>Projects</h2>
      <ul class="projects">
      <li><h3>Personal website</h3><p>A place to introduce my interests and learning projects.</p></li>
      <li><h3>My Day</h3><p>A list of three tasks with a completed-task counter.</p></li>
      <li><h3>A tidy desk</h3><p>A planned 30–45 second video about preparing a workspace.</p></li>
      </ul>
    </section>
    <section id="contact" class="contact">
      <h2>Contact</h2>
      <p><a href="mailto:[email protected]">Email Olena</a></p>
      <p>Practice address: [email protected]. Replace it with your own or remove the link before publishing.</p>
    </section>
  </main>
  <footer>A fictional learning example. Replace the text with your own details.</footer>
</div>
</body>
</html>
personal-site/styles.css
* { box-sizing: border-box; }
:root { color-scheme: light; }
body { margin: 0; color: #20362f; background: #fff;
  font: 18px/1.65 "Segoe UI", sans-serif; }
.page { width: min(100% - 40px, 860px); margin: auto; }
header { padding: 24px 0; border-bottom: 1px solid #ccd8d1; }
nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
a { color: #174f87; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #174f87; outline-offset: 5px;
}
main { padding: 36px 0 20px; }
h1 { font: 700 clamp(36px, 6vw, 56px)/1.1 Georgia, serif;
  margin: 0 0 20px; letter-spacing: -1px; }
h2 { font-size: 26px; margin: 0 0 12px; }
h3 { font-size: 21px; margin: 0 0 4px; }
p { max-width: 65ch; margin: 0 0 16px; }
.intro { max-width: 620px; font-size: 21px; }
section { padding: 26px 0; scroll-margin-top: 16px; }
.projects { padding: 0; list-style: none; }
.projects li { padding: 18px 0; border-top: 1px solid #ccd8d1; }
.projects p { margin-bottom: 0; }
.contact { background: #edf5ef; padding: 22px; }
footer { color: #52645d; font-size: 15px; padding: 24px 0; }
@media (max-width: 480px) {
  .page { width: calc(100% - 32px); }
  main { padding-top: 28px; }
}

“My Day” Web Application (installable & offline-capable PWA)

In Lessons 15–18, students move from static pages to interactive applications: building a 3-task checklist, wiring live state in JavaScript (app.js), saving choices in localStorage, and adding manifest.webmanifest and a Service Worker (sw.js) so the app works offline.

  • Try it live on the right: tick the checkboxes and watch “Completed X of 3” update immediately.
  • Refresh your browser page — your ticked tasks remain saved in localStorage.
  • The “Start a new day” button resets the list intentionally rather than wiping tasks automatically at midnight.

My Day

Three small tasks for today.

Completed 0 of 3

Use the button to start a new day. Tasks do not reset at midnight.

Ready to work offline (Service Worker · sw.js).

Media Content Package for YouTube, Instagram and TikTok

In Lessons 19–28, participants master practical media creation without expensive studio gear: scripting a 40-second video (8 + 22 + 10 = 40 seconds), editing with subtitles in Clipchamp, designing a 5-slide 1080×1080 Instagram carousel, and recording a vertical TikTok clip with safe caption margins.

5-Slide Instagram Carousel (Lesson 24 · 1080×1080 PNG) 01 / 05
Slide 1
caption.txt (Instagram)

Three simple actions: remove extras, keep the essentials, and group small items together. I started with space for a book. Which area would you start with?

tiktok-script.txt (Lesson 27 · 32 seconds)
Room for a book

0–4 s
A hand holds a book above a crowded desk
Where can this book go on a crowded desk?
No room?

4–14 s
Extra objects move into a box
First, I remove what I am not using now.
Remove extras

14–24 s
The book and pen remain in the centre
I keep what I need for reading. Small things go at the side.
Keep essentials

24–32 s
Olena opens the book in the clear space
Now I can begin. Which small area would you clear?
Ready to read
COMPLETE BOOK & COURSE STRUCTURE: 10 PARTS · 33 LESSONS

From how the internet works to your own website, app and AI assistants

Each part of the book opens with an original studio illustration, “You will learn” outcomes, and step-by-step lesson notes. Click any lesson below to open the complete chapter with diagrams, AI prompts, and self-test.

Search & Filter All 33 Lessons
PART 03 (LESSONS 06–08) & PART 10 (WORKSHOPS 29–32)

Three AI tool families: side-by-side practice and verification

The course does not lock learners into a single vendor. Participants practice with three major ecosystems, learning to provide clear context, verify claims, and supervise coding assistants in a local project folder.

LESSONS 06 & 30 · OPENAI

ChatGPT та Codex

Plain-language explanations, generating the first webpage draft, analysing CSV tables in a local Codex folder, custom skills ($skill-creator) and session slash commands.

OpenAI Codex working folder and CSV analysis
/status /plan /goal /review /mcp $skill-creator
LESSONS 07 & 31 · ANTHROPIC

Claude та Claude Code

Clear text editing, working with a local app folder in Claude Code, live Preview window, line-by-line Diff inspection, and persistent project instructions in CLAUDE.md.

Claude Code diff view
CLAUDE.md Preview Diff /status /plan /review
LESSONS 08 & 32 · GOOGLE

Gemini та Antigravity

Searching your own Google Workspace files, saving reusable instructions in Gems, working in a local folder with Antigravity App, live browser verification, and Walkthrough reports.

Google Antigravity App Walkthrough and Review
/plan /grill-me /goal /browser /plugin /learn
4-MONTH PILOT ORGANIZATION & TRANSPARENT ESTIMATE (01 NOV 2026)

How the 10-veteran classroom works and what the $37,377.24 budget covers

Participation is 100% free for Ukrainian veterans. All 10 classroom workstations are fully equipped and backed by a 5.12 kWh power system, primary and backup internet, and a verified shelter route.

Open 20 Slides & Budget Calculator

4-Month Pilot Launch Schedule (16 Weeks)

Stage Duration Stage Deliverable
1. Preparation 2 weeks Recruiting 10 participants, procuring workstations, and preparing the classroom (Kharkiv).
2. Classes 12 weeks 24 hands-on classroom sessions (twice a week × 3 hours = 72 hours total).
3. Portfolio Defense 1 week Showcasing the website, app, and content package + independent live edit.
4. Reporting 1 week Financial report for sponsors and evaluation of completed student portfolios.

Pilot team: 1 manager (recruitment, procurement, reporting) and 1 teacher (instruction, mentoring, portfolio review). Participants without a home PC complete extra practice in the classroom.

Summary 4-Month Budget (verified 01 Nov 2026)

Funding Category (32 items B01–B32) Amount, USD
Equipment & setup (10 student PCs, 2 staff PCs, 55″ display, 5.12 kWh backup power) $14,280.00
Team & premises for 4 months (manager, teacher, rent, utilities, dual internet) $12,960.00
AI, services & cloud (11 ChatGPT Plus, 11 Claude Pro, 11 Google AI Pro, 12 Workspace, VPS) $3,258.76
Licenses & publishing (12 Windows 11 Home FPP, Apple Developer, Google Play, test phones) $2,780.00
20% foreign payment tax allowance ($700.55) & 10% contingency ($3,397.93) $4,098.48
Total Pilot Requirement ($3,737.72 per student) $37,377.24

КОД ОПОРУ (Shionika Academy) — Frequently Asked Questions

Who is the КОД ОПОРУ IT/AI course designed for?

The program is created for Ukrainian veterans and adults starting in IT with zero prior coding experience. Classes combine in-person studio practice (10 equipped workstations) with a 208-page printed and digital textbook.

What real projects do students build during the 33 lessons?

Every participant builds a 3-project portfolio: (1) a personal responsive website on GitHub Pages (Lessons 11–14), (2) the “My Day” offline-capable PWA web application with localStorage and Service Worker (Lessons 15–18), and (3) a media content package for YouTube, Instagram, and TikTok (Lessons 19–28).

How is the $37,377.24 4-month pilot budget structured?

Verified as of 01.11.2026: Classroom equipment & setup ($14,280), Team & premises for 4 months ($12,960), Named AI & cloud subscriptions ($3,258.76), Windows 11 FPP & store licenses ($2,780), plus foreign tax allowance and 10% contingency ($4,098.48), totaling $37,377.24 ($3,737.72 per student).