Added git-challenges and presentation
This commit is contained in:
579
Presentatinon_Git_Fundamentals.html
Normal file
579
Presentatinon_Git_Fundamentals.html
Normal file
@@ -0,0 +1,579 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Git Fundamentals - Grade 11 ICT</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.presentation-container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
height: 90vh;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
padding: 15px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.slides-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide {
|
||||
min-width: 100%;
|
||||
padding: 40px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #3498db;
|
||||
margin: 25px 0 15px;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #2c3e50;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-left: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #3498db;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
margin: 15px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.important-note {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.exercise {
|
||||
background: #d1ecf1;
|
||||
border-left: 4px solid #17a2b8;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.lesson-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.lesson-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #bdc3c7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lesson-dot.active {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #ecf0f1;
|
||||
padding: 10px 30px;
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="presentation-container">
|
||||
<div class="header">
|
||||
<div class="logo">Git Fundamentals - Grade 11 ICT</div>
|
||||
<div class="nav-buttons">
|
||||
<button class="nav-btn" id="prev-btn">Previous</button>
|
||||
<button class="nav-btn" id="next-btn">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slides-container">
|
||||
<div class="slides" id="slides">
|
||||
<!-- Lesson 1 Slides -->
|
||||
<div class="slide">
|
||||
<h1>Lesson 1: Introduction to Git</h1>
|
||||
<h2>Learning Outcomes</h2>
|
||||
<ul>
|
||||
<li>Understand what Git is and why it's important for developers</li>
|
||||
<li>Install Git on your computer</li>
|
||||
<li>Configure Git with your user credentials</li>
|
||||
<li>Understand the basic Git workflow</li>
|
||||
</ul>
|
||||
|
||||
<h2>Why Git Matters</h2>
|
||||
<div class="card">
|
||||
<p>Git is the most widely used version control system in the world. It allows developers to:</p>
|
||||
<ul>
|
||||
<li>Track changes to code over time</li>
|
||||
<li>Collaborate with other developers on the same project</li>
|
||||
<li>Revert to previous versions if something goes wrong</li>
|
||||
<li>Work on different features simultaneously without conflicts</li>
|
||||
</ul>
|
||||
<p>Understanding Git is essential for any software development career!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Git Introduction Video</h1>
|
||||
<div class="video-container">
|
||||
<iframe src="https://youtu.be/jUlT-zQ-mbk?si=RKxp1eHbaPIEIrYv" allowfullscreen></iframe>
|
||||
</div>
|
||||
<p class="important-note">
|
||||
<strong>Note:</strong> We're using a general Git introduction video here. The original link was to a text tutorial, but a video is more engaging for a presentation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Setting Up Git</h1>
|
||||
<h2>Installation Instructions</h2>
|
||||
|
||||
<h3>Windows/Mac</h3>
|
||||
<ul>
|
||||
<li>Visit <a href="https://git-scm.com/" target="_blank">git-scm.com</a></li>
|
||||
<li>Download the latest version for your operating system</li>
|
||||
<li>Run the installer with default settings</li>
|
||||
</ul>
|
||||
|
||||
<h3>Chrome OS (2020+ devices)</h3>
|
||||
<ul>
|
||||
<li>Go to the Launcher</li>
|
||||
<li>Search for "Linux" and click "Turn on"</li>
|
||||
<li>Git is included in the Linux environment</li>
|
||||
</ul>
|
||||
|
||||
<h3>Older Chrome OS devices</h3>
|
||||
<ul>
|
||||
<li>Install Termux from the Google Play Store</li>
|
||||
<li>Open Termux and enter: <code>pkg install git</code></li>
|
||||
<li>Type <code>y</code> when prompted to confirm installation</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Configuring Git</h1>
|
||||
<h2>Setting Your Credentials</h2>
|
||||
|
||||
<p>After installing Git, you need to configure your username and email address:</p>
|
||||
|
||||
<div class="code-block">
|
||||
git config --global user.name "g11s1"<br>
|
||||
git config --global user.email "g11s1@ict.ru"
|
||||
</div>
|
||||
|
||||
<div class="important-note">
|
||||
<p><strong>Important Note:</strong> Git credentials are set per computer, not per folder. If you change computers or someone else uses your computer, you'll need to check and possibly update the Git user credentials.</p>
|
||||
<p>To check your current Git configuration:</p>
|
||||
<div class="code-block">git config --list</div>
|
||||
</div>
|
||||
|
||||
<h3>Exercise: Configure Git</h3>
|
||||
<div class="exercise">
|
||||
<ol>
|
||||
<li>Open your terminal/command prompt</li>
|
||||
<li>Set your username: <code>git config --global user.name "g11sX"</code> (replace X with your student number)</li>
|
||||
<li>Set your email: <code>git config --global user.email "g11sX@ict.ru"</code></li>
|
||||
<li>Verify your settings: <code>git config --list</code></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lesson 2 Slides -->
|
||||
<div class="slide">
|
||||
<h1>Lesson 2: Working with Local Repositories</h1>
|
||||
<h2>Learning Outcomes</h2>
|
||||
<ul>
|
||||
<li>Create and initialize a local Git repository</li>
|
||||
<li>Understand the basic Git workflow: add, commit, status</li>
|
||||
<li>Fork and clone remote repositories</li>
|
||||
<li>Make changes and push them to a remote repository</li>
|
||||
</ul>
|
||||
|
||||
<h2>Why This Matters</h2>
|
||||
<div class="card">
|
||||
<p>Local repositories allow you to work on projects independently before sharing your changes. Understanding how to:</p>
|
||||
<ul>
|
||||
<li>Create repositories</li>
|
||||
<li>Track changes with commits</li>
|
||||
<li>Work with remote repositories</li>
|
||||
</ul>
|
||||
<p>These are fundamental skills for any development workflow!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Challenge 1: Local Repository</h1>
|
||||
<div class="exercise">
|
||||
<ol>
|
||||
<li>Create a new folder called <code>my-first-git-project</code></li>
|
||||
<li>Initialize it as a Git project: <code>git init</code></li>
|
||||
<li>Open the folder in Sublime Text</li>
|
||||
<li>Create a basic <code>README.md</code> with an explanation of a project you'd like to do (use headers, lists, etc.)</li>
|
||||
<li>Add the file to staging: <code>git add README.md</code></li>
|
||||
<li>Commit the changes: <code>git commit -m "Added README file"</code></li>
|
||||
<li>Check the commit history: <code>git log</code></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h3>Example README.md</h3>
|
||||
<div class="code-block">
|
||||
# My First Git Project<br>
|
||||
<br>
|
||||
## Project Description<br>
|
||||
This is a simple web application that will:<br>
|
||||
- Display current weather information<br>
|
||||
- Allow users to search for weather by city<br>
|
||||
- Show a 5-day forecast<br>
|
||||
<br>
|
||||
## Technologies Used<br>
|
||||
- HTML<br>
|
||||
- CSS<br>
|
||||
- JavaScript<br>
|
||||
- Weather API
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Challenge 2: Fork and Clone Repository</h1>
|
||||
<div class="exercise">
|
||||
<h3>Forking a Repository</h3>
|
||||
<ol>
|
||||
<li>Go to the example repository: <code>https://gitea.techshare.cc/technolyceum/g11-m2.git</code></li>
|
||||
<li>Click the "Fork" button to create your own copy</li>
|
||||
</ol>
|
||||
|
||||
<h3>Cloning to Your Local Environment</h3>
|
||||
<ol>
|
||||
<li>Open your terminal/command tool</li>
|
||||
<li>Navigate to your projects folder: <code>cd projects</code></li>
|
||||
<li>Clone your forked repository: <code>git clone [your-forked-repo-url]</code></li>
|
||||
<li>Navigate into the new folder: <code>cd [repository-name]</code></li>
|
||||
</ol>
|
||||
|
||||
<h3>Making and Pushing Changes</h3>
|
||||
<ol>
|
||||
<li>Make changes to the <code>index.html</code> file</li>
|
||||
<li>Stage your changes: <code>git add .</code></li>
|
||||
<li>Check status: <code>git status</code></li>
|
||||
<li>Commit changes: <code>git commit -m "Changed index file"</code></li>
|
||||
<li>Push to remote: <code>git push -u origin master</code></li>
|
||||
<li>Review your changes on the remote repository website</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lesson 3 Slides -->
|
||||
<div class="slide">
|
||||
<h1>Lesson 3: Collaboration with Git</h1>
|
||||
<h2>Learning Outcomes</h2>
|
||||
<ul>
|
||||
<li>Add collaborators to a GitHub repository</li>
|
||||
<li>Clone and work on a collaborator's repository</li>
|
||||
<li>Understand how to push changes and view differences</li>
|
||||
<li>Use Git commands to compare changes between versions</li>
|
||||
</ul>
|
||||
|
||||
<h2>Why Collaboration Matters</h2>
|
||||
<div class="card">
|
||||
<p>Most software development happens in teams. Git enables:</p>
|
||||
<ul>
|
||||
<li>Multiple developers to work on the same codebase</li>
|
||||
<li>Clear tracking of who made what changes</li>
|
||||
<li>Managing contributions from different team members</li>
|
||||
<li>Resolving conflicts when changes overlap</li>
|
||||
</ul>
|
||||
<p>These collaboration skills are essential for real-world development!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Adding Collaborators</h1>
|
||||
<div class="exercise">
|
||||
<h3>Step 1: Pair Up</h3>
|
||||
<p>Find a partner for this exercise - either a classmate or mentor.</p>
|
||||
|
||||
<h3>Step 2: Add Collaborator in GitHub</h3>
|
||||
<ol>
|
||||
<li>Navigate to your project in GitHub</li>
|
||||
<li>Click on the 'Settings' tab</li>
|
||||
<li>Select 'Collaborators' from the left menu</li>
|
||||
<li>Click 'Add people' and search for your partner's GitHub username</li>
|
||||
<li>Send the collaboration invitation</li>
|
||||
</ol>
|
||||
|
||||
<div class="important-note">
|
||||
<p><strong>Note:</strong> The exact steps may vary slightly depending on the Git platform (GitHub, GitLab, Gitea, etc.), but the concept is the same.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Collaboration Exercise</h1>
|
||||
<div class="exercise">
|
||||
<h3>Step 3: Clone and Modify</h3>
|
||||
<ol>
|
||||
<li>Your partner should clone your repository: <code>git clone [your-repo-url]</code></li>
|
||||
<li>Create a new folder for this project if needed</li>
|
||||
<li>Give your partner a simple "spec" - a small change to make in your project</li>
|
||||
<li>Your partner makes the change, then:
|
||||
<div class="code-block">
|
||||
git add .<br>
|
||||
git commit -m "Made requested change"<br>
|
||||
git push origin master
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>Step 4: Review Changes</h3>
|
||||
<ol>
|
||||
<li>Pull the latest changes: <code>git pull origin master</code></li>
|
||||
<li>View recent changes: <code>git diff HEAD</code></li>
|
||||
<li>Compare with previous version: <code>git diff HEAD~1</code></li>
|
||||
<li>Check the commit history on GitHub to see your partner's contribution</li>
|
||||
</ol>
|
||||
|
||||
<h3>Step 5: Reverse Roles</h3>
|
||||
<p>Now repeat the process with roles reversed - you become the collaborator on your partner's repository.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h1>Git Commands Summary</h1>
|
||||
<h2>Basic Git Workflow</h2>
|
||||
|
||||
<div class="code-block">
|
||||
# Initialize a new repository<br>
|
||||
git init<br><br>
|
||||
|
||||
# Clone an existing repository<br>
|
||||
git clone [repository-url]<br><br>
|
||||
|
||||
# Check status of files<br>
|
||||
git status<br><br>
|
||||
|
||||
# Add files to staging<br>
|
||||
git add [filename]<br>
|
||||
git add . # Add all files<br><br>
|
||||
|
||||
# Commit changes<br>
|
||||
git commit -m "Commit message"<br><br>
|
||||
|
||||
# Push to remote repository<br>
|
||||
git push origin master<br><br>
|
||||
|
||||
# Pull latest changes<br>
|
||||
git pull origin master<br><br>
|
||||
|
||||
# View commit history<br>
|
||||
git log<br><br>
|
||||
|
||||
# Compare changes<br>
|
||||
git diff<br>
|
||||
git diff HEAD<br>
|
||||
git diff HEAD~1
|
||||
</div>
|
||||
|
||||
<h2>Congratulations!</h2>
|
||||
<p>You've completed the 3-lesson Git fundamentals course. You now have the basic skills to use Git for version control and collaboration!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lesson-indicator" id="lesson-indicator">
|
||||
<!-- Lesson dots will be added by JavaScript -->
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
Grade 11 ICT - Git Fundamentals | Use the navigation buttons to move between slides
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const slides = document.getElementById('slides');
|
||||
const prevBtn = document.getElementById('prev-btn');
|
||||
const nextBtn = document.getElementById('next-btn');
|
||||
const lessonIndicator = document.getElementById('lesson-indicator');
|
||||
|
||||
let currentSlide = 0;
|
||||
const totalSlides = document.querySelectorAll('.slide').length;
|
||||
|
||||
// Create lesson indicator dots
|
||||
for (let i = 0; i < totalSlides; i++) {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'lesson-dot';
|
||||
if (i === 0) dot.classList.add('active');
|
||||
dot.addEventListener('click', () => goToSlide(i));
|
||||
lessonIndicator.appendChild(dot);
|
||||
}
|
||||
|
||||
function updateSlide() {
|
||||
slides.style.transform = `translateX(-${currentSlide * 100}%)`;
|
||||
|
||||
// Update active dot
|
||||
document.querySelectorAll('.lesson-dot').forEach((dot, index) => {
|
||||
if (index === currentSlide) {
|
||||
dot.classList.add('active');
|
||||
} else {
|
||||
dot.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Update button states
|
||||
prevBtn.disabled = currentSlide === 0;
|
||||
nextBtn.disabled = currentSlide === totalSlides - 1;
|
||||
}
|
||||
|
||||
function goToSlide(slideIndex) {
|
||||
currentSlide = slideIndex;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
if (currentSlide < totalSlides - 1) {
|
||||
currentSlide++;
|
||||
updateSlide();
|
||||
}
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
if (currentSlide > 0) {
|
||||
currentSlide--;
|
||||
updateSlide();
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
prevBtn.addEventListener('click', prevSlide);
|
||||
nextBtn.addEventListener('click', nextSlide);
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowRight') nextSlide();
|
||||
if (e.key === 'ArrowLeft') prevSlide();
|
||||
});
|
||||
|
||||
// Initialize
|
||||
updateSlide();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user