technolyceum/g11-m2
15
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added git-challenges and presentation

Browse Source
This commit is contained in:
root
2025-11-07 16:02:14 +03:00
parent 0e3d670b1c
commit 331703459d
8 changed files with 580 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

18
LICENSE
View File

@@ -1,18 +0,0 @@
MIT License
Copyright (c) 2025 admin
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial
portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
USE OR OTHER DEALINGS IN THE SOFTWARE.

579
Presentatinon_Git_Fundamentals.html Normal file
View 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>

27
README.md
View File

@@ -1,27 +0,0 @@
I am updateing this text.
## 🎯 Here's What You Need to Do:
### Step 1: Make Your Own Copy
- Click the **FORK** button at the top ↑
- This creates your personal workspace
### Step 2: Go to Your Workspace
- After forking, you'll see YOUR name in the website address
- This is now YOUR project
### Step 3: Work on Your Project
- Only work in YOUR forked copy
- Your teacher will check YOUR work here
## ❌ Important: Don't Work Here!
- This page is just the starting template
- Your work should be in YOUR copy
## ✅ Remember:
- Always click FORK first
- Always work in your forked copy
- Your username should be in the website address
## Need Help? 🤔
Just ask your teacher! We're here to help you learn.

1
git-challenges Submodule

Submodule git-challenges added at 25509f3f22

18
light.html
View File

@@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>

BIN
pic_bulboff.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
pic_bulbon.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB