forked from technolyceum/g11-m2
218 lines
6.6 KiB
HTML
218 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chess Coding Exercise</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.4;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
border-bottom: 2px solid #3498db;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.section {
|
|
margin: 25px 0;
|
|
padding: 15px;
|
|
border-left: 4px solid #3498db;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.section-title {
|
|
color: #2c3e50;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.code {
|
|
background: #2c3e50;
|
|
color: white;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.step {
|
|
margin: 12px 0;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.tip {
|
|
background: #ffeaa7;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 15px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.warning {
|
|
background: #fab1a0;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 15px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.task {
|
|
background: #dfe6e9;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Chess Board Coding Exercise</h1>
|
|
|
|
<div class="section">
|
|
<h3 class="section-title">Part 1: Setup Git</h3>
|
|
|
|
<div class="step">
|
|
<strong>1. Check if Git is installed:</strong>
|
|
<div class="code">git --version</div>
|
|
If you see a version number, Git is installed. If not, download from <strong>git-scm.com</strong>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>2. Set your credentials:</strong>
|
|
<div class="code">git config --global user.name "g11s1"</div>
|
|
<div class="code">git config --global user.email "g11s1@ict.ru"</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>3. Create and navigate to your folder:</strong>
|
|
<div class="code">cd Documents</div>
|
|
<div class="code">mkdir chess-project</div>
|
|
<div class="code">cd chess-project</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3 class="section-title">Part 2: Get the Code</h3>
|
|
|
|
<div class="step">
|
|
<strong>1. Go to Gitea in your browser:</strong>
|
|
<div class="code">https://gitea.techshare.cc</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>2. Login with your credentials</strong>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>3. Fork this repository:</strong>
|
|
<div class="code">https://gitea.techshare.cc/technolyceum/g11-m2.git</div>
|
|
Click the "Fork" button to create your own copy
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>4. Clone your forked repository:</strong>
|
|
<div class="code">git clone https://gitea.techshare.cc/your-username/g11-m2.git</div>
|
|
Replace "your-username" with your actual Gitea username
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>5. Enter the project folder:</strong>
|
|
<div class="code">cd g11-m2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3 class="section-title">Part 3: Coding Tasks</h3>
|
|
|
|
<div class="task">
|
|
<strong>Task 1: CSS Styling</strong>
|
|
<p>Find the .chess-board CSS and add:</p>
|
|
<div class="code">width: 400px;
|
|
height: 400px;
|
|
display: grid;
|
|
border: 3px solid gray;</div>
|
|
</div>
|
|
|
|
<div class="task">
|
|
<strong>Task 2: JavaScript Function</strong>
|
|
<p>Find the function and replace with:</p>
|
|
<div class="code">function createChessBoard() {</div>
|
|
</div>
|
|
|
|
<div class="task">
|
|
<strong>Task 3: For Loops</strong>
|
|
<p>Find the loops and replace with:</p>
|
|
<div class="code">for (let row = 0; row < 8; row++) {
|
|
for (let col = 0; col < 8; col++) {</div>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
<strong>Test your work:</strong>
|
|
<ol>
|
|
<li>Save the HTML file</li>
|
|
<li>Open it in a browser</li>
|
|
<li>Click "Create Chess Board"</li>
|
|
<li>You should see a chess board with 64 squares!</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3 class="section-title">Part 4: Save to Git</h3>
|
|
|
|
<div class="step">
|
|
<strong>1. Check what you changed:</strong>
|
|
<div class="code">git status</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>2. Add your changes:</strong>
|
|
<div class="code">git add .</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>3. Commit with a message:</strong>
|
|
<div class="code">git commit -m "Completed chess board coding exercise"</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>4. Push to your repository:</strong>
|
|
<div class="code">git push origin main</div>
|
|
</div>
|
|
|
|
<div class="warning">
|
|
<strong>If asked for credentials:</strong>
|
|
<ul>
|
|
<li>Enter your Gitea username</li>
|
|
<li>Enter your Gitea password</li>
|
|
<li>If you get errors, try:</li>
|
|
<div class="code">git push https://gitea.techshare.cc/your-username/g11-m2.git main</div>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<strong>5. Verify on Gitea:</strong>
|
|
<p>Refresh your repository page in the browser to see your changes</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
<strong>What you learned:</strong>
|
|
<ul>
|
|
<li>Git setup and configuration</li>
|
|
<li>Forking and cloning repositories</li>
|
|
<li>CSS: width, height, grid, border</li>
|
|
<li>JavaScript: functions, for loops</li>
|
|
<li>Git: add, commit, push workflow</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html> |