# Markdown як альтернатива PowerPoint для дисциплін з програмування > **Теза для доповіді:** Для дисциплін, де вивчається програмування, формат `.md` є практичнішим, швидшим у створенні і більш корисним для студентів, ніж традиційний `.pptx`. --- ## Чому PPTX — не найкращий вибір для IT-дисциплін PowerPoint чудово підходить для багатьох предметів. Але коли предмет — це **програмування**, виникають специфічні проблеми: | Проблема | Наслідок | |----------|----------| | Код у слайдах — це скриншот або некрасивий текст | Студент не може скопіювати, перевірити, запустити | | Слайди не відкриваються без MS Office / Google | Залежність від платформи | | Оновити приклад коду — це перемальовувати слайд | Висока вартість підтримки | | Студент отримує `.pptx` — не може шукати по тексту | Погана навігація | | Немає підсвічування синтаксису | Код важко читати | --- ## Що таке Markdown і чому він вирішує ці проблеми Markdown — це простий текстовий формат розмітки. Файл `.md` — це звичайний текст, який рендериться у красиво оформлений документ. **Підтримується скрізь:** - GitHub, GitLab — автоматичний рендер - VS Code — вбудований превʼю (`Ctrl+Shift+V`) - Obsidian, Notion, Typora — редактори з live preview - Будь-який текстовий редактор — читається "сирим" --- ## Порівняння: PPTX vs MD для навчального матеріалу ### PPTX — слайд з кодом ``` [Скриншот тексту в рамці, шрифт Courier New, без підсвічування, текст не виділяється] ``` ### MD — той самий матеріал **Властивість `position: absolute`** Елемент виходить з потоку і прив'язується до найближчого позиціонованого батька: ```css .parent { position: relative; /* обов'язково! */ } .child { position: absolute; top: 0; right: 0; /* правий верхній кут батька */ } ``` > ⚠️ Якщо батько має `position: static` — елемент прив'яжеться до `` --- ## Що вміє Markdown — за 5 хвилин Ось повний набір синтаксису, який використовується найчастіше: # Заголовок першого рівня ## Заголовок другого рівня Звичайний абзац. **Жирний**, *курсив*, `inline код`. - Маркований список - Ще пункт 1. Нумерований список 2. Другий пункт > Цитата або важлива нотатка ```css /* Блок коду з підсвічуванням синтаксису */ .box { position: relative; } ``` | Колонка 1 | Колонка 2 | |-----------|-----------| | Значення | Опис | [Посилання](https://developer.mozilla.org) > 💡 Блоки коду позначаються трьома зворотними лапками ` ``` ` з назвою мови після них: ` ```css `, ` ```js `, ` ```bash ` тощо. --- ## Реальні переваги для викладача IT ### 1. Швидкість створення матеріалу PPTX: налаштувати слайд → вставити код → зробити скриншот або форматувати вручну → вирівняти → зберегти → 15+ хвилин на слайд з кодом. MD: написати текст + вставити код у три зворотні лапки → **2 хвилини**. ### 2. Легкість оновлення Змінився синтаксис? Нова версія фреймворку? Відкрив файл у будь-якому редакторі — виправив рядок — зберіг. Без PowerPoint, без переоформлення. ### 3. Студент отримує живий матеріал - Копіює код напряму з файлу - Шукає по тексту (`Ctrl+F`) - Відкриває у VS Code поруч зі своїм проєктом - Зберігає у власному репозиторії на GitHub ### 4. Природна інтеграція з GitHub Навчальні матеріали можна зберігати у репозиторії. Студенти роблять `git clone` — і мають всі матеріали локально. README.md курсу стає точкою входу. ``` course-web-technologies/ ├── README.md ← зміст курсу ├── 01-html-basics/ │ ├── lesson.md │ └── lab.md ├── 02-css-selectors/ │ ├── lesson.md │ └── cheatsheet.md ├── 05-css-positioning/ │ ├── lesson.md │ ├── cheatsheet.md │ └── lab.md ``` --- ## README.md — окремий корисний навик ШІ допомагає генерувати `README.md` для студентських проєктів. Це корисно одразу з кількох причин: **Для студента:** - Навчається документувати свій код — важливий навик для роботодавця - Репозиторій виглядає професійно - Є що показати на співбесіді **Промпт для генерації README:** ``` Згенеруй README.md для студентського проєкту. Стек: React, Node.js, MongoDB. Проєкт: інтернет-магазин з авторизацією. Включи: опис, стек, інструкцію запуску, скриншоти (заглушки), автора. ``` **Результат за 30 секунд** — готовий файл приблизно такої структури: # 🛒 TechShop — Інтернет-магазин Навчальний проєкт: повноцінний e-commerce з авторизацією, каталогом товарів та кошиком. ## Стек - **Frontend:** React 18, React Router, TanStack Query - **Backend:** Node.js, Express - **База даних:** MongoDB, Mongoose - **Автентифікація:** JWT ## Запуск ```bash git clone https://github.com/student/techshop cd techshop && npm install npm run dev ``` ## Автор Іван Петренко, група КН-21 --- ## Коли PPTX все ж краще Чесна відповідь: не для всього підходить MD. | Використовуй MD | Використовуй PPTX | |-----------------|-------------------| | Лекційний матеріал з кодом | Презентація для батьків/адміністрації | | Шпаргалки та довідники | Захист проєкту перед комісією | | Лабораторні роботи | Матеріал зі схемами та діаграмами | | README для репозиторіїв | Інфографіка, ілюстративні слайди | | Конспекти і нотатки | Публічний виступ з великим екраном | --- ## Як почати — для тих хто ніколи не використовував MD 1. Відкрити VS Code (він вже є у більшості IT-викладачів) 2. Створити файл `lesson.md` 3. Натиснути `Ctrl+Shift+V` — відкриється preview 4. Писати звичайний текст, додаючи `#` для заголовків і ` ``` ` для коду **Або одразу попросити ШІ:** ``` Створи навчальний матеріал у форматі Markdown на тему "CSS Flexbox" для початківців. Включи: теорію, приклади коду, таблицю властивостей, типові помилки. ``` За 30 секунд — готовий матеріал, який залишається лише перевірити і доповнити. --- *Тернопільський фаховий коледж ТНТУ ім. Івана Пулюя* *Методичне об'єднання викладачів комп'ютерних дисциплін, 2026*