firststeps.html

<!DOCTYPE HTML>
<!--
	Massively by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>MarioSpass by Elias und Loris</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Header -->
					<header id="header">
						
					</header>

				<!-- Nav -->
				
					<nav id="nav">
						<ul class="links">
							<li ><a href="index.html">Einleitung</a></li>
							<li class="active"><a href="firststeps.html">Erste Schritte</a></li>
							<li><a href="implement.html">Implementieren</a></li>
							<li><a href="final.html">Finales Produkt</a></li>
						</ul>
						<ul class="icons">
							<li><a href="https://github.com/Misterz1x/Praktikantentage/tree/main" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
						</ul>
					</nav>

				<!-- Main -->
					<div id="main">

						<!-- Post -->
							<section class="post">
								<header class="major">
									
									<h1><br />
									Erste Schritte</h1>
									<p>
										Hier werden euch die ersten Schritte erklärt:  
										von der Beschaffung der benötigten Dateien über GitHub  
										bis hin zu euren ersten Übungen mit dem Code.
									</p>
								</header>
								<p>
									Als Erstes öffnet ihr den Windows-Explorer und erstellt auf eurem Desktop einen neuen Ordner mit dem Namen <strong>projektMario_EUER_NAME</strong>.  
									Danach startet ihr das Programm <strong>Visual Studio Code</strong> und klickt auf den Button <em>„Ordner öffnen“</em> (oder <em>„Open Folder“</em>).  
									Es öffnet sich ein Fenster, in dem ihr euren gerade erstellten Ordner auswählt und öffnet.  
								</p>
								<div class="image main"><img src="images/ersteschritte1.png" alt="" /></div>
								<p></p>
								<div class="checklist">
									<div class="check-item">
										<input type="checkbox" id="task1">
										<label for="task1">Ordner erstellt</label>
									</div>
									<div class="check-item">
										<input type="checkbox" id="task2">
										<label for="task2">Ordner geöffnet</label>
									</div>
								</div>

								<h2>🎯 Nächstes Kapitel: Alles aufbauen!</h2>
								<p>
									Super, dass ihr so weit gekommen seid! 🛠️<br>
									Jetzt geht's darum, eure Programmierumgebung vollständig einzurichten und alle wichtigen Dateien herunterzuladen. Keine Sorge – Schritt für Schritt und alles ganz easy! 😊
								</p>

								<p><strong>Hinweis:</strong> Wenn ihr gerade <u>im Computerraum</u> seid, könnt ihr direkt bei <strong>Schritt 3</strong> weitermachen. Die ersten beiden Schritte braucht ihr nur <u>daheim</u>.</p>

								<h3>📦 Vorbereitung zu Hause:</h3>
								<ol>
									<li>
									<strong>Git installieren:</strong><br>
									Besucht <a href="https://gitforwindows.org/" target="_blank">gitforwindows.org</a> und wählt dort unter „Assets“ die Datei <code>Git-2.50.1-64-bit.exe</code> aus.<br>
									Führt die Datei aus und klickt euch einfach mit allen Voreinstellungen durch – nichts verändern, einfach bestätigen. So bekommt ihr die optimale Git-Erfahrung.
									</li>
									<li>
									<strong>GitHub-Erweiterung in Visual Studio Code:</strong><br>
									Öffnet Visual Studio Code, sucht im Erweiterungsbereich nach <em>GitHub Pull Requests</em> und installiert die Erweiterung.
									<div class="image main"><img src="images/ersteschritte5.png" alt="" /></div>
									</li>
								</ol>

								<h3>💾 Repository klonen:</h3>
								<ol start="3">
									<li>
									Öffnet ein Terminal in Visual Studio Code. Achtet darauf, dass ihr euch im gewünschten Projektordner befindet – dieser sollte unten im Terminalpfad sichtbar sein.<br>
									Gebt nun folgenden Befehl ein, um das Projekt von GitHub herunterzuladen:<br>
									
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code1')">📋 Kopieren</button>
										<pre><code id="code1">git clone https://github.com/Misterz1x/Praktikantentage.git</code></pre>
									</div>
										</li>
								</ol>
								<div class="image main"><img src="images/ersteschritte3.png" alt="" /></div>
								<p> Nun müsst ihr nur noch das richtige Verzeichnis auswählen, dazu schreibt einfach:
									
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code2')">📋 Kopieren</button>
										<pre><code id="code2">cd Praktikantentage</code></pre>
									</div>
									
									 in das Terminal </p>
								
								<h3>⚙️ UV-Projekt vorbereiten:</h3>
								<p><strong>Hinweis:</strong> Wenn ihr im Computerraum seid, sind die nächsten drei Schritte bereits erledigt – ihr könnt direkt bei <strong>Schritt 7</strong> weitermachen.</p>
								<ol start="4">
									<li>
									<strong>PowerShell öffnen und UV installieren:</strong><br>
									Gebt folgenden Befehl in eure PowerShell ein:<br>
									
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code3')">📋 Kopieren</button>
										<pre><code id="code3">powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"</code></pre>
									</div>
									
									
									
									</li>
									<div class="image main"><img src="images/ersteschritte4.png" alt="" /></div>
									
									<li>
									
									<strong>Pfad setzen:</strong><br>
									Ihr bekommt nach der Installation einen Pfad wie <code>$env:Path = "C:\Users\..."</code> angezeigt.<br>
									Kopiert diesen Befehl und führt ihn direkt in der PowerShell aus, um UV global nutzbar zu machen.<br>
									<strong>Wichtig:</strong> Wählt die Zeile für Powershell aus und kopiert nur bis ihr bei der Klammer seid, das (Powershell) könnt ihr weglassen
								</li>
									<li>
									<strong>UV-Version prüfen:</strong><br>
									Gebt folgenden Befehl in der <strong>Powershell	</strong> ein:<br>
									
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code4')">📋 Kopieren</button>
										<pre><code id="code4">uv --version</code></pre>
									</div>
									
									
									Wenn <code>0.8.3</code> oder etwas Ähnliches angezeigt wird, ist alles korrekt eingerichtet!
									</li>
								</ol>

								<h3>🐍 Virtuelle Umgebung starten:</h3>
								<ol start="7">
									<li>
									<strong>Virtuelle Umgebung erstellen:</strong><br>
									Öffnet in Visual Studio Code ein Terminal und gebt folgenden Befehl ein: <br>
									(wenn ihr es zuvor bereits offen hattet, bitte schließt es und öffnet es erneut)<br>
									
									

									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code5')">📋 Kopieren</button>
										<pre><code id="code5">uv venv</code></pre>
									</div>

									
									</li>
									<li>
									<strong>Aktivieren der Umgebung:</strong><br>
									
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code6')">📋 Kopieren</button>
										<pre><code id="code6">.venv\Scripts\activate</code></pre>
									</div>
									
									Jetzt sollte im Terminal vor dem Pfad etwas wie <code>(Praktikantentage)</code> stehen – das zeigt an, dass ihr in der richtigen Umgebung arbeitet.
									
									</li>
								
									<p>
										Sollte dies nicht der Fall sein, schreibt einfach diesen Befehl in euer Terminal:
										<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code42')">📋 Kopieren</button>
										<pre><code id="code42">Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned</code></pre>
									</div>
									
									</p>
									<li>
									<strong>Benötigte Bibliotheken installieren:</strong><br>
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code7')">📋 Kopieren</button>
										<pre><code id="code7">uv pip install -r pyproject.toml</code></pre>
									</div>
									Damit installiert ihr alles, was das Projekt braucht. (Dies könnte circa 2 - 5 Minuten dauern)
									</li>
								</ol>

								<h3>🚀 Letzter Check: Spiel starten!</h3>
								<p>
									Um zu prüfen, ob alles funktioniert, könnt ihr jetzt unser Mario-Spiel starten:<br>
									
									<div class="code-container">
										<button class="copy-btn" onclick="copyCode('code8')">📋 Kopieren</button>
										<pre><code id="code8">python camario.py</code></pre>
									</div>
									Viel Spaß! 🍄🎮
								</p>


							
								<p></p>
								<div class="checklist">
									<div class="check-item">
										<input type="checkbox" id="task3">
										<label for="task3">GitHub Link funktioniert</label>
									</div>
									<div class="check-item">
										<input type="checkbox" id="task4">
										<label for="task4">Alle Dateien befinden sich im Ordner</label>
									</div>
								</div>
								<div id="mario-container">
								<img id="mario-image" src="images/happymario.png" alt="Happy Mario">
								</div>
								
							
							<div>
								
								
							</div>
																						
							
							</section>

							<footer>
								<ul class="actions" style="display: flex; justify-content: center;">
									<li>
										<a href="#header" class="button icon solid solo fa-arrow-up scrolly"></a>
									</li>
								</ul>
							</footer>
					</div>



				<!-- Footer -->
					<footer id="footer">
						
					</footer>

				<!-- Copyright -->
					<div id="copyright">
						<ul><li>Ja - hooooo</li></ul>
					</div>

			</div>

		<!-- Scripts -->
			
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			<script src="assets/js/copy.js"></script>

			<script>
				const checkbox1 = document.getElementById('task1');
				const checkbox2 = document.getElementById('task2');
				const checkbox3 = document.getElementById('task3');
				const checkbox4 = document.getElementById('task4');
				
				const mario = document.getElementById('mario-container');

				function checkMario() {
					if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked) {
					mario.style.display = 'block';
					} else {
					mario.style.display = 'none';
					}
				}

				checkbox1.addEventListener('change', checkMario);
				checkbox2.addEventListener('change', checkMario);
				checkbox3.addEventListener('change', checkMario);
				checkbox4.addEventListener('change', checkMario);



			</script>

	</body>
</html>