Loading...
Community presentation
یک پاورپوینت آموزشی، حرفه‌ای، کلاسیک و کاملاً واضح درباره **DOM در JavaScript** طراحی کن. عنوان اصلی ارائه: **JavaScript DOM — از صفر تا کار با صفحه وب** هدف این ارائه این است ک…
Create your own version
Use this visual direction as inspiration for a new Presenton deck.
Use this designCreator prompt
یک پاورپوینت آموزشی، حرفه‌ای، کلاسیک و کاملاً واضح درباره **DOM در JavaScript** طراحی کن. عنوان اصلی ارائه: **JavaScript DOM — از صفر تا کار با صفحه وب** هدف این ارائه این است که فردی که JavaScript مقدماتی را می‌داند اما هنوز DOM را به‌درستی درک نکرده، بتواند بعد از مشاهده این اسلایدها: - مفهوم DOM را کاملاً بفهمد. - ارتباط HTML، Browser و JavaScript را درک کند. - عناصر HTML را با JavaScript پیدا کند. - محتوا، استایل و Attribute عناصر را تغییر دهد. - عناصر جدید ایجاد یا حذف کند. - با Eventها و Event Listenerها کار کند. - یک پروژه ساده مبتنی بر DOM بسازد. --- # سبک کلی طراحی طراحی باید **آموزشی، کلاسیک، مینیمال، حرفه‌ای و بسیار خوانا** باشد. از طراحی‌های بیش از حد فانتزی، سه‌بعدی، شلوغ، گرادینت‌های شدید یا تصاویر تزئینی بی‌ربط استفاده نکن. فضای ارائه باید شبیه یک دوره آموزشی حرفه‌ای برنامه‌نویسی باشد. ### رنگ‌بندی از یک پالت ساده استفاده کن: - پس‌زمینه اصلی: سفید یا خاکستری بسیار روشن - رنگ اصلی: سرمه‌ای یا آبی تیره - رنگ تأکیدی: آبی روشن - رنگ مخصوص JavaScript: زرد ملایم - کدها: داخل Code Block با پس‌زمینه خاکستری بسیار تیره - متن کد: سفید با Syntax Highlight مناسب ### فونت فونت فارسی خوانا و مدرن. تیترها Bold و واضح باشند. کدهای JavaScript و HTML حتماً با فونت Monospace نمایش داده شوند. ### ساختار هر اسلاید هر اسلاید فقط **یک مفهوم اصلی** را آموزش دهد. متن‌های طولانی و پاراگراف‌های بزرگ ممنوع. برای توضیح مفاهیم از ترکیب موارد زیر استفاده کن: - دیاگرام - فلش - تصویر مرورگر - ساختار درختی - Code Block - Before / After - Callout - Highlight - Step-by-Step Diagram کدهای مهم را خط‌به‌خط Highlight کن. هرجا ممکن است، در سمت چپ کد و در سمت راست نتیجه اجرای آن در Browser نمایش داده شود. --- # اسلاید 1 — Cover عنوان بزرگ: **JavaScript DOM** زیرعنوان: **چطور JavaScript صفحه وب را می‌بیند، تغییر می‌دهد و کنترل می‌کند؟** در پایین: **DOM Manipulation — Step by Step** ### طراحی یک Browser Window ساده نمایش بده که داخل آن چند عنصر HTML وجود دارد. در کنار آن یک قطعه کد JavaScript: ```javascript document.querySelector("h1"); ``` بین JavaScript و Browser یک فلش قرار بده تا مفهوم ارتباط JS با صفحه وب القا شود. اسلاید بسیار خلوت و حرفه‌ای باشد. --- # اسلاید 2 — قبل از DOM چه چیزهایی داریم؟ عنوان: **قبل از DOM چه اتفاقی می‌افتد؟** سه بخش کنار یکدیگر نمایش بده: HTML → Browser → Page مثال: ```html <h1>Hello</h1> <p>Welcome to my website</p> <button>Click Me</button> ``` کنار آن نمای ساده Browser نمایش داده شود: Hello Welcome to my website [ Click Me ] توضیح کوتاه: HTML ساختار صفحه را تعریف می‌کند. Browser فایل HTML را می‌خواند و صفحه را نمایش می‌دهد. اما JavaScript برای تغییر صفحه نیاز دارد به این عناصر دسترسی پیدا کند. در انتهای اسلاید سؤال مطرح شود: **JavaScript چطور به عناصر HTML دسترسی پیدا می‌کند؟** --- # اسلاید 3 — DOM چیست؟ عنوان: **DOM چیست؟** DOM را به صورت کامل بنویس: **Document Object Model** تعریف ساده: DOM یک نمایش ساختاری از صفحه HTML است که Browser می‌سازد تا JavaScript بتواند عناصر صفحه را بخواند، تغییر دهد، حذف کند یا عناصر جدید بسازد. یک دیاگرام: HTML ↓ Browser ↓ DOM ↓ JavaScript تأکید بصری روی جمله: **JavaScript مستقیماً HTML را تغییر نمی‌دهد؛ JavaScript با DOM کار می‌کند.** --- # اسلاید 4 — Browser چگونه HTML را تبدیل به DOM می‌کند؟ عنوان: **از HTML تا DOM Tree** سمت چپ: ```html <html> <body> <h1>Hello</h1> <p>Welcome</p> </body> </html> ``` سمت راست یک Tree Diagram: Document └── html └── body ├── h1 │ └── Hello └── p └── Welcome توضیح: Browser عناصر HTML را به Node تبدیل می‌کند. هر Tag یک Node در DOM Tree است. --- # اسلاید 5 — DOM Tree عنوان: **DOM یک ساختار درختی است** یک DOM Tree بزرگ و گرافیکی نمایش بده. Document ↓ HTML ↓ HEAD + BODY و داخل BODY: HEADER MAIN SECTION BUTTON FOOTER مفاهیم زیر روی Tree مشخص شوند: Parent Child Sibling مثلاً: body = Parent h1 = Child p و button = Sibling --- # اسلاید 6 — Document Object عنوان: **نقطه شروع DOM: document** کد: ```javascript console.log(document); ``` توضیح: Browser یک Object به نام `document` در اختیار JavaScript قرار می‌دهد. این Object نماینده صفحه فعلی است. نمای گرافیکی: JavaScript ↓ document ↓ DOM Tree یک Code Block دیگر: ```javascript document.title document.body document.head ``` --- # اسلاید 7 — انتخاب عناصر HTML عنوان: **چطور یک عنصر را پیدا کنیم؟** چهار روش رایج را در جدول نمایش بده: | Method | کاربرد | |---|---| | getElementById | انتخاب با ID | | querySelector | انتخاب اولین عنصر | | querySelectorAll | انتخاب چند عنصر | | getElementsByClassName | انتخاب با Class | در انتهای اسلاید تأکید کن: در پروژه‌های مدرن معمولاً: ```javascript querySelector() ``` و ```javascript querySelectorAll() ``` بسیار پرکاربرد هستند. --- # اسلاید 8 — getElementById عنوان: **انتخاب عنصر با ID** HTML: ```html <h1 id="title">Hello</h1> ``` JavaScript: ```javascript const title = document.getElementById("title"); ``` یک دیاگرام ایجاد کن: JavaScript `getElementById("title")` ↓ DOM ↓ `<h1 id="title">` ↓ Element توضیح: ID باید بدون `#` نوشته شود. --- # اسلاید 9 — querySelector عنوان: **querySelector()** HTML: ```html <h1 class="title">Hello</h1> ``` JavaScript: ```javascript const title = document.querySelector(".title"); ``` مثال‌های دیگر: ```javascript document.querySelector("#menu"); document.querySelector("button"); document.querySelector(".card"); ``` توضیح بصری: querySelector از CSS Selector استفاده می‌کند. --- # اسلاید 10 — querySelectorAll عنوان: **انتخاب چند عنصر** HTML: ```html <p class="item">HTML</p> <p class="item">CSS</p> <p class="item">JavaScript</p> ``` JavaScript: ```javascript const items = document.querySelectorAll(".item"); ``` نتیجه را به شکل گرافیکی نمایش بده: NodeList 0 → HTML 1 → CSS 2 → JavaScript --- # اسلاید 11 — تمرین کوتاه انتخاب عناصر عنوان: **تمرین: این عناصر را انتخاب کن** HTML: ```html <h1 id="title">My Website</h1> <p class="description"> Learning JavaScript </p> <button class="btn"> Start </button> ``` سؤال‌ها: 1. عنوان را انتخاب کن. 2. Paragraph را انتخاب کن. 3. Button را انتخاب کن. بعد پاسخ‌ها با Animation ظاهر شوند: ```javascript document.querySelector("#title"); document.querySelector(".description"); document.querySelector(".btn"); ``` --- # اسلاید 12 — تغییر متن عنوان: **JavaScript می‌تواند محتوای صفحه را تغییر دهد** HTML: ```html <h1 id="title">Hello</h1> ``` JavaScript: ```javascript const title = document.querySelector("#title"); title.textContent = "Hello JavaScript"; ``` نمای Before / After: Before: Hello After: Hello JavaScript --- # اسلاید 13 — textContent و innerHTML عنوان: **textContent vs innerHTML** دو ستون ایجاد کن. ### textContent ```javascript element.textContent = "Hello"; ``` مناسب برای متن ساده. ### innerHTML ```javascript element.innerHTML = "<strong>Hello</strong>"; ``` می‌تواند HTML اضافه کند. یک Warning کوچک: استفاده از `innerHTML` با داده‌های ورودی کاربر می‌تواند مشکل امنیتی ایجاد کند. --- # اسلاید 14 — تغییر CSS با JavaScript عنوان: **تغییر Style با JavaScript** HTML: ```html <h1 id="title">Hello</h1> ``` JavaScript: ```javascript const title = document.querySelector("#title"); title.style.color = "blue"; title.style.fontSize = "40px"; ``` Before / After گرافیکی نمایش بده. --- # اسلاید 15 — ClassList عنوان: **روش بهتر: تغییر Class** HTML: ```html <h1 id="title">Hello</h1> ``` CSS: ```css .active { color: blue; font-size: 40px; } ``` JavaScript: ```javascript title.classList.add("active"); ``` سپس سه متد مهم: ```javascript classList.add() classList.remove() classList.toggle() ``` به‌صورت سه کارت کوچک نمایش داده شوند. --- # اسلاید 16 — Attribute چیست؟ عنوان: **کار با Attributeها** HTML: ```html <img id="image" src="image1.jpg" alt="Product" /> ``` JavaScript: ```javascript const image = document.querySelector("#image"); image.src = "image2.jpg"; ``` نمای Before / After تصویر ایجاد کن. --- # اسلاید 17 — getAttribute و setAttribute عنوان: **خواندن و تغییر Attribute** کد: ```javascript const link = document.querySelector("a"); link.getAttribute("href"); link.setAttribute( "href", "https://example.com" ); ``` یک دیاگرام ساده: Element ↓ Attribute ↓ Value --- # اسلاید 18 — ساخت عنصر جدید عنوان: **JavaScript می‌تواند Element بسازد** کد مرحله‌به‌مرحله: ```javascript const p = document.createElement("p"); ``` ↓ ```javascript p.textContent = "New paragraph"; ``` ↓ ```javascript document.body.appendChild(p); ``` هر مرحله به شکل شماره‌گذاری شده نمایش داده شود. --- # اسلاید 19 — append و appendChild عنوان: **اضافه کردن Element به صفحه** HTML اولیه: ```html <div id="container"></div> ``` JavaScript: ```javascript const container = document.querySelector("#container"); const p = document.createElement("p"); p.textContent = "Hello DOM"; container.appendChild(p); ``` بعد ساختار جدید DOM را نشان بده: container └── p └── Hello DOM --- # اسلاید 20 — حذف Element عنوان: **حذف عناصر از DOM** HTML: ```html <p id="message">Hello</p> ``` JavaScript: ```javascript const message = document.querySelector("#message"); message.remove(); ``` با یک Animation یا Before / After نشان بده که عنصر از Browser و DOM Tree حذف می‌شود. --- # اسلاید 21 — Event چیست؟ عنوان: **صفحه باید به کاربر واکنش نشان دهد** مثال‌هایی از Event: Mouse Click Keyboard Input Form Submit Mouse Move Page Load نمایش گرافیکی: USER ↓ ACTION ↓ EVENT ↓ JAVASCRIPT ↓ PAGE CHANGE --- # اسلاید 22 — addEventListener عنوان: **گوش دادن به Event** HTML: ```html <button id="btn"> Click Me </button> ``` JavaScript: ```javascript const btn = document.querySelector("#btn"); btn.addEventListener("click", function () { console.log("Clicked!"); }); ``` کد را مرحله‌به‌مرحله توضیح بده. Element ↓ Event ↓ Function --- # اسلاید 23 — اولین مثال تعاملی عنوان: **با کلیک، متن را تغییر بده** HTML: ```html <h1 id="title">Hello</h1> <button id="btn"> Change Text </button> ``` JavaScript: ```javascript const title = document.querySelector("#title"); const btn = document.querySelector("#btn"); btn.addEventListener("click", function () { title.textContent = "Hello JavaScript"; }); ``` در سمت راست شبیه‌سازی Browser: قبل از Click: Hello [Change Text] بعد از Click: Hello JavaScript [Change Text] --- # اسلاید 24 — Event Object عنوان: **Event اطلاعات خودش را همراه دارد** کد: ```javascript button.addEventListener("click", function (event) { console.log(event); }); ``` سپس: ```javascript event.target ``` را Highlight کن. توضیح: `event.target` مشخص می‌کند Event روی کدام Element اتفاق افتاده است. --- # اسلاید 25 — Input Event عنوان: **خواندن مقدار Input** HTML: ```html <input id="name" type="text"> ``` JavaScript: ```javascript const input = document.querySelector("#name"); input.addEventListener("input", function () { console.log(input.value); }); ``` سمت راست یک Input نمایشی با عبارت: Fatemeh و Console: Fatemeh --- # اسلاید 26 — Form Submit عنوان: **کنترل Form با JavaScript** HTML: ```html <form id="form"> <input id="name"> <button> Submit </button> </form> ``` JavaScript: ```javascript form.addEventListener("submit", function (event) { event.preventDefault(); }); ``` توضیح: Browser به‌صورت پیش‌فرض بعد از Submit رفتار خودش را اجرا می‌کند. `preventDefault()` جلوی این رفتار را می‌گیرد. --- # اسلاید 27 — DOM Traversal عنوان: **حرکت بین عناصر DOM** HTML: ```html <div class="card"> <h2>Product</h2> <p>Description</p> </div> ``` متدهای مهم: ```javascript parentElement children firstElementChild nextElementSibling previousElementSibling ``` این روابط را روی DOM Tree با فلش نمایش بده. --- # اسلاید 28 — یک مثال واقعی عنوان: **ساخت Counter ساده** Browser UI: [-] 0 [+] HTML: ```html <button id="minus">-</button> <span id="count">0</span> <button id="plus">+</button> ``` JavaScript را در اسلاید بعدی تکمیل خواهیم کرد. هدف این اسلاید فقط معرفی مسئله باشد. --- # اسلاید 29 — ساخت Counter با DOM عنوان: **Counter — JavaScript** کد: ```javascript let count = 0; const countElement = document.querySelector("#count"); const plus = document.querySelector("#plus"); const minus = document.querySelector("#minus"); ``` توضیح: ابتدا State و Elementهای موردنیاز را مشخص می‌کنیم. --- # اسلاید 30 — اضافه کردن Event به Counter عنوان: **Counter — Eventها** کد: ```javascript plus.addEventListener("click", function () { count++; countElement.textContent = count; }); ``` و: ```javascript minus.addEventListener("click", function () { count--; countElement.textContent = count; }); ``` سمت راست UI Counter را نمایش بده. --- # اسلاید 31 — پروژه کوچک DOM عنوان: **Mini Project: Todo List** UI ساده: Input: [ Write a task... ] Button: [ Add Task ] لیست: ☐ Learn DOM ☐ Practice JavaScript ☐ Build Project توضیح: کاربر Task وارد می‌کند. JavaScript Element جدید می‌سازد. Task وارد DOM می‌شود. کاربر می‌تواند آن را حذف کند. --- # اسلاید 32 — ساخت Todo مرحله اول عنوان: **Step 1 — گرفتن عناصر** HTML: ```html <input id="taskInput"> <button id="addBtn"> Add </button> <ul id="taskList"></ul> ``` JavaScript: ```javascript const input = document.querySelector("#taskInput"); const button = document.querySelector("#addBtn"); const list = document.querySelector("#taskList"); ``` --- # اسلاید 33 — ساخت Todo مرحله دوم عنوان: **Step 2 — ساخت Task** کد: ```javascript button.addEventListener("click", function () { const li = document.createElement("li"); li.textContent = input.value; list.appendChild(li); }); ``` سمت راست نتیجه Browser را نمایش بده. --- # اسلاید 34 — ساخت Todo مرحله سوم عنوان: **Step 3 — خالی کردن Input** کد: ```javascript input.value = ""; ``` کد کامل‌تر را نمایش بده: ```javascript button.addEventListener("click", function () { const li = document.createElement("li"); li.textContent = input.value; list.appendChild(li); input.value = ""; }); ``` --- # اسلاید 35 — ساخت Todo مرحله چهارم عنوان: **Step 4 — حذف Task** هنگام ساخت Task یک Button هم اضافه کن. ```javascript const deleteBtn = document.createElement("button"); deleteBtn.textContent = "Delete"; ``` Event: ```javascript deleteBtn.addEventListener("click", function () { li.remove(); }); ``` در UI دکمه Delete کنار هر Task نمایش داده شود. --- # اسلاید 36 — جریان کامل DOM Manipulation عنوان: **حالا کل جریان DOM را می‌دانیم** یک Flow Diagram بزرگ ایجاد کن: HTML ↓ DOM Tree ↓ Select Element ↓ Read / Change ↓ Create / Remove ↓ Listen to Events ↓ Update UI در کنار هر مرحله یک نمونه دستور کوچک نمایش بده: ```javascript querySelector() ``` ```javascript textContent ``` ```javascript createElement() ``` ```javascript remove() ``` ```javascript addEventListener() ``` --- # اسلاید 37 — Cheat Sheet عنوان: **DOM Cheat Sheet** در قالب یک جدول حرفه‌ای: Selection: ```javascript querySelector() querySelectorAll() getElementById() ``` Content: ```javascript textContent innerHTML ``` Style: ```javascript style classList ``` Attributes: ```javascript getAttribute() setAttribute() ``` Create: ```javascript createElement() append() appendChild() ``` Remove: ```javascript remove() ``` Events: ```javascript addEventListener() ``` --- # اسلاید 38 — اشتباهات رایج عنوان: **اشتباهات رایج هنگام کار با DOM** موارد زیر را به صورت کارت نمایش بده: 1. استفاده از Selector اشتباه ```javascript querySelector("title") ``` به جای: ```javascript querySelector(".title") ``` 2. اجرای JavaScript قبل از ساخته شدن DOM. 3. فراموش کردن `#` برای ID در querySelector. 4. فراموش کردن `.` برای Class. 5. استفاده بیش از حد از `innerHTML`. 6. اضافه کردن Event Listener به Element اشتباه. --- # اسلاید 39 — تمرین نهایی عنوان: **تمرین نهایی DOM** یک صفحه بساز که شامل موارد زیر باشد: یک Input یک Button یک Paragraph رفتار: کاربر نام خود را وارد کند. روی Button کلیک کند. متن صفحه تبدیل شود به: **Hello, Fatemeh!** مراحل مورد انتظار: 1. Elementها را Select کن. 2. Click Event بساز. 3. مقدار Input را بخوان. 4. Paragraph را تغییر بده. کد پاسخ را در این اسلاید نمایش نده. --- # اسلاید 40 — پاسخ تمرین عنوان: **Solution** HTML: ```html <input id="name"> <button id="btn"> Say Hello </button> <p id="message"></p> ``` JavaScript: ```javascript const input = document.querySelector("#name"); const button = document.querySelector("#btn"); const message = document.querySelector("#message"); button.addEventListener("click", function () { message.textContent = `Hello, ${input.value}!`; }); ``` در سمت راست نتیجه را داخل یک Browser Mockup نمایش بده. --- # اسلاید 41 — جمع‌بندی عنوان: **DOM در یک نگاه** DOM پلی بین: **JavaScript** و **صفحه وب** است. با DOM می‌توانیم: - Element پیدا کنیم. - متن را تغییر دهیم. - Style تغییر دهیم. - Element بسازیم. - Element حذف کنیم. - Event دریافت کنیم. - رابط کاربری تعاملی بسازیم. در مرکز اسلاید این Flow نمایش داده شود: USER → EVENT → JAVASCRIPT → DOM → UI --- # اسلاید 42 — پایان عنوان بزرگ: **Now Build Something.** زیرعنوان: بهترین راه یادگیری DOM، ساختن رابط‌های کوچک و واقعی است. سه پیشنهاد تمرین: **Counter** **Todo List** **Dark Mode Toggle** در پایین اسلاید: **JavaScript DOM Fundamentals** --- # قوانین مهم تولید تمام اسلایدها 1. هیچ اسلایدی نباید متن بسیار طولانی داشته باشد. 2. آموزش باید از ساده به پیچیده حرکت کند. 3. هیچ مفهوم جدیدی بدون مثال معرفی نشود. 4. تقریباً تمام مفاهیم DOM باید همراه با HTML + JavaScript + نتیجه Browser باشند. 5. در اسلایدهای کدنویسی، Code Block باید مهم‌ترین بخش بصری اسلاید باشد. 6. Syntax Highlight واقعی برای HTML، CSS و JavaScript استفاده شود. 7. از Browser Mockup برای نمایش نتیجه کد استفاده شود. 8. DOM Treeها به صورت گرافیکی و واضح رسم شوند. 9. ارتباط بین Parent / Child / Sibling با فلش نشان داده شود. 10. از آیکون‌های ساده برای Browser، JavaScript، User، Event و DOM استفاده شود. 11. از تصاویر استوک برنامه‌نویسی استفاده نکن. 12. تصاویر فقط زمانی استفاده شوند که مفهوم آموزشی را توضیح دهند. 13. از Decorative Illustrationهای بی‌هدف استفاده نکن. 14. در هر اسلاید حداکثر 3 تا 5 نکته اصلی نمایش داده شود. 15. کدهای طولانی به چند اسلاید شکسته شوند. 16. هنگام معرفی پروژه Todo، پروژه مرحله‌به‌مرحله ساخته شود و کد کامل یکباره نمایش داده نشود. 17. هرجا یک تغییر DOM اتفاق می‌افتد از Before / After استفاده شود. 18. اصطلاحات اصلی مانند: DOM Document Element Node Event Selector Attribute Parent Child Sibling به انگلیسی نوشته شوند و توضیح فارسی داشته باشند. 19. Presentation باید برای کلاس آموزشی JavaScript مناسب باشد، نه ارائه مارکتینگ. 20. خروجی نهایی باید حس یک **JavaScript Visual Course** حرفه‌ای، مرتب و قابل تدریس داشته باشد. --- # اصل آموزشی اصلی در کل Presentation این مدل ذهنی دائماً حفظ شود: **Select → Listen → Change** یعنی: اول Element را پیدا می‌کنیم. سپس در صورت نیاز منتظر Event می‌مانیم. بعد DOM را تغییر می‌دهیم. در چند اسلاید مهم این سه مرحله با سه رنگ یا سه باکس ثابت نمایش داده شوند: **1. Select** ```javascript const button = document.querySelector("#btn"); ``` **2. Listen** ```javascript button.addEventListener("click", function () { ``` **3. Change** ```javascript title.textContent = "Hello"; ``` این مدل ذهنی باید در پایان دوره کاملاً در ذهن دانشجو تثبیت شده باشد.
Presentation overview
This community presentation was shared by Tboumpsh as a complete 5-slide example. یک پاورپوینت آموزشی، حرفه‌ای، کلاسیک و کاملاً واضح درباره **DOM در JavaScript** طراحی کن. عنوان اصلی ارائه: **JavaScript DOM — از صفر تا کار با صفحه وب** هدف این ارائه این است ک… The preview lets you review the full sequence in order, rather than judging the design from a single cover image.
Use it as a reference for planning your own deck: notice how the amount of information changes from slide to slide, where visual emphasis appears, and how repeated design choices help the presentation feel connected. Community examples are inspiration, not locked templates, so you can keep the ideas that fit your audience and replace anything that does not.
Learn from the example
Look at the job each slide performs. Identify where the deck introduces its subject, develops the main points, adds evidence or examples, and moves toward a conclusion.
Notice which element attracts attention first and how headings, supporting text, images, and data are separated. Strong hierarchy makes the intended reading order obvious.
Compare spacing, typography, color, and repeated components across the slides. Consistent rules help varied content feel like one presentation instead of unrelated screens.
Make it your own
Begin with your audience and the decision, lesson, or action the presentation should support. Replace the topic, examples, evidence, and visuals with material you can verify, then edit every slide for one clear takeaway. You can borrow the visual direction without copying the creator's wording or message. Presenton will use this community deck as a design reference while you develop content for your own purpose.
