Loading...
Community presentation
Slide 1 — Git & GitHub Git & GitHub From “It worked yesterday” to “We can go back.” Small footer: Introduction to Version Control & Collaboration Keep this extremely clean. No d…
Create your own version
Use this visual direction as inspiration for a new Presenton deck.
Use this designCreator prompt
Slide 1 — Git & GitHub Git & GitHub From “It worked yesterday” to “We can go back.” Small footer: Introduction to Version Control & Collaboration Keep this extremely clean. No definitions yet. Slide 2 — A Problem You've Already Faced This is where I'd start the actual teaching. Imagine this... You have: assignment_final.html assignment_final2.html assignment_final_REAL.html assignment_final_REAL2.html assignment_final_USE_THIS.html Then: “Oops... I deleted the version that was working.” Ask the students: What would you do? Let them answer. Then reveal: This is one of the problems Git solves. This is much more relatable than starting with "Git is a distributed version control system..." Slide 3 — What if we could... Use very little text: What if we could... ↩ Go back to an older version 🔍 See what changed between versions 👥 Work together without constantly overwriting each other's work ☁️ Keep our project somewhere safe and access it from anywhere Then: That's where Git comes in. Slide 4 — Git vs GitHub This should be one of the most important slides. Put two large boxes: GIT Tracks your project's history Runs on your computer Records changes Lets you go back Works offline ↓ GITHUB A platform for sharing & collaborating Stores Git repositories online Collaboration Pull Requests Issues Open-source projects At the bottom: Git ≠ GitHub This distinction is extremely important for beginners. Slide 5 — A Simple Analogy Think of Git like a game's Save System START ↓ Save Point 1 ↓ Make changes ↓ Save Point 2 ↓ Make more changes ↓ 💥 Something breaks ↓ Go back to Save Point 2 Then say: Git creates save points for your code. But clarify verbally: "Git is much more powerful than a simple save system." This analogy will stick with them. Slide 6 — How Git Works Don't put commands everywhere. Use a simple flow: Your Files ↓ Working Directory ↓ git add ↓ Staging Area ↓ git commit ↓ Local Repository ↓ git push ↓ GitHub And underneath: Edit → Stage → Commit → Push This is probably the single most important technical diagram in your presentation. Slide 7 — Git in One Picture You can make this more visual. GITHUB ☁️ Remote Repo ↑ PUSH ↑ ┌───────────────┐ COMMIT ┌───────────────┐ │ Your Files │ ───────→ │ Local Git Repo│ └───────────────┘ └───────────────┘ │ EDIT ↓ Your changes Then explain: Git manages the history. GitHub helps you share that history. Slide 8 — Why Linux? Now introduce the history. A little history... 1991 🐧 Linux begins ↓ Linux becomes a huge collaborative project. ↓ Developers need a way to manage changes made by thousands of contributors. ↓ 2005 Git is created by Linus Torvalds and contributors. ↓ Git becomes a major tool for software development. Keep this short. Don't turn this into a Linux history lecture. The purpose is simply to answer: "Why was Git created?" Slide 9 — Git Vocabulary Don't dump 20 commands on them. Only introduce the words they'll hear during the demo. The Git words you'll hear today Word Simple meaning Repository Your project's Git-tracked folder Commit A saved point in your project's history Branch A separate line of development Clone Copy a repository to your computer Push Send your commits to GitHub Pull Get changes from a remote repository Merge Combine changes Pull Request Ask to merge your changes For first-years, don't explain all of these deeply. Some can simply be: "You'll see this later when you start working with Git." Slide 10 — Let's Actually Use It This should transition directly into your live demo. Big text: Enough theory. Let's build something. Then: HTML ↓ Git ↓ GitHub This slide can stay on screen while you switch to the terminal/editor. Live Demo — Don't Put These on Slides This is where I would make your class memorable. Use a tiny HTML project. For example: my-first-website/ └── index.html Start with something ridiculously simple: <h1>Hello, Git!</h1> <p>My first project.</p> Then demonstrate the actual workflow: git init Explain: "I'm telling Git: start tracking this project." Then: git add . Explain staging simply. Then: git commit -m "Initial commit" Explain: "I just created a save point." Then modify the HTML. For example: <h1>Hello, Git!</h1> <p>My first project.</p> <p>I am learning Git.</p> Then: git status Show that Git knows something changed. Then: git add . git commit -m "Add learning message" Now demonstrate the killer moment: Break/delete something. Then: git log Show the history. If appropriate for your setup, demonstrate going back/recovering from an earlier commit. That makes the concept of version control real. Slide 11 — From My Computer → GitHub After the local Git demo, explain: YOUR COMPUTER index.html ↓ Git ↓ commits ↓ ───────── ↓ PUSH ↓ ☁️ GitHub Then demonstrate creating/pushing the repository. You don't need to teach every GitHub feature. Just let them see their project appear on GitHub. That moment is important. Slide 12 — Why Should YOU Learn This? This is the slide I would end with. Git isn't just for experienced developers. You can use it for: 🎓 College projects 👥 Team projects 💼 Internships & jobs 🌎 Open-source contributions 📁 Your personal projects 📈 Building your GitHub profile Then: Start small. Your first repository can be just one HTML file. Final Slide — Remember These 3 Things I'd actually make this the final takeaway rather than ending with "Thank You." If you remember only 3 things... 01 Git tracks changes in your project. 02 GitHub helps you store, share & collaborate. 03 You don't need to be an expert to start. And at the very bottom: Create. Commit. Push. Repeat. Then your Q&A. Follow Design: {"palette":["Blueprint white #FFFFFF — high-clarity technical canvas","Slate ink #0F172A — primary titles, body text, and structural diagram frames","Revision blue #2563EB — vector flow paths, push actions, and primary focus accents","Staging amber #D97706 — staging area states, intermediate steps, and warning highlights","Mist surface #F1F5F9 — alternating table rows, card backings, and directory blocks","Technical border #CBD5E1 — precision grid lines, connectors, and container outlines"],"fonts":{"Archivo":"https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap","Fira Sans":"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap","Fira Code":"https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap"},"type":"Archivo Heavy (800) in tight, authoritative title case for headline impact; Fira Sans Regular (400) and SemiBold (600) for structured lecture bullets and concept definitions; Fira Code (500) for precise terminal instructions, file paths, and syntax callouts.","layout":"Strict modular 8-column engineering grid with fine 1px structural rules; fixed top header ribbon showing lecture phase and topic; left-to-right directional flow mapping the progression from local machine to remote cloud; balanced two-column comparison layouts for Git vs GitHub.","framework_treatment":"Sharp-cornered schematic cards with 1px light gray borders; clear directional node connectors linking Working Directory, Staging, Local Repo, and GitHub; high-contrast split comparison boxes with color-coded top labels; structured clean data tables with monospaced terms on the left and concise plain-language definitions on the right.","feels_like":"An elegant O'Reilly architectural reference sheet adapted into a crystal-clear university lecture"}
Presentation overview
This community presentation was shared by Shamil Salam as a complete 13-slide example. Slide 1 — Git & GitHub Git & GitHub From “It worked yesterday” to “We can go back.” Small footer: Introduction to Version Control & Collaboration Keep this extremely clean. No d… 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.
